1

I've been tearing out my hair over this one... Maybe someone can help? The height of an embedded web app on my site looks as expected on Safari (calculated height as 992px), but in Chrome, the iframe containing the webapp calculates the height as 150px, which is "incorrect".

The height for the IFRAME should be computed using a simple code using Javascript, as referenced elsewhere on StackExchange:

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

<iframe class="embed-blast" src="http://example.com/mywebapp" scrolling="no" onload="resizeIframe(this)" ></iframe>

I've tried using jQuery, and a variety of other scripts, none of which seem to fix the underlying issue.

What I'd like is to size the IFRAME to the full content size (as occurs in Safari already) in Chrome. I've tried looking for any description of this behavior, but haven't been able to find it. Not sure if this is a "bug" or expected behavior-- not having much familiarity with JavaScript or IFRAMEs, I'm completely vexed.

Is anyone aware of this issue and a potential workaround? Many thanks in advance.

Community
  • 1
  • 1
jasongallant
  • 91
  • 2
  • 9
  • Possible duplicate of [HTML/DOM: What is standards equivalent of document.body.scrollHeight?](http://stackoverflow.com/questions/3788830/html-dom-what-is-standards-equivalent-of-document-body-scrollheight) – Alexander O'Mara Aug 24 '16 at 02:07
  • If the `body` is not at least the height of the window, `body.scrollHeight` can be smaller than the window, if that's what you mean. – Alexander O'Mara Aug 24 '16 at 02:09
  • Thanks @AlexanderO'Mara. Not sure what I mean-- I'm confused that Chrome and Safari interpret the same code completely differently. Which to use so that I get a consistent result? – jasongallant Aug 24 '16 at 02:23
  • I thing you want `obj.contentWindow.document.documentElement.scrollHeight` – Alexander O'Mara Aug 24 '16 at 02:26
  • When I change that, it doesn't fix the issue. Still inconsistent between browsers. Ideally, I can come up with a solution that sets the IFRAME height to 992 in Chrome as well as Safari. – jasongallant Aug 24 '16 at 02:27
  • Please clarify what exactly is wrong. A [mcve] would be helpful too (we can't access your link). – Alexander O'Mara Aug 24 '16 at 02:28
  • Simplest form of the question: how is it that Chrome can calculate different content height than safari for the same content when using the exact same code? An answer even to this question might help me rephrase and fix the problem above! – jasongallant Aug 24 '16 at 02:45
  • 1
    Either the reported height of the body element is different across browsers (I believe WebKit/Blink browsers report quirky, pre-spec values for a lot of these properties), or the content is actually a different height when the code runs (`onload` may not fire at exactly the same time cross-browser). – Alexander O'Mara Aug 24 '16 at 02:49
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121680/discussion-between-jasongallant-and-alexander-omara). – jasongallant Aug 24 '16 at 02:54
  • FWIW this may be where my height of 150px is coming from? http://stackoverflow.com/questions/5871668/default-width-height-of-an-iframe – jasongallant Aug 24 '16 at 03:20

0 Answers0