您的位置：

如何让iframe高度自适应？iframe如何设置高度自适应？

来源：安卓之家

时间：2023-02-09 15:41:17

iframe是网页中的一部分，其大小还要受到网页的限制，设置最高可以使用height="100%"。

基本上解决iframe超出的高度都是增加了滚动条来实现的，很简单，如果你iframe中的信息超出了一屏幕，你就必须使用滚动条了。

开始用的时候还不行，后来发现是因为js跨域问题，没有权限。后来设置了window.document.domain 就可以了，用的是jquery代码2方法。

跨域下的iframe自适应高度

跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。

方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。

我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。

1、首先选择到iframe标签

var ym = document.getElementById('content');

给嵌套页面加载事件ifr.onload = function () {

//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩

ym.style.height = '0px';

var hig= ym.contentDocument;

//contentDocument属性以 HTML 对象返回框架容纳的文档

var height = measure(hig)

//使用measure方法获取高度

ym.style.height = height + 'px';

//将高度赋予iframe标签

};

//计算页面的实际高度，iframe自适应会用到

scrollHeight：返回元素的整体高度;clientHeight：返回浏览器窗口高度

function measure(hg) {

var cHeight = Math.max

(doc.body.clientHeight, doc.documentElement.clientHeight);

var sHeight = Math.max

(doc.body.scrollHeight, doc.documentElement.scrollHeight);

var height = Math.max(cHeight, sHeight);

实际上也没用到这三行;

return height = doc.body.scrollHeight;

//返回返回元素的整体高度

}

这样就能够让嵌套页面无障碍显示了。