調整動態iframe的大小（Chrome的問題）

Question

所以我一直在環顧所有其他堆棧溢出帖子，並圍繞谷歌關於如何自動設置高度/寬度在iFrame上。我已經經歷了大約15到20個，到目前爲止我還沒有爲我工作過。讓我試着解釋我的情況：

我在頁面上動態設置iFrame的正文。我需要iFrame自動設置其高度和寬度，以便所有文本都可見。

我需要這個工作在IE（7 & 8），FireFox 3和Chrome。

下面是creap到這一問題的其他問題：

1. 我寫在ASP.Net與母版頁（所以身體元素是不可能的）。
2. 我需要在每次從服務器回發時設置iFrame的文本。
3. 我需要iFrame在瀏覽器調整大小時調整大小。
4. 我只能訪問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

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" style="display:none;" /> 

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