CODEWITHSUNDEEP
javascriptjqueryiframe
Mark Kang
Mark Kang

Reputation: 79

iframe auto height doesn't work properly on Firefox

I was looking for a solution for auto height adjusting depending on the contents that are inside the iframe, and this seems like it's working on chrome.

But for some reason, if i wait for the site to completely load, and then click on the 'Wall' tab on the main page, the iframe contents are not visible, as the height is set for '4px'.

Again, if you click on the wall tab while it's loading, or before it gets load, it works perfectly fine.

I'm guessing it has to do with the source. The site I'm having problem with is here : http://xefrontier.com/

could anyone tell me why this phenomenon is happening?

and this is the source:

  function resizeIframe(obj){
 obj.style.height = 0;
 obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }

 function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, 
    html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}

function setIframeHeight(id) {
var iframe_board = document.getElementById(id);
var doc = iframe_board.contentDocument? iframe_board.contentDocument: 
    iframe_board.contentWindow.document;
iframe_board.style.visibility = 'hidden';
iframe_board.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
iframe_board.style.height = getDocHeight( doc ) + 4 + "px";
iframe_board.style.visibility = 'visible';
}

document.getElementById('iframe_board').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}

Upvotes: 1

Views: 1092

Answers (2)

zer00ne
zer00ne

Reputation: 43880

Solution for OP's issue is as follows:

  • A function that interacts with iframes works in Chrome but not in Firefox.
    • STOP If there is ever a problem with Firefox and Chrome is ok with interacting with iframes, then consider if this occurs in a PC, Mac, or both.
    • Chances are it's going to be Mac and it's wonderful relationship with Firefox (note: sarcasm cannot not be expressed very well on keyboard).

  • If the problem is isolated to the Mac running Firefox, then you can do the following to fix it 88.4% of the time.

    1. Locate any event handlers that are listening for the load event on iframes:

      • ex. <iframe src="domain.com" onload="eventHandler()"></iframe>

        REMOVE=================^-------===THIS===------^.

    2. Disable/remove them.

    3. At the very end of your </script> block add this:

      ex. window.onload = eventHandler;

    NOTE ===================^=^ -DO NOT ADD () at the end of function

Firefox Mac has many different issues unique onto itself, some by design. One of those bugs is it's inability to acknowledge an iframe's existence after it's been loaded. Firefox Mac will deal with iframes after everything else has been loaded. This is just my observation from experience.

Upvotes: 1

Vigikaran
Vigikaran

Reputation: 725

use the following code to resize iframe height

 <script language="javascript" type="text/javascript">
 function resizeIframe(obj) {
  obj.style.height = (obj.contentWindow.document.body.scrollHeight) + 'px';
}
</script>

and in iframe tag

  <iframe src="somepage.php" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>

Upvotes: 0

Related Questions