1

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>
Program-Me-Rev
  • 6,184
  • 18
  • 58
  • 142

2 Answers2

3

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>
guest271314
  • 1
  • 15
  • 104
  • 177
  • Hi @guest271314. One last thing please. How can I go about selecting an element from inside an iFrame and adding some HTML into it, after getting an iFrame `var pageBody = $(".pageBody")[0].contentWindow;`. For example, an implementation like: `$(pageBody.document.body).contents().find(".someDIV").html('
    DIV content
    ');`     – Program-Me-Rev Nov 11 '15 at 16:20
  • @Program-Me-Rev Tried `$(pageBody.document.body).contents().find(".someDIV").html('
    DIV content
    ');` ?     – guest271314 Nov 11 '15 at 16:24
  • Yes. I've done it after loading a HTML, `pageBody.html`, then trying to add HTML into a DIV, `contentDIV` inside `pageBody.html`. This is the way I've gone about it: $(pageBody.document.body).load('pageBody.html'); $(pageBody.document.body).contents().find(".contentDIV").html('
    Content...
    ');     – Program-Me-Rev Nov 11 '15 at 16:34
  • Hi @guest271314. I just noticed that it actually loads the HTML, which then quickly disappears. What could be the problem? – Program-Me-Rev Nov 11 '15 at 18:38
  • Appear to be loading entire `html` documen t- same `html` document as existing `html` document - into `body` element of `pageBody` at `$(pageBody.document.body).load('pageBody.html');` ? , then replacing newly added document with `'
    Content...‌​div>'` ? tried without `.load()` portion ? What is expected result ?
     – guest271314 Nov 11 '15 at 18:43
0

You can get the reference of the main window from an iFrame as follow: Window.Parent reference

Then, you can assign an event to catch a trigger or a function in the main window (or only in the other iFrame) to manage it.

For example :

  • Write a function in pageBody.html associated to a custom event.
  • Get window reference from your click function in your header.html iFrame.
  • Search target element which has your custom event assigned.
  • Fire the event

I would hope it help you.

SerCrAsH
  • 440
  • 5
  • 14