IFrame을 문서 높이가 IFrame을 높이되지 실제 높이를 반환

나는 Resizing an iframe based on content IFrame을 문서 높이가 IFrame을 높이되지 실제 높이를 반환

iframe을 본체의 높이에 세 프레임 기술을 사용하여 상위 페이지에 iframe을 본체의 높이를 보내는 iframe이 내부의 자바 스크립트를 항상 iframe의 뷰포트 높이 인 900에서 나오는 것으로 보입니다. 이것은 여러 브라우저에서 일관됩니다.

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);

});

나는 900

출처

2010-07-06 Keyo

문제로 설정되어 높이 변수 (scrollHeight,는 offsetHeight 등)의 불을 지르고 없음과 DOM을 검사 할 때 이상한 일이 것은를 iframe 페이지 사업부는의 높이로 확장 하였다 뷰포트. 나는 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>

출처

2010-07-07 01:35:46 Keyo

IFrame을 문서 높이가 IFrame을 높이되지 실제 높이를 반환

답변

관련 문제