javascript - How to clear the contents of an iFrame from another iFrame

Question

Welcome To Ask or Share your Answers For Others

javascript - How to clear the contents of an iFrame from another iFrame

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How to clear the contents of an iFrame from another iFrame

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>

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-16T22:11:50+0000

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>

Categories

javascript - How to clear the contents of an iFrame from another iFrame

javascript - How to clear the contents of an iFrame from another iFrame

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags