Change iframe height after content update

Question

I have some tabs on my page, and inside one tab of that page I have an iframe (#quiz_iframe). This iframe is quiz frame, which is contained in a div (.quiz-div). After hitting a button (.start-quiz), quiz is loaded, and new div (.quiz-content) appears inside (.quiz-div). In quiz content I have 20 another divs (.quiz-question), which are paginated, so after clicking a button next, prev, you can hide or show 5 next/prev divs.

Well the point is, I'd like to adjust iframe height to that content and I don't know how, after clicking .start-quiz.

Now I have a code which works fine, when the iframe is loaded for the first time (it adjust height to the laoded content)

function iframeLoaded() {
  var iFrameID = document.getElementById('quiz_iframe');
  if(iFrameID) {
        iFrameID.height = "";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }

}

<iframe onload="iframeLoaded()" id="quiz_iframe" src="'.$link.'" style="width:100%;"></iframe>'

How I can modify that code, to update iframe height on every .quiz-div height change? And yes, iframe is in the same domain :)

Thanks!

possible duplicate of [make iframe height dynamic based on content inside- JQUERY/Javascript](http://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript) — James Hill, Sep 04 '14 at 13:16
Call `iframeLoaded()` from the script, which is changing the content of the `.quiz-div`? @JamesHill Looks like OP has already read that post, the code in the accepted answer is the same as in the question here. — Teemu, Sep 04 '14 at 19:24

score 0 · Answer 1 · answered Sep 04 '14 at 13:18

0

In jQuery, you could use

$("myContainer .quiz_div").on("resize", function () {
    $("#quiz_idrame").attr("height", your height calc goes here);
});

The "on" is a delegated event binding and thus if you add/remove items with the class of .quiz_div to the "myContainer" i.e. whatever contains the divs, it should bind.

answered Sep 04 '14 at 13:18

Jeff Watkins

6,343
16
19

`jQuery(function($) { $(document).ready(function() { $("body .quiz_div").on("resize", function () { $("#quiz_iframe").attr("height", +50); }); });` Did something like this inside page loaded in #quiz_iframe, but that doesn't work. Probably I've done something wrong? :) – zel Sep 04 '14 at 16:24
Create a jsfiddle and I'll take a look! – Jeff Watkins Sep 06 '14 at 08:04

score 0 · Accepted Answer · answered Sep 04 '14 at 13:23

You can use a solution based on postMessage You'll have to include some JavaScript in the iframe and on the parent page as well.

In your iframe :

window.addEventListener("load", function() {
    parent.postMessage(getDocumentHeight(), "*");
});

In your parent page :

function receiveIframeHeight(frameWindow, height) {
    $("iframe").each(function () {
        if (this.contentWindow === frameWindow) this.height = height;
    });
};
window.addEventListener("message", function (e) {
    receiveIframeHeight(e.source, e.data);
});

You can now listen to the resize event and postMessage from your iframe to the parent page. But beware of infinite loop.

To see the whole code you should take a look at this Github repo iframe-autoheight-using-postmessage

Change iframe height after content update

2 Answers2