如何从另一个iFrame中清除iFrame的内容 [英] How to clear the contents of an iFrame from another iFrame
问题描述
我有一个 wrapperPage.html ，其中< iframe class =header和< iframe class =pageBody。在头中有一个链接，< a class =clearLink，点击时应清除 pageBody 。
到目前为止，上述想法的以下实现不起作用。请帮我解决这个问题。
请注意 pageBody 都是从不同的包含文件中加载的。
$ b wrapperPage.html
< div class = non-floater>
< iframe class =headersrc =header.html>< / iframe>
< iframe class =pageBodysrc =pageBody.html/>
< / div>
header.html：
< script type =text / javascript> （）。
$（document）.ready（function（）{
$（。clearLink）。on（click，function（）{
$（'。pageBody'）。contents （）.find（body）。html（''）;
}）;
}）;
< / script>
< a class =clearLinkhref =＃>导航按钮< / a>
pageBody.html：
< div class =panel-body>这是body< / div>
尝试使用频道短信
wrapperPage.html
< body>
< div class = non-floater>
< iframe class =headersrc =header.html>< / iframe>
< iframe class =pageBodysrc =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 =clearLinkhref =＃>导航按钮< / a>
< script>
var port;
onmessage = function（e）{
port = e.ports [0]; （click，function（e）{
port.postMessage（clicked）;
}
$（。clearLink ）;
< / script>
< / body>
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屋！
