2012-10-07 4 views
0

iframe에 다른 페이지를 삽입하는 웹 페이지가 있습니다. 바깥 쪽 문서에서 iframe의 문서 크기 (픽셀 단위)를 가져 오려면 JavaScript 함수가 필요합니다.JavaScript : iframe body 크기를 찾으십시오.

나는 DOM 내가 widthheight에 관한 찾을 수있는 유일한 특성을 탐구 한은 내부 문서보다 작은 iframe이 자체의 높이를 제공합니다.

<iframe src="tall_page.php" id="my_iframe" style="height: 101px"></iframe> 

... 

var i = document .getElementById ("my_iframe"); 
i = i .contentDocument .body; 
alert (i .offsetHeight); // or scrollHeight or clientHeight 

위의 값은 "101"입니다. 그 이후의 가치는 프레임이 아닌 전체 내용 문서의 크기입니다. <body>뿐만 아니라 CSS가 html{padding:x}을 제공하는 경우이를 포함시켜야합니다.

어떻게이 값을 얻을 수 있습니까?

+0

내 대답을 볼 수 있습니다. – defau1t

+0

@refhat, 아니, 나는이 작동하는지, 내가 포스트 – spraff

+0

을 다시 할 수 없습니다 은 iframe 높이 VAR = document.getElementById ("my_iframe"). height(); 알림 (iframe-height); – defau1t

답변

0

이 작동합니다 jQuery를 사용 : 나는 contentWindow 개체를 사용하여 작업 할 그것을 가지고

+0

감사하지만 jQuery에서이 작은 작업을 드래그하고 싶지는 않습니다. 처음부터 어떻게 할 수 있습니까? – spraff

0

을하는 데 도움이

var height = $("my_iframe").height(); 
var width = $("my_iframe").width(); 

희망.

여기 아이디어는 iframe 내부에 설정 한 요소의 너비/높이를 얻는 것입니다. 내 예를 들어, iframe body를 css를 사용하여 3000px로 설정하고 작동하도록했습니다.

iframe.html :

당신은 iframe의 데이터 에 접근하고 있기 때문에 동일한 원본 정책 여기

을 준수해야한다는 것을 명심 나의 예입니다

<!DOCTYPE html> 
<html lang='en'> 
    <head> 
     <title>My Iframe</title> 
    </head> 
    <body id='mybody' style='width:3000px;'> 
     Hello! 
    </body> 
</html> 

index.html

<!DOCTYPE html> 

<html lang='en'> 
    <head> 
     <title>My Test</title> 
     <script> 
      window.onload = function() { 
       var f = document.getElementById('myiframe'); 
       console.dir(f.contentWindow.document.getElementById('mybody').clientWidth); 
      } 
     </script> 
    </head> 
    <body> 
     <iframe id='myiframe' src='iframe.html' height='480' width='640'> 
     </iframe> 
    </body> 
</html> 

희망이 있습니다.

+0

고마워요.하지만 그건 저를 위해 작동하지 않습니다. 사실 Firefox의 Web Developer에서 포함 된 요소를 선택하여 검사하면 프레임 높이로 * div * 높이가 계산됩니다. 내용을 검사하도록 선택된 프레임을 스크롤하면 모든 것이 아닌 것을 볼 수 있습니다 요소는 실제로 선택되었습니다. – spraff

관련 문제