javascript - onload event inside iframe only triggers once - Stack Overflow

I have a cross-domain iframe inside one of my page, its content should use the window.parent.postMessage method to notify it is rendered to the containing page (so it can adjust iframe's height to its content). It works quite well, but only once, if I start clicking in the iframe and browsing different pages, the load event does not get triggered anymore even if all the pages in the iframe contains the same JavaScript code (see below).

here's the container's code let's say container.js:

function onMessage(jqEvent) {
    if (jqEvent.originalEvent.data.iframe) {
        var iframeContentHeight = jqEvent.originalEvent.data.iframe;
        $('iframe').height(iframeContentHeight + 300);
    }
}
$(window).on('message.socialPanel', onMessage);

and here is the code inside the iframe (it is in an external file, let's call it iframe.js):

$(window).on('load', function () {
   var height = $('html').height();
   window.parent.postMessage({'iframe': height}, '*');
});

I have a cross-domain iframe inside one of my page, its content should use the window.parent.postMessage method to notify it is rendered to the containing page (so it can adjust iframe's height to its content). It works quite well, but only once, if I start clicking in the iframe and browsing different pages, the load event does not get triggered anymore even if all the pages in the iframe contains the same JavaScript code (see below).

here's the container's code let's say container.js:

function onMessage(jqEvent) {
    if (jqEvent.originalEvent.data.iframe) {
        var iframeContentHeight = jqEvent.originalEvent.data.iframe;
        $('iframe').height(iframeContentHeight + 300);
    }
}
$(window).on('message.socialPanel', onMessage);

and here is the code inside the iframe (it is in an external file, let's call it iframe.js):

$(window).on('load', function () {
   var height = $('html').height();
   window.parent.postMessage({'iframe': height}, '*');
});

• javascript
• jquery
• html
• iframe
• cross-domain

Share Improve this question Follow edited Dec 11, 2015 at 0:54 Josh Crozier 242k5656 gold badges400400 silver badges313313 bronze badges asked Jan 15, 2015 at 11:33 n00dl3n00dl3 21.6k88 gold badges6868 silver badges7777 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

another suggestion - onload is being triggered just once, yes, even when you change the src URL. But if you want it to be triggered again - just detach the iframe from DOM and attach it back again (when changing the URL). It did the trick for me.

I ran into exactly the same problem. @n00dl3's solution might not work in all situations - it didn't for me. It's due to a race condition - the load handler needs to be attached before the iframe loads its src. In some cases, moving the JS inline would move it early enough, in my case it didn't.

Here's how I solved it:

1. Omit src and onload from the iframe tag:

<iframe id="foo"></iframe>

2. Define (in the parent document) the function I want to run on load:

function resize() {
  // do the resizing here
}

3. Again in the parent document, attach the load handler:

document.getElementById("foo").setAttribute("onload", "resize()");

4. Still in the parent document, set the src:

document.getElementById("foo").setAttribute("src", "https://example./bar");

Boom, fires every time.

Ok, I finally found the solution (an explanation would be wele though).

I had to put the iframe's javascript in an inline <script> tag and not in an external one.

So my previous code :

<script type="text/javascript" src="/assets/js/build.js" ></script>

has bee:

<script type="text/javascript">
            window.onload = function () {
                var height = $('html').height();
                window.parent.postMessage({'iframe': height}, '*');
            }
</script>