iframe 고도 자동 조정
참고가 되는 사이트를 찾아 왔습니다.
요구사항
iframe. 흔한 youtube, googlemap이 아닌 다른 사이트의 iframe (크로스 도메인이라고 함).
iframe측의 높이가 동적으로 바뀌는 경우(예: 기사의 타이틀이라든지, 일에 의해 문자수가 바뀌는 녀석) 높이를 고정하면 이상하게 스크롤이 붙어 버려, 외형이 나쁘다.
iframe 사용하고 있다고 가능한 한 알아차리고 싶지 않을 때 활용할 수 있다
샘플 코드
index.html(부모)<script>
window.addEventListener('message', function(e) {
var iframe = $("#parentframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
iframe.height(data);
break;
}
}, false);
</script>
・・・
・・・
<body>
<iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no"></iframe>
</body>
test-foo.html(자식)<script type="text/javascript">
window.onload = function() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
</script>
tips
#parentfram iframe에 id를 지정합니다. js의 장소에도 잊지 마세요.
frameborder="no" 는 프레임 테두리 표시를 숨기도록 지정합니다.scrolling="no" 는 스크롤 하지 않는다고 하는 지정입니다
하지만 어느쪽도 HTML5에서는 폐지되고 있으므로 css로 지정해도 좋을까 생각합니다.
↑의 폐지된 지정에서도 효과가 있습니다.
예상 결과
부모의 iframe에 style="height: 150px;"라든지, 높이가 자동으로 습득되면 완성입니다.
index.html(부모)<iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no" style="height: 150px;"></iframe>
tips
그건 그렇고, height: 150px는 iframe의 기본 높이입니다.
아마도 최소 높이라고 생각합니다.
참고 사이트
iframe에 다른 도메인 (크로스 도메인)의 콘텐츠를로드하여 높이를 자동으로 조정하는 방법
HTML5 태그 레퍼런스 HTML4.01에서 HTML5로의 버전 업에 의한 변경점
iframe을 사용하여 다른 페이지를 볼 때의 기본 너비와 높이에 대해
이 참고 사이트 덕분에 정말 도움이되었습니다. 감사합니다 
이번에는 사용하지 않지만 크로스 도메인이 아니면 여기도 도움이 될 수 있습니다.
iframe 높이가 동적으로 변경되어도 상위 화면에서 스크롤 막대를 표시하지 않는 방법
Reference
이 문제에 관하여(iframe 고도 자동 조정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kiku-nao/items/a503432a52e7b4980fcf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
index.html(부모)
<script>
window.addEventListener('message', function(e) {
var iframe = $("#parentframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
iframe.height(data);
break;
}
}, false);
</script>
・・・
・・・
<body>
<iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no"></iframe>
</body>
test-foo.html(자식)
<script type="text/javascript">
window.onload = function() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
</script>
tips
#parentfram iframe에 id를 지정합니다. js의 장소에도 잊지 마세요.frameborder="no" 는 프레임 테두리 표시를 숨기도록 지정합니다.scrolling="no" 는 스크롤 하지 않는다고 하는 지정입니다하지만 어느쪽도 HTML5에서는 폐지되고 있으므로 css로 지정해도 좋을까 생각합니다.
↑의 폐지된 지정에서도 효과가 있습니다.
예상 결과
부모의 iframe에
style="height: 150px;"라든지, 높이가 자동으로 습득되면 완성입니다.index.html(부모)
<iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no" style="height: 150px;"></iframe>
tips
그건 그렇고,
height: 150px는 iframe의 기본 높이입니다.아마도 최소 높이라고 생각합니다.
참고 사이트
iframe에 다른 도메인 (크로스 도메인)의 콘텐츠를로드하여 높이를 자동으로 조정하는 방법
HTML5 태그 레퍼런스 HTML4.01에서 HTML5로의 버전 업에 의한 변경점
iframe을 사용하여 다른 페이지를 볼 때의 기본 너비와 높이에 대해
이 참고 사이트 덕분에 정말 도움이되었습니다. 감사합니다
이번에는 사용하지 않지만 크로스 도메인이 아니면 여기도 도움이 될 수 있습니다.
iframe 높이가 동적으로 변경되어도 상위 화면에서 스크롤 막대를 표시하지 않는 방법
Reference
이 문제에 관하여(iframe 고도 자동 조정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kiku-nao/items/a503432a52e7b4980fcf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
