如何从另一个 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
<iframe class="header" src="header.html"></iframe><iframe class="pageBody" src="pageBody.html"/>header.html :
<a class="clearLink" href="#">导航按钮</a>pageBody.html:
<div class="panel-body">这是主体</div>尝试使用 频道消息
wrapperPage.html
<iframe class="header" src="header.html"></iframe><iframe class="pageBody" src="pageBody.html"/><脚本>var channel = new MessageChannel();var header = $(".header")[0].contentWindow;var pageBody = $(".pageBody")[0].contentWindow;header.onload = 函数(){this.postMessage("","*", [channel.port2])};channel.port1.onmessage = function(e) {如果(e.data ===点击"){$(pageBody.document.body).html("")}}
header.html
<a class="clearLink" href="#">导航按钮</a><脚本>无功端口；onmessage = 函数(e){端口 = e.ports[0];}$(".clearLink").on("click", function(e) {port.postMessage("点击");});I have a wrapperPage.html with an <iframe class="header" and <iframe class="pageBody". In header there is a link, <a class="clearLink", which when clicked should clear the contents of pageBody.
So far the following implementation of the above idea doesn't work. Please help me resolve this.
Please NOTE that, header and pageBody are each loaded from different included files.
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>
Try using Channel messaging
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 的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
