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

概述所以我一直在寻找所有其他Stack Overflow帖子以及谷歌周围如何在iFrame上自动设置高度/宽度.到目前为止,我已经完成了大约15-20个,但没有一个对我有效.让我试着解释一下我的情况： 我正在我的页面上动态设置iFrame的主体.我需要iFrame相应地自动设置其高度和宽度,以便所有文本都可见. 我需要这个在IE(7& 8),FireFox 3和Chrome中工作. 以下是进入该问题的 所以我一直在寻找所有其他Stack Overflow帖子以及谷歌周围如何在iframe上自动设置高度/宽度.到目前为止,我已经完成了大约15-20个,但没有一个对我有效.让我试着解释一下我的情况：

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

我需要这个在IE(7& 8),firefox 3和Chrome中工作.

以下是进入该问题的其他问题：

>我在ASP.Net中写了一个母版页(所以body元素是不可能的).
>我需要在服务器的每个回发中设置iframe的文本.
>我需要在浏览器调整大小时调整iframe的大小.
>我有权访问的是JavaScript,没有别的.

我在同一个域上写所有内容,所以这不是问题.

我觉得我现在拥有的只是一个装备,随时都会崩溃.它在IE中显示正确但在firefox中具有巨大的底部边距,并且在Chrome中根本不显示(doc始终为null).

这是(我试着尽可能详细,如果我需要解释更多,请告诉我)：

<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"  onload="Writeiframe();"></iframe>     <textarea ID="hIDdeniframeContent" runat="server"  />

解决方法 Welllll,经过几个小时的讨论,我终于开始工作了.

所以我明确表示,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"  /><div ID="iframeContainer"></div>

总结

以上是内存溢出为你收集整理的调整动态iframe的大小(Chrome问题)全部内容，希望文章能够帮你解决调整动态iframe的大小(Chrome问题)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。