Содержимое iFrame помещается в поле прокрутки в IE - PullRequest
Новая
       21

Содержимое iFrame помещается в поле прокрутки в IE

0 голосов
/ 24 января 2012

У меня проблема с динамически изменяемым размером iFrame. По сути, он отлично работает в IE 7,8,9, но только в режиме Quirks и работает правильно в Chrome и Firefox. Так что моя проблема связана со стандартными режимами документов, например, 7,8,9.

В IE в стандартной форме он сжимает содержимое в поле прокрутки высотой около 200 пикселей с вертикальной полосой прокрутки. Я могу отредактировать стиль, чтобы использовать определенную высоту, т.е. 600 пикселей вместо высоты 100%, что будет хорошо выглядеть ... однако характер содержимого меняется немного с точки зрения высоты.

Кто-нибудь имеет какие-либо решения для этого? Кажется немного странным!

Прокрутка = нет поддерживает сжатый контент, я просто не могу прокрутить вниз тогда. Переполнение в CSS ничего не делает. Есть идеи?

1 Ответ

1 голос
/ 24 января 2012

У меня есть решение, которое работает в IE 7 + Он использует 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);
    }
}

Это код JavaScript. Вот 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>

Запуск на одной странице: 

<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>

УБЕДИТЕСЬ, что вы обновили iframes SRC

...