HTML
HTML
인라인 프레임은 현재 HTML 문서 내에 다른 문서를 삽입하는 데 사용됩니다.
HTML
인라인 프레임 태그 지정:
<iframe src="//www.w3cschool.cn"></iframe>
HTML
#🎜 🎜#
HTML
iframe의 적응력을 높이는 3가지 방법:
iframe 콘텐츠는 알 수 없으며 예측 가능성이 높습니다. 현재로서는 , 기본 CSS 최소 높이 값을 추가한 다음 JavaScript를 사용하여 동시에 높이를 변경할 수 있습니다. 일반적으로 사용되는 호환성 코드는 1입니다. (동일한 최상위 도메인 이름 아래 서로 다른 하위 도메인 간에 정보가 교환되는 경우 document.domain="caibaojian.com"으로 설정하세요.)// document.domain = "caibaojian.com"; function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; }} }; window.onload = function () { setIframeHeight(document.getElementById('external-frame')); };
위 iframe의 ID를 수정하면 됩니다. 또는 iframe에 직접 코드를 작성할 수도 있습니다. HTML 코드를 오염시키지 않으려면 일반적으로 위의 코드를 사용하는 것이 좋습니다.
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
3. 콘텐츠 너비가 변경되면 iframe 높이가 조정됩니다.
function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) }
4 작업을 보려면 디버깅 실행 창을 엽니다.
<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe> <script type="text/javascript"> function reinitIframe(){ var iframe = document.getElementById("test"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; console.log(height); }catch (ex){} } window.setInterval("reinitIframe()", 200); </script>
팁:
팁:
HTML5는 HTML 4.01 속성에서 일부 새로운 속성을 추가하고 일부를 제거했습니다. HTML과 XHTML의 차이점:
XHTML에서는 이름 속성이 더 이상 사용되지 않으며 제거됩니다. 대신 id 속성을 사용하세요.
【관련 추천】
HTML5의 새로운 구조 요소는 무엇인가요? HTML5의 새로운 구조 요소 사용(권장)HTML5의 기사 태그란 무엇인가요? HTML5에서 기사 요소는 어디에 사용됩니까?
위 내용은 HTML