콘텐츠에 Iframe 높이 맞추기

콘텐츠에 iframe의 높이를 맞출 방법이 있습니까? 어떻게하는지 보여 주시겠습니까? 내가 검색하고 순하지만 행운의 코드를 시도하려콘텐츠에 Iframe 높이 맞추기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta NAME="Description" content="Communigate Technologies" /> 
<meta HTTP-EQUIV="Cache-Control" content="no-cache" /> 
<meta HTTP-EQUIV="pragma" content="no-cache" /> 

<title></title> 

</head> 

<body> 
    <div align="center" style="z-index:1;"> 
    <?php include 'header.html' ?> 

     <iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe> 

    </div> 

</body> 

</html>

출처

2013-07-31 abc123

http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it?rq=1 –

나는이 링크를 연구하고 스크립트를 시도했지만 그것은 내 문제를 해결하지 못합니다. – abc123

aboutus1.php는 파일입니다. 우리가 높이를 받아서 고칠 수있는 비디오 나 이미지가 아닙니다. 고정 된 높이로 고정해야하거나 100 % 수 있습니다. –

당신이 주 문서에서 실행 할 수 있습니다 문서 및 iframe 내용에 대해 동일한 기원을 가지고 (당신의 예에서, 당신은) 경우 :

var iframe = document.getElementById('my-iframe') 
var content = iframe.contentWindow.document.getElementById('content') 
var height = content.offsetHeight + 15 //add something to support paddings etc. 
iframe.style.height = height + 'px' 
var width = content.offsetWidth + 15 
iframe.style.width = width + 'px'

하지만 당신의 '내용'요소는 적응의 크기를 검사

, 종종 요소가 눈에 보이는 내용보다 훨씬 더 때문이다.

document.getElementById("iframename").height = (document.getElementById("iframename").contentWindow.document.body.scrollHeight) + "px";

때때로이 작동하지 않았다하지만 난은 iframe의 페이지가 completelly 렌더링되지 않았기 때문에 그것이 발견 :

출처

2013-07-31 07:31:03

나는 이런 식으로 않습니다. 이 경우 , 나는, 더 이상 문제를 몰랐 내부 명령어를 넣어 :

setTimeout(function(){ - here - }, 100)

희망 나는 도왔다.

출처

2013-08-02 18:38:53 Jorge

우리는 CSS3 시대부터 뷰포트 단위를 사용하여이 작업을 수행 할 수 있습니다. 이 단위를 사용하면 뷰포트 너비와 뷰포트 높이의 백분율로 크기를 지정할 수 있습니다. 이것은 화면이라고도하는 사용자의 뷰포트입니다. 그러나, 내가 그것을 시도한 모든 주요 브라우저에서 다른 div 및 위치 관계가있는 div 안에 iframe을 넣으면 뷰포트 단위가이 div와 관련이 있습니다. 100 뷰포트의 높이 단위로 100 % 높이를 의미하기 때문에, 당신은 다음과 같이 할 수 있습니다 : 당신이 그것을 원하는 정확히 같은 크로스 도메인이며, 디스플레이부터

<div id="parent"> 
    <div id="wrapper" style="position:relative"> 
     <iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe> 
    </div> 
</div>

내가, 최선의 해결책 가능이를 찾아 어떤 자바 스크립트 또는 기타 복잡한 것들없이.

그리고 가장 중요한 것은 모든 브라우저에서 사용할 수 있습니다. 심지어 모바일 (Android 및 iphone으로 테스트)에서도 작동합니다!

출처

2014-03-13 18:33:16

절대적으로 가장 좋은 해결책입니다. 교차 도메인은 큰 도움이 될뿐만 아니라 javacript 옵션보다 훨씬 깔끔하고 유지 보수가 용이합니다. 고마워! – Zoidberg

콘텐츠에 Iframe 높이 맞추기

답변

관련 문제