跨域实现IFRAME自适应高度

最新推荐文章于 2024-07-26 15:39:22 发布

weixin_34198797

最新推荐文章于 2024-07-26 15:39:22 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/336900

本文介绍了一种通过JavaScript实现IFRAME元素自适应高度的方法。该方法利用iframe的onload事件来动态调整iframe的高度，确保iframe内容完全展示且不出现滚动条。此技巧对于优化页面布局和提高用户体验非常有用。

<html>
<head>
</head>
<body>
<script>
document.domain="sina.com";
function adjustIframe(id)
{
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}


       var ifm=document.createElement("iframe");
      ifm.src="http://test.sina.com/2.htm";
      ifm.width=1000;
       ifm.id="ok1";
       ifm.domain="sina.com";
      document.body.appendChild(ifm);
      adjustIframe("ok1");

</script>

</body>

</html>

本文转自博客园张占岭（仓储大叔）的博客，原文链接：跨域实现IFRAME自适应高度，如需转载请自行联系原博主。