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;

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

}

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

推荐内容