调整动态iframe的大小（Chrome的问题） [英] Resize dynamic iframe (problem with Chrome)

问题描述

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

So I've been looking around at all the other Stack Overflow posts and around google about how to set the height/width automatically on an iFrame. I've gone through about 15-20 of them and none have worked for me so far. Let me try to explain my situation:

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

I'm dynamically setting the body of an iFrame on my page. I'm needing the iFrame to automatically set its height and width accordingly so all text is visible.

我需要在IE中工作（7和amp ; 8），FireFox 3和Chrome。

以下是其他问题：

1. 我正在ASP.Net中写一个主页面（所以body元素不在问题中）。


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


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


4. 所有我可以访问的是javascript，没有别的。

1. I'm writing in ASP.Net with a master page (so the body element is out of the question).
2. I'm needing to set the text of the iFrame on each postback from the server.
3. I'm needing the iFrame to resize when the browser resizes.
4. All I have access to is javascript, nothing else.

我正在将所有内容写在同一个域上，这样不是问题。

I am writing everything on the same domain, so thats not a problem.

我觉得我目前只是一个钻机，随时会分崩离析。它在IE中显示正确，但在FireFox中具有巨大的底部空白，并且在Chrome中完全不显示（doc始终为空）。

I feel like what I currently have is just a rig and will fall apart at any moment. It displays correct in IE but has a huge bottom margin in FireFox and doesn't display at all in Chrome (doc is always null).

这是（我试过要尽可能详细，让我知道，如果我需要解释更多）：

Here it is (I tried to be as detailed as possible, let me know if I need to explain more):

   <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;" />

推荐答案

Welllll，在这几个小时后，终于让它上班了

Welllll, after messing around with this a couple hours I finally got it to work.

只是这样我很明显，Chrome有一个时间问题。如果您在页面加载时动态设置iFrame的内容，则必须等待几毫秒才能正确设置高度。这就是为什么我使用了setTimeout函数，并且它对于所有的浏览器都是有效的，如果没有，那么Chrome的使用时间将会是原来的两倍。

Just so I make it obvious, there's a timing issue with Chrome. If you dynamically set the content of an iFrame on page load you have to wait a few milliseconds before you can correctly set the height. That's why I used the setTimeout function and it worked every time for all browsers, if you didn't, sometimes Chrome would be twice as large as it should have been.

以下是我曾经在IE，FF和Chrome中使用的代码：

Here's the code that I used to make it work in IE, FF, and 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 Side：

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

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

这篇关于调整动态iframe的大小（Chrome的问题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！