[英]How to clear the contents of an iFrame from another iFrame
我有一个wrapperPage.html
与<iframe class="header"
和<iframe class="pageBody"
。 在header
有一个链接<a class="clearLink"
,点击它时应该清除pageBody
的内容。
到目前为止,上述想法的以下实现不起作用。 请帮我解决这个问题。
请注意, header
和pageBody
分别从不同的包含文件加载。
包装页面.html
<div class=non-floater>
<iframe class="header" src="header.html"></iframe>
<iframe class="pageBody" src="pageBody.html" />
</div>
标头.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 获取主窗口的引用,如下所示: Window.Parent 引用
然后,您可以分配一个事件来捕获主窗口中的触发器或函数(或仅在其他 iFrame 中)以对其进行管理。
例如 :
header.html
iFrame 中的单击函数获取窗口引用。我希望它能帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.