的IFrame文档的高度返回iframe的高度不是真实的高度

问题描述：

我有在Resizing an iframe based on content 的IFrame文档的高度返回iframe的高度不是真实的高度

I帧体的高度发出的iframe体的高度，以使用三个帧技术父页面的iframe中一些javascript似乎总是出现在900，iframe的视口高度。这在浏览器中是一致的。

iframe的：

<iframe id="printiq" src="http://myurl.com" height="900px" width="980px">Your browser does not support iframes.</iframe>

的IFRAME内的脚本：

$(window).load(function() { 
    var height = document.body.scrollHeight + 60; 
    alert('Height: ' + height); //Always returns 900, the height of the iframe 
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper'; 
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>'; 
    $('body').append(iframe_html);

}）;

奇怪的是，当我检查与萤火虫没有高度变量（scrollHeight属性，的offsetHeight等）设定为900

答

问题的DOM是在的iFrame网页div被扩展到的高度视口。我通过更改CSS来修复它。

这是我结束的代码。

父窗口。

function resizeIframe(height) { 
    height = parseInt(height) + 60; 
    $('iframe#printiq').attr('height', height); 
}

iframed外部网站的脚本。

$(window).load(function() { 
    var height = $('#container').height() + $('#header').height(); 
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper'; 
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>'; 
    $('body').append(iframe_html);

}）;

嵌入到iframe中的iframe助手。浏览器窗口的孙子，如果你喜欢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <!-- 
    This page is on the same domain as the parent, so can 
    communicate with it to order the iframe window resizing 
    to fit the content 
    --> 
    <body onload="parentIframeResize()"> 
     <style type="text/css"> 
      body{ 
       border:none; 
       display:none; 
      } 
     </style> 
     <script> 
      // Tell the parent iframe what height the iframe needs to be 
      function parentIframeResize() 
      { 
       var height = getParam('height'); 
       // This works as our parent's parent is on our domain.. 
       parent.parent.resizeIframe(height); 
      } 

      function getUrlVars() 
      { 
       var vars = [], hash; 
       var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
       for(var i = 0; i < hashes.length; i++) 
       { 
        hash = hashes[i].split('='); 
        vars.push(hash[0]); 
        vars[hash[0]] = hash[1]; 
       } 
       return vars; 
      } 

      // Helper function, parse param from request string 
      function getParam(name) 
      { 

       var results = getUrlVars(); 
       if(results == null) 
        return ""; 
       else 
        return results['height']; 
      } 
     </script> 
    </body> 
</html>

的IFrame文档的高度返回iframe的高度不是真实的高度

相关推荐