1

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);
}
shas
  • 658
  • 2
  • 8
  • 26
Mark Kang
  • 79
  • 1
  • 2
  • 9
  • Hi @MarkKang make sure that the container that holds the iframe has `overflow-x:hidden` and `overflow-y: auto or scroll` the [demo](http://stackoverflow.com/a/35740331/2813224) I provided you was tested with Firefox PC are you using a Mac? Btw, if the parameter was setup correctly for`docHeight(x)` that 4 should add numerically and not concat. – zer00ne Mar 03 '16 at 13:29
  • hey @zer00ne i haven't exactly tried your coding, but i think i'd give it a go. and yes im a mac user. – Mark Kang Mar 03 '16 at 13:49
  • I knew it, ok instead calling function` resizeIframe` on the iframe load event, trigger later at `window.onload = resizeIframe;` do not add the "`()'" at the end of expression. Place that at the very end of script tag. – zer00ne Mar 03 '16 at 13:52
  • i guess it's working! thanks. – Mark Kang Mar 03 '16 at 13:55
  • Your'e welcome, sir. I should answer because it took me days to figure that out. – zer00ne Mar 03 '16 at 13:57
  • @zer00ne sure. thanks. looking forward to seeing you again. :p – Mark Kang Mar 03 '16 at 14:02
  • I posted the answer, so whenever you have the time to accept. Likewise, sir. – zer00ne Mar 03 '16 at 14:29
  • um, @zer00ne, i must have touched something on my website, i think it's most likely the css position attribute. but do you happen to know why the #frame_wall now for some reason resize it's height to fit to the height of the parent's screen resolution height on the wall tab? http://xefrontier.com/ – Mark Kang Mar 04 '16 at 22:33
  • P.S.or rather not resize anything at all? (no height value) and since im asking a question, one more : how can i apply the same js script to another one (duplicate) as well? seems like, it only works for a single iframe, is there a chance i can apply for both? – Mark Kang Mar 04 '16 at 22:54
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105408/discussion-between-zer00ne-and-mark-kang). – zer00ne Mar 04 '16 at 23:09

2 Answers2

1

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.

zer00ne
  • 31,838
  • 5
  • 32
  • 53
0

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>
Vigikaran
  • 677
  • 1
  • 9
  • 24
  • i have tried the code you gave me here, but still no luck :( try it out on my live website : http://lifeto.cafe24.com/xe/ just wait for a few sec to fully load (the orange circle disappears) and then click on the wall tab. – Mark Kang Mar 03 '16 at 13:08
  • remove height="100%" in the iframe tag ,style="height: 0px;" – Vigikaran Mar 03 '16 at 13:11
  • in case you didn't notice this, it's that javascript that's giving the height:0 to the iframe. i got rid of the rest from the styling, and yet there is just no luck. any solution you can think of? – Mark Kang Mar 03 '16 at 13:16
  • are yu loading the frame contents using ajax ? – Vigikaran Mar 03 '16 at 13:25
  • checkout this page working in firefix https://www.remotraining.com/schedules.html – Vigikaran Mar 03 '16 at 13:26