html内嵌iframe网页高度自适应

Posted 2021-04-04 染卷

使用iframe标签将目标网页内嵌在自己网页中，隐藏iframe边框和滚动条。iframe自适应内嵌网页高度。

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<iframe src="https://ranjuan.cn" frameborder="0" scrolling="no" id="external-frame" style="width:100%" onload="setIframeHeight(this)"></iframe>

<script type="text/javascript">

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'));

};

</script>

基于互联网精神，在注明出处的前提下本站文章可自由转载！

本文链接：https://ranjuan.cn/html-iframe-auto/