Question

I am experiencing a problem with a dynamically sizing iFrame. Essentially it works perfectly in IE 7,8,9 but only in Quirks mode and runs correctly in chrome and firefox. So my problem relates to Standard document modes for ie 7,8,9.

When in IE in standard form it squeezes the content into a scrollbox about 200px in height with a vertical scrollbar only. I can edit the style to use a specific height i.e 600px instead of height 100% which will look fine…however the nature of the content varies a good bit in terms of height.

Does anybody have any solutions to this? Seems a bit odd!

Scrolling=no maintains the squeezed content, I just can’t scroll down then. overflow in CSS is doing nothing. Any ideas?

Answer 1

I have a solution that runs in IE 7 +
It uses jQuery

MyLibrary = {
    iframeApp: function(options) {
        var $app = $(window[options.name]),
            $appContainer = $(options.wrapperId);

        window.setInterval(function() {
            var frameEl = $app[0].frameElement,
                frameDoc = 0,
                height = 0;

            if (frameEl.contentDocument !== undefined) {
                frameDoc = frameEl.contentDocument,
                height = frameDoc.height || frameDoc.body.offsetHeight;
            } else if (frameEl.document !== undefined && frameEl.document.documentElement !== undefined) {
                frameDoc = frameEl.document.documentElement,
                height = frameDoc.offsetHeight;
            }
            $appContainer.css("height", height);
        }, 500);
    }
}

Thats the javascript code. Here is the html.

<div id="iframe-runner">
    <iframe scrolling="no"frameborder="0"name="myiframe"class="myiframe"src="http://mysrc.com/sweet-i-frame-app"width="100%"height="100%"></iframe>
</div>

<script type="text/javascript">
    $(function() {
        MyLibrary.iframeApp({
            name: "myiframe",
            wrapperId: "#iframe-runner"
        });
    })
</script>

---

Running it in one page:

<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<div id="iframe-runner">
    <iframe scrolling="no"frameborder="0"name="myiframe"class="myiframe"src="http://mysrc.com/sweet-i-frame-app"width="100%"height="100%"></iframe>
</div>
<script type="text/javascript">
    $(function() {
        iframeApp({
            name: "myiframe",
            wrapperId: "#iframe-runner"
        });
    })
    function iframeApp(options) {
        var $app = $(window[options.name]),
            $appContainer = $(options.wrapperId);

        window.setInterval(function() {
            var frameEl = $app[0].frameElement,
                frameDoc = 0,
                height = 0;

            if (frameEl.contentDocument !== undefined) {
                frameDoc = frameEl.contentDocument,
                height = frameDoc.height || frameDoc.body.offsetHeight;
            } else if (frameEl.document !== undefined && frameEl.document.documentElement !== undefined) {
                frameDoc = frameEl.document.documentElement,
                height = frameDoc.offsetHeight;
            }
            $appContainer.css("height", height);
        }, 500);
    }
</script>

MAKE SURE you update the iframes SRC