javascript - 如何制作按钮/链接以在 <iframe> 而不是页面中显示源代码？

Question

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

也就是说，如果这样做甚至是可能的。但如果是，那就太好了，因为我的页面有一个显示网页的容器 iframe，如果通过单击按钮/链接，iframe 也可以显示页面的源代码，那就太完美了。

我试过了:

<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>

我也试过:

<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>

这两个都不行。

Answer 1

如果您是源文件的所有者，您可以轻松地创建文件的副本，将它们的类型更改为 *.txt 并将 iframe 的源更改为给定的文档。

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

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