iFrame의 크기를 자동으로 조정하는 방법은 무엇입니까?
중복 가능성 :
콘텐츠를 기반으로 iframe 크기 조정
iFrame을로드 중이며 부모가 iFrame 콘텐츠의 높이에 따라 높이를 자동으로 변경하기를 원합니다.
간단히 말해서 모든 페이지가 동일한 도메인에 속하므로 교차 사이트 스크립팅 문제가 발생하지 않아야합니다.
다른 요소에서는 scrollHeightDOM 개체를 사용하고 그에 따라 높이를 설정합니다. 나는 이것이 iframe에서 작동하는지 모르겠지만 (모든 것에 대해 약간 까다 롭기 때문에) 확실히 시도해 볼 가치가 있습니다.
편집 : 둘러 본 후 대중적인 합의는 offsetHeight다음을 사용하여 iframe 내에서 높이를 설정하는 것입니다 .
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
그리고 iframe-body의 onLoad이벤트 와 함께 실행되도록 첨부하십시오 .
시험:
나는 당신의 질문에 우연히 왔고 해결책이 있습니다. 그러나 그것은 jquery에 있습니다. 너무 간단합니다.
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
됐어요!
건배! :)
편집 : div 메서드가 아닌 iframe 메서드를 기반으로하는 서식있는 텍스트 편집기가 있고 모든 새 줄을 확장하려면이 코드가 필요합니다.
다음은 모든 브라우저와 교차 도메인에서 작동하는 단순한 솔루션입니다.
첫째, 이것은 iframe이 포함 된 html 페이지의 높이가 100 %로 설정되고 iframe이 css를 사용하여 높이가 100 % 인 스타일이 지정되면 CSS가 모든 크기에 맞게 자동으로 크기가 조정된다는 개념에서 작동합니다.
다음은 코드입니다.
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
이 솔루션 은 저에게 가장 적합했습니다. jQuery와 iframe의 ".load"이벤트를 사용합니다.
IE 5.5 이상에서는 contentWindow 속성을 사용할 수 있습니다.
iframe.height = iframe.contentWindow.document.scrollHeight;
Netscape 6 (Firefox도 가정)에서 contentDocument 속성 :
iframe.height = iframe.contentDocument.scrollHeight
@ShripadK의 솔루션이 가장 도움이되었지만 iframe이 두 개 이상 있으면 작동하지 않습니다. 내 수정 사항은 다음과 같습니다.
function autoResizeIFrame() {
$('iframe').height(
function() {
return $(this).contents().find('body').height() + 20;
}
)
}
$('iframe').contents().find('body').css(
{"min-height": "100", "overflow" : "hidden"});
setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
$('iframe').height($('iframe').contents().find('body').height() + 20)모든 프레임의 높이를 동일한 값, 즉 첫 번째 프레임의 내용 높이로 설정합니다. 그래서height()값 대신 함수와 함께 jquery를 사용 하고 있습니다. 이렇게하면 개별 높이가 계산됩니다.+ 20iframe 스크롤바 문제를 해결하기위한 해킹입니다. 숫자는 스크롤바의 크기보다 커야합니다. 해킹은 피할 수 있지만 iframe의 스크롤바를 비활성화합니다.- 제 경우에는 CPU 부하를 줄이는
setTimeout대신 사용 합니다.setInterval(..., 1)
내 솔루션, (jquery 사용) :
<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>
<script type="text/javascript">
$(function () {
$('.tabFrame').load(function () {
var iframeContentWindow = this.contentWindow;
var height = iframeContentWindow.$(document).height();
this.style.height = height + 'px';
});
});
</script>
Oli는 저에게 적합한 솔루션을 가지고 있습니다. 기록을 위해, 내 iFrame 내부의 페이지는 자바 스크립트로 렌더링되므로 offsetHeight를보고하기 전에 극히 작은 지연이 필요합니다. 다음과 같은 라인을 따라 보입니다.
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document['body'].offsetHeight);
}
사실-Patrick의 코드는 저에게도 효과적이었습니다. 이를 수행하는 올바른 방법은 다음과 같습니다.
참고 : 앞에 약간의 jquery가 있습니다.
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
이것은 프로토 타입을 사용하여 찾은 가장 쉬운 방법입니다.
Main.html :
<html>
<head>
<script src="prototype.js"></script>
<script>
function init() {
var iframe = $(document.getElementById("iframe"));
var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
var cy = iframe_content.getDimensions().height;
iframe.style.height = cy + "px";
}
</script>
</head>
<body onload="init()">
<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>
<br>
this is the next line
</body>
</html>
content.html :
<html>
<head>
<script src="prototype.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>
</body>
</html>
이것은 (지금까지) 모든 주요 브라우저에서 작동하는 것 같습니다.
내 해결 방법은 CSS 및 background속성 에서 예상되는 소스 페이지 크기보다 높이 / 너비를 iframe 을 transparent.
iframe allow-transparency에서 true및 scrolling로 설정 합니다 no.
The only thing visible will be whatever source file you use. It works in IE8, Firefox 3, & Safari.
참고URL : https://stackoverflow.com/questions/247128/how-to-auto-size-an-iframe
'programing tip' 카테고리의 다른 글
| 지도가없는 Google 장소 라이브러리 (0) | 2020.11.21 |
|---|---|
| Pylint의 Cell-var-from-loop 경고 (0) | 2020.11.21 |
| 형식화 된 메모리 뷰에 권장되는 메모리 할당 방법은 무엇입니까? (0) | 2020.11.21 |
| C ++ 14 자리 구분자에 공백 문자가 선택되지 않은 이유는 무엇입니까? (0) | 2020.11.21 |
| Google 크롬 개발자 도구는 매우 느리게 작동합니다. (0) | 2020.11.21 |