跨域实现IFRAME自适应高度

最新推荐文章于 2023-09-13 18:53:33 发布

转载最新推荐文章于 2023-09-13 18:53:33 发布 · 77 阅读

本文详细介绍了如何使用HTML脚本来创建一个自适应的iframe，并通过JavaScript动态调整其高度，确保页面布局的灵活性和响应式设计。

<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>