dynamic - 调整动态 iframe 的大小(Chrome 的问题)

Question

所以我一直在查看所有其他 Stack Overflow 帖子和谷歌关于如何在 iFrame 上自动设置高度/宽度的信息。我已经经历了大约 15-20 次，到目前为止，没有一个对我有用。让我试着解释一下我的情况:

我在我的页面上动态设置 iFrame 的主体。我需要 iFrame 相应地自动设置其高度和宽度，以便所有文本都可见。

我需要它在 IE (7 & 8)、FireFox 3 和 Chrome 中工作。

以下是引发该问题的其他问题:

我正在使用母版页在 ASP.Net 中编写(因此正文元素是不可能的)。

我需要在服务器的每个回发上设置 iFrame 的文本。

当浏览器调整大小时，我需要 iFrame 调整大小。

我所能访问的只是javascript，没有别的。

我在同一个域上编写所有内容，所以这不是问题。

我觉得我现在拥有的只是一个钻机，随时都会分崩离析。它在 IE 中显示正确，但在 FireFox 中有很大的底部边距，在 Chrome 中根本不显示(doc 始终为空)。

这是(我试图尽可能详细，如果我需要解释更多，请告诉我):

   <script type="text/javascript">
        function WriteIFrame()
        {
            // get the text i need to put in the iFrame (this is set from the server)
            var iFrameContent = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;
            var iFrameContainer = document.getElementById("divIFrameContainer");

            // create the new iFrame object
            var iFrame = document.createElement("iframe");
            iFrame.setAttribute("id", "myIFrame");
            iFrame.setAttribute("scrolling", "no");
            iFrame.setAttribute("frameborder", "0");

            // add the new iFrame object to the container div
            iFrameContainer.appendChild(iFrame);

            // find the correct inner document of the iFrame
            var doc = iFrame.document;
            if (doc == null && iFrame.contentDocument)
                doc = iFrame.contentDocument;
            //

            // write the information into the iFrame
            if (doc != null)
            {
                doc.open();
                doc.writeln(iFrameContent);
                doc.close();
            }

            // set the proper height
            var height = doc.body.scrollHeight + iFrameContainer.offsetTop;
            iFrame.setAttribute("style", "width: 100%; height: " + height + "px;");
        }

    </script>

    <div id="divIFrameContainer" oninit="WriteIFrame();">
    </div>

    <iframe id="HelperIFrame" style="display: none;" onload="WriteIFrame();"></iframe>
     <textarea id="hiddenIFrameContent" runat="server" style="display: none;" />

Answer 1

Wellllll，在搞砸了几个小时后，我终于让它工作了。

只是我想说明一下，Chrome 存在计时问题。如果在页面加载时动态设置 iFrame 的内容，则必须等待几毫秒才能正确设置高度。这就是我使用 setTimeout 函数的原因，它每次都适用于所有浏览器，如果不这样做，有时 Chrome 会比它应该的大两倍。

这是我用来使其在 IE、FF 和 Chrome 中工作的代码:

<script type="text/javascript">

    function OnIFrameLoad()
    {
        _frame = document.createElement("iframe");
        _frame.setAttribute("scrolling", "auto");
        _frame.setAttribute("frameborder", "0");
        _frame.setAttribute("style", "width: 100%;");
        _frame.style.width = "100%";

        document.getElementById("IFrameContainer").appendChild(_frame);

        _innerDoc = _frame.document;

        if (_frame.contentDocument)
            _innerDoc = _frame.contentDocument; // For NS6
        if (_frame.contentWindow)
            _innerDoc = _frame.contentWindow.document; // For IE5.5 and IE6
        //

        window.parent.SetIFrameContent();

        // We're calling the ResizeIFrame function after 10 milliseconds because when
        // Chrome shows the iframe, it takes a few moments to get the correct height.
        setTimeout("window.parent.ResizeIFrame()", 10);
    }

    function SetIFrameContent()
    {
        var content = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;

        _innerDoc.open();
        _innerDoc.writeln(content);
        _innerDoc.close();
    }

    function ResizeIFrame(frameId)
    {
        var objectToResize = (_frame.style) ? _frame.style : _frame;
        var innerDocBody = _innerDoc.body;

        var newHeight = _innerDoc.body.clientHeight;
        if (_innerDoc.body.scrollHeight > newHeight)
            newHeight = _innerDoc.body.scrollHeight;
        //

        objectToResize.height = newHeight + 40 + "px";
    }
</script>

ASP 端:

<textarea id="hiddenIFrameContent" runat="server" style="display:none;" />

<div id="IFrameContainer"></div>