在 iframe 中打开本地页面答案

【问题标题】：open local page in iframe在 iframe 中打开本地页面
【发布时间】：2014-06-22 06:08:00
【问题描述】：

我有两个 iframe，我需要通过单击按钮（在我的 topframe 中）加载另一个本地页面 (help_content.html)（在我的 bottomframe 中）。 topframe 有一个表单 (help_form.html)，带有 3 个按钮（2 个可以工作），而 bottomframe 当前是一个 blank.html，需要在单击按钮时加载 help_screen.html。

来自 help_screen.html 的 HTML

<iframe name="topframe" id="topframe" src="help_form.html"><p>Your browser cannot view iFrames</p></iframe>
<br/>
<iframe name="bottomframe" id="bottomframe" src="blank.html"><p>Your browser cannot view iFrames</p></iframe>

Javascript

function openHelp() {       
document.getElementById("bottomframe").src="help_screen.html";
    }

来自 help_form.html 上的按钮的 HTML

<input type="button" name="help1" value="Click for help" onclick="openHelp()" />

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

您不需要调用父级的window 字段，直接从它调用函数即可，因为parent 已经是对window 的引用：

onclick="parent.openHelp();"

正如this question 建议（引用）：

…见window.parent

返回对当前窗口或子框架的父级的引用。

如果一个窗口没有父级，它的父级属性是一个引用对自己。

当一个窗口在、<object> 或 <frame> 中加载时，它的 parent 是元素嵌入窗口的窗口。</object>

前提是函数定义在help_screen.html上。

但是，如果您的函数是在子级上定义的，您应该这样调用它 (as this question suggests)：

parent.document.getElementById("bottomFrame").contentWindow.openHelp();

或者：

parent.document.bottomFrame.contentWindow.openHelp();

【讨论】：

谢谢arielnmz。我刚刚尝试了您的所有建议，但仍然没有成功展示它。
javascript代码定义在哪里？如果你在函数的开头加上alert('hola');，你真的看到警报了吗？
是的，点击按钮会弹出警报
alert(document.getElementById("bottomFrame")); 的输出是什么？
弹出时显示为空

【解决方案2】：

在您的 javascript 中，
您已将 src 设置为 help_screen.html
虽然您应该将其设置为 help_content.html

编辑

help_screen.html 必须包含此代码：

<!DOCTYPE html>
<html>
    <head>
        <script>
            function openHelp() {

                 var frame = document.getElementById("bottomframe");
                 frame.setAttribute("src", "help_content.html");
            }
        </script>
    </head>


    <body>
        <iframe name="topframe" id="topframe" src="help_form.html">Your browser suckss...</iframe>

        <iframe name="bottomframe" id="bottomframe" src="#">Your browser really suckss...</iframe>
     </body>             
</html>

您的 help_form.html 必须包含此按钮：

<input type="button" onclick="parent.window.openHelp()">

【讨论】：

感谢 Aditya 的回复。我刚刚尝试了所有组合，但不幸的是它仍然无法正常工作。
谢谢，但它仍然无法正常工作。我的目录如下... order_form.html（带有打开 help_screen.html 的按钮的主页） help_screen.html（同时具有 iframe - topframe 和 bottomframe） help_form.html（填充 iframe（topframe）并具有按钮onclick 用 help_content.html 填充底部框架） help_content.html （是我要填充底部框架的页面） blank_page.html （是底部框架的当前页面）我想你可能是在正确的轨道上，但可能错过了一步在大量的页面中。
目的是打开一个窗口，当单击顶部框架上的按钮时，它会打开下面的帮助，以提供有关填写其上方表格的说明。
@aingelic 你能告诉我你把你的javascript sn-p放在哪个文件里吗？您的help_screen.html 是在单独的选项卡、同一选项卡还是 iframe 中打开？
我有一个名为 music.js 的 JavaScript 文件，它链接到我的 html 页面

【解决方案3】：

我使用function openHelp(document){ parent.document.getElementById('bottomframe').src="help_content.html"; } 让它工作了虽然它不能在 Chrome 上运行，但我很高兴它完全可以运行。非常感谢 @Aditya 和 @arielnmz 的所有帮助。不胜感激。

【讨论】：