运维开发网

如何设置iframe高度自适应在跨域情况下的可用方法

运维开发网 https://www.qedev.com 2020-02-17 16:52 出处:网络 作者: 网络整理
iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度,超出的部分无法显示;相反,如果iframe的高度过高,则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe的高度,当不确定子页面内容的高度时,也可以通过脚本来进行动态指定。但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题!

如题所述,本文在介绍可用方法的同时,也向大家询问除下文列出来的方法之外是否还有其它方法可寻?

通过属性或CSS来设置iframe的高度这里就不再具体介绍了。首先来看看如何通过脚本进行设置。

复制代码 代码如下:

function ChangeFrameHeight(id) {

var count = 1;

(function() {

var frm = document.getElementById(id);

var subWeb = document.frames ? document.frames[id].document : frm.contentDocument;

if (subWeb != null) {

var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight);

frm.height = height;

}

if (count < 3) {

count = count + 1;

window.setTimeout(arguments.callee, 2000);

}

})();

}

假设iframe子页面和父页面都在同一域内,通过该脚本可以对给定id的iframe高度进行动态调整。为了防止父页面在子页面之前加载完成,该函数会每隔2秒重新执行一次,一共执行3次。极端情况下子页面的加载速度会慢于父页面,可适当对执行次数和时间做调整。

复制代码 代码如下:

<iframe frameborder="0" width="450" marginheight="0" marginwidth="0" scrolling="no" id="frm1" name="frm1" src="abc.html" onload="ChangeFrameHeight('frm1')"></iframe>

如果遇到子页面跨域的问题,可通过HTML5的postMessage来实现,但前提是子页面需要主动向父页面发送信息。下面是子页面部分:

复制代码 代码如下:

<!DOCTYPE html>

<head>

</head>

<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">

<h3>Got post?</h3>

<p>Lots of stuff here which will be inside the iframe.</p>

</body>

</html>

在父页面中获取到子页面传递过来的信息,然后对iframe的高度进行调整。

复制代码 代码如下:

<script type="text/javascript">

function resizeCrossDomainIframe(id, other_domain) {

var iframe = document.getElementById(id);

window.addEventListener('message', function(event) {

if (event.origin !== other_domain) return; // only accept messages from the specified domain

if (isNaN(event.data)) return; // only accept something which can be parsed as a number

var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar

iframe.height = height + "px";

}, false);

}

</script>

<iframe src='abc.html' id="frm1" onload="resizeCrossDomainIframe('frm1', 'http://example.com');">

</iframe>

有关如何使用HTML5的postMessage()方法可以查看这篇文章http://dev.w3.org/html5/postmsg/#web-messaging

但是在大多数情况下,iframe中所引用的子页面除了和父页面不在同一域之外,我们可能根本无法对子页面进行任何操作,或者说子页面根本没有提供Corss-document messaging功能。在这种情况下,通过postMessage()方法也无法获取到子页面的任何信息。由于无法和子页面进行任何交互,也就没有办法得知子页面的document对象,从未无法根据子页面的实际高度来调整父页面iframe的height属性了。

目前没有其它实际有效的方法来处理上面遇到的问题。默认情况下可以给iframe指定一个比较大的高度,这样假设所引用的子页面内容不会超出范围,除了在页面上会留下部分空白区域外,内容显示基本不会有问题。

那是否还存在其它比较有效的解决方法呢?期待!

0

精彩评论

暂无评论...
验证码 换一张
取 消