如何创建一个按钮/链接以在中显示源代码而不是页面？

How do I make that when I click on a button / link instead of a page, that the button / link shows the source codes of a page in the iframe it targets? On an iframe who normally has a page on...

当我点击按钮/链接而不是页面时，如何按钮/链接显示其目标iframe中页面的源代码？在iframe上通常有一个页面...

That is if to do that is even possible. But if it is then that would be great, because my page has a container iframe showing a web page and if by clicking a button / link that iframe could show the source codes of the page too, that would be perfect.

那就是如果这样做甚至是可能的。但是如果那样那会很棒，因为我的页面有一个容器iframe显示一个网页，如果点击按钮/链接iframe也可以显示页面的源代码，那将是完美的。

I tried:

我试过了：

<a class="button" href="view-source:Func/Math_Calculator_Func.html" target="IFrWin">Show the Source Code for the math function</a>

<iframe src="Func/Math_Calculator_Func.html" name="IFrWin" id="IFrWin" width="100%" height="748px" scrolling="auto" style="overflow:auto; overflow-y:hidden; overflow-x:auto;" valign="middle" align="center" border="0" frameborder="no" noresize></iframe>

I also tried:

我也尝试过：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function viewsource()
    {
        var oldHTML = document.getElementById('para').innerHTML;
        var newHTML = "" + oldHTML + "";
        var newHTML = newHTML.replace(/</g,"&lt;");
        var newHTML = newHTML.replace(/>/g,"&gt;");
        var newHTML = newHTML.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        document.getElementById('IFrWin').innerHTML = newHTML;
        var myIFrame = document.getElementById('IFrWin');
        myIFrame.src=javascript:'"+newHTML+"'";
    }
</script>
<input type="button" onclick="viewsource();" value=" View Source TEST "/>
<iframe src="Func/Math_Calculator_Func.html" name="IFrWin" id="IFrWin" width="100%" height="748px" scrolling="auto" style="overflow:auto; overflow-y:hidden; overflow-x:auto;" valign="middle" align="center" border="0" frameborder="no" noresize></iframe>

Both of them did not work.

他们俩都没有用。

2 个解决方案

#1

If you are the owner of the source files, you can easily create a copy of the files, change their type to *.txt and simply change the source of your iframe to the given document.

如果您是源文件的所有者，则可以轻松创建文件的副本，将其类型更改为* .txt，只需将iframe的源更改为给定文档即可。

This might work out with something along the way of this, you would just have to add the toggle mechanism.

这可能会解决这个问题，您只需添加切换机制即可。

document.getElementById('iframe').src = 'path/to/file.txt';

#2

<html>
                <head>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" /> </script>
                <script type="text/javascript">

                    function viewsource(){
                        $.get('Func/Math_Calculator_Func.html', function(data) { 
                            var oldHTML = data;
                            var newHTML = "" + oldHTML + "";
                            var newHTML = newHTML.replace(/</g,"&lt;");
                            var newHTML = newHTML.replace(/>/g,"&gt;");
                            var newHTML = newHTML.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                            document.getElementById('iframe1').innerHTML = newHTML;
                            var myIFrame = document.getElementById('iframe1');
                            myIFrame.src="javascript:'"+newHTML+"'";
                            return1(); //call this function to show alert
                        });
                    }

                </script>
                </head>
                <body>
                    <iframe src="" width="555" height="200" id="iframe1"></iframe>
                    <input type='button' onclick='viewsource()' value='View Source'/>
                </body>
                </html>

worked me..!! first check own then to integrate..set file path correctly.. any other doubt plz comment me...

工作了我.. !!首先检查自己然后正确整合..set文件路径..任何其他疑问plz评论我...

#1