Изменение размера динамического iframe (проблема с Chrome)

Question

Итак, я просматривал все другие сообщения о переполнении стека и вокруг Google о том, как автоматически устанавливать высоту/ширину на 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 всегда имеет значение 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" 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 Side:

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

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