iframe 콘텐츠 높이를 설정하여 동적으로 자동 크기 조정
콘텐츠로 iframe의 높이를 변경하는 간단한 솔루션을 찾고있었습니다.
규칙은 iframe을 들고있는 페이지에서 iframe의 높이를 가져올 수 없다는 것입니다. 이것은 분명히 보안 때문입니다. 어떻게 할 수 있습니까?
iframe에서 : 따라서 iframe 페이지에 코드를 추가해야합니다. IFRAME의 코드에이 스크립트를 추가하기 만하면됩니다.
<body onload="parent.alertsize(document.body.scrollHeight);">
보류 페이지에서 : iframe을 보유한 페이지 (내 경우에는 ID = "myiframe")에 작은 자바 스크립트를 추가합니다.
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
이제 iframe이로드 될 때 부모 창에서 자바 스크립트를 트리거합니다.이 경우에는 iframe이있는 페이지입니다.
해당 JavaScript 함수에 (iframe) 높이가 몇 픽셀인지 보냅니다.
상위 창은 숫자를 가져 와서 스크롤바를 피하기 위해 32를 더하고 iframe 높이를 새 숫자로 설정합니다.
그게 전부입니다. 다른 것은 필요하지 않습니다.
그러나 더 작은 트릭을 알고 싶다면 계속 읽으십시오 ...
IFRAME의 동적 높이? 내가 콘텐츠를 전환하고 싶다면 iframe 높이가 변경됩니다 (페이지를 다시로드하고 onload를 트리거하지 않음). 일반적으로 온라인에서 찾은 매우 간단한 토글 스크립트를 추가합니다.
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
}
</script>
해당 스크립트에 다음을 추가하십시오.
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>
위의 스크립트를 사용하는 방법은 간단합니다.
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
잘라내어 붙여넣고 거기에서 이동하는 것을 좋아하는 사람들을 위해 두 페이지가 있습니다. 제 경우에는 같은 폴더에 있었지만 도메인 간에서도 작동해야합니다 (제 생각에는 ...)
전체 보류 페이지 코드 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>
<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>
완전한 iframe 코드 : (이 iframe 이름은 "theiframe.htm")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight);
}
</script>
</head>
<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END
</body>
</html>
간단한 솔루션 :
<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
This works when the iframe and parent window are in the same domain. It does not work when the two are in different domains.
참고URL : https://stackoverflow.com/questions/7024574/set-iframe-content-height-to-auto-resize-dynamically
'developer tip' 카테고리의 다른 글
| "아직 구현되지 않음"을 알리는 방법은 무엇입니까? (0) | 2020.12.13 |
|---|---|
| knitr로 애니메이션 된 rgl 그래프 (0) | 2020.12.13 |
| Android AccountManager는 앱 / UID 단위로 OAuth 토큰을 저장하면 안 되나요? (0) | 2020.12.13 |
| Sun의 javac에서 생성 된 이상한 예외 테이블 항목 (0) | 2020.12.13 |
| Google Cloud Endpoints에 대한 커스텀 인증 (OAuth2 대신) (0) | 2020.12.13 |