如何从另一个iFrame清除一个iFrame的内容

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个wrapperPage.html与<iframeclass="header"和<iframeclass="pageBody"。在header其中有一个链接，<aclass="clearLink"单击该链接应清除的内容pageBody。

到目前为止，上述想法的以下实现无效。请帮我解决这个问题。

，header并且pageBody每个都从不同的包含文件加载。

<div class=non-floater>
    <iframe class="header" src="header.html"></iframe>
    <iframe class="pageBody" src="pageBody.html" /> 
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".clearLink").on("click", function() {
            $('.pageBody').contents().find("body").html('');
        });
    });
</script>
<a class="clearLink" href="#">Navigation Button</a>

<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的内容 的全部内容， 来源链接： utcz.com/qa/413914.html

回到顶部