How to clear the contents of an iFrame from another iFrame

by

Try using Channel messaging

wrapperPage.html

<body>
<div class=non-floater>
    <iframe class="header" src="https://stackoverflow.com/questions/33645685/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>

More Related Contents:

  1. Get DOM content of cross-domain iframe [duplicate]
  2. Reload an iframe with jQuery
  3. How can I detect whether an iframe is loaded?
  4. Attach an event in a child iframe to a handler in the parent window
  5. Set content of iframe
  6. putting html inside an iframe (using javascript)
  7. Detect click event inside iframe
  8. how to block website from loading in iframe?
  9. Change iframe src by clicking a link
  10. how to resolve iframe cross domain issue [duplicate]
  11. Iframe.readyState does not work in chrome
  12. How to detect a click inside of an iframe (cross-domain)? Aka prevent click fraud
  13. Insert content into iFrame
  14. Trigger a button click inside an iframe [duplicate]
  15. get parent.location.url – iframe – from child to parent
  16. iframe Auto Adjust Height as content changes
  17. Iframe inherit from parent
  18. How do I pass a URL as a parameter? [closed]
  19. .index() only for one instance of class [closed]
  20. Dynamic page load can’t load Java with page
  21. Why I have to put all the script to index.html in jquery mobile
  22. How to include multiple js files using jQuery $.getScript() method
  23. Changing the selected option of an HTML Select element
  24. jQuery UI accordion that keeps multiple sections open?
  25. Vanilla JavaScript equivalent of jQuery’s $.ready() – how to call a function when the page/DOM is ready for it [duplicate]
  26. jQuery: Why use document.ready if external JS at bottom of page?
  27. How to change active class while click to another link in bootstrap use jquery?
  28. copying the value of a form’s file input field to another form’s input field
  29. Bootstrap Dropdown menu is not working
  30. trigger file upload dialog using javascript/jquery

Leave a Comment