如何从另一个iFrame中清除iFrame的内容
How to clear the contents of an iFrame from another iFrame
我有一个带有<iframe class="header"
和<iframe class="pageBody"
的wrapperPage.html
。在header
中有一个链接<a class="clearLink"
,单击该链接应清除pageBody
的内容。
到目前为止,上述想法的以下实现不起作用。请帮我解决这个问题。
请注意header
和pageBody
分别从不同的包含文件加载。
wrapperPage.html
<div class=non-floater>
<iframe class="header" src="header.html"></iframe>
<iframe class="pageBody" src="pageBody.html" />
</div>
header.html:
<script type="text/javascript">
$(document).ready(function() {
$(".clearLink").on("click", function() {
$('.pageBody').contents().find("body").html('');
});
});
</script>
<a class="clearLink" href="#">Navigation Button</a>
pageBody.html:
<div class="panel-body">This is the body</div>
尝试使用通道消息
wrapperPage.html
<body>
<div class=non-floater>
<iframe class="header" src="header.html"></iframe>
<iframe class="pageBody" src="pageBody.html" />
</div>
<script>
var channel = new MessageChannel();
var header = $(".header")[0].contentWindow;
var pageBody = $(".pageBody")[0].contentWindow;
header.onload = function() {
this.postMessage("","*", [channel.port2])
};
channel.port1.onmessage = function(e) {
if (e.data === "clicked") {
$(pageBody.document.body).html("")
}
}
</script>
</body>
header.html
<body>
<a class="clearLink" href="#">Navigation Button</a>
<script>
var port;
onmessage = function(e) {
port = e.ports[0];
}
$(".clearLink").on("click", function(e) {
port.postMessage("clicked");
});
</script>
</body>
您可以从iFrame中获得主窗口的引用,如下所示:窗口.父引用
然后,您可以在主窗口(或仅在其他iFrame中)中分配一个事件来捕获触发器或函数以进行管理。
例如:
- 在pageBody.html中编写一个与自定义事件关联的函数
- 从
header.html
iFrame中的单击功能获取窗口引用 - 搜索已分配自定义事件的目标元素
- 启动活动
我希望它能帮助你。
相关文章:
- 防止Iframe窗体在新窗口中打开
- 将样式表插入iframe
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 单击jquery清除输入值
- 在Twitter上用ie9中的空白src访问iframe的contentWindow
- 使用jQuery从原始页面内容创建iframe
- Highslide(iframe的侦听器)
- iframe正在添加标签,需要删除它们
- 通过javascript/html访问twitter共享iframe
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 如何清除iframe中的所有内容
- 清除现有的 iframe 内容
- 如何清除iframe中选择的突出显示
- 如何从另一个iFrame中清除iFrame的内容
- 在iframe中加载url时清除url缓存
- 提交到iframe后清除表单
- 清除iframe内容以允许重新加载
- 如何清除iframe中的元素?
- 如何触发清除 iframe 父页面的缓存
- 清除超时在键控 iFrame 上不起作用