Question

我遇到了动态调整大小的iFrame的问题。基本上它在IE 7,8,9中完美运行，但仅在Quirks模式下运行并在chrome和firefox中正确运行。所以我的问题涉及标准文档模式，即7,8,9。

当在标准格式的IE中时，它将内容压缩到高度约为200像素的滚动框中，仅使用垂直滚动条。我可以编辑样式以使用特定的高度，即600px而不是高度100％，看起来很好......但是内容的性质在高度方面有很大差异。

有人对此有任何解决方案吗？看起来有点奇怪！

滚动=没有维持被压缩的内容，我只是无法向下滚动。 CSS溢出无能为力。有什么想法吗？

Answer 1

我有一个在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

iFrame内容挤进了IE中的一个滚动条

1 个答案: