经典的iframe自适应高度方法总结_一聚教程网
经典的iframe自适应高度方法总结
时间:2016-05-24
编辑:简简单单
来源:一聚教程网
iframe 高度自适应
iframe高度自适应是一个很老的话题。html5虽然已经将frame 框架给废弃,但是iframe这个标签还是存在的。假如有同学不了解frame和iframe的区别,可以看我之前的文章:html框架之iframe和frame及frameset的相关属性介绍。
虽然现在iframe在项目中已经很少出现了,但是有些项目迫不得已,还是会用到iframe。近期遇到一个案例,就用到了iframe。
基本案例如下: 由于手机浏览器预览PDF不是很好,因此,将手机上预览PDF改成预览html。由于PDF是html生成的。一个10页的PDF,要用10个html来展现,为了达到类似一个PDF的效果。迫不得已在页面中使用了多个iframe来预览这些html页面。
问题:需要这些iframe高度自适应,看起来像是在看一张PDF。因此,又重提iframe自适应高度 这个话题。
思路
一、在预览PDF(其实是预览html),的表层,添加一个覆盖层。提示PDF正在加载中....
二、获取每个Iframe页面高度,并将高度赋值给Iframe。
三、当window.onload时间结束之后,我们将“提示PDF正在加载中....”的动画隐藏。【 关于load事件不清楚的同学可以看 】
四、此时Iframe的高度已经自适应,看起来就像是预览一个PDF了。
高度自适应代码代码如下:
关于test 2.html就是你要预览的pdf页面,可以很长!
注意事项:
1、上述代码必须在localhost等服务器环境下面预览
2、test 2.html也就是iframe的src必须是同域下面
代码解释
document.getElementById("iframe3").contentWindow 可以获取iframe的window对象。
谷歌浏览器可以通过
document.frames[id].document 获取document对象
Firefox 支持, ie8 以上的ie可以通过
document.getElementById(id).contentDocument 来获取document对象。
关于document.body.scrollHeight和某个div的scrollHeight以及各种宽高的详细介绍,可以看我js/jquery各种宽高的理解和应用 ,这是去年我在慕课网录制的视频,不过至今还在排期上线中....(慕课网上线太慢)。
其他解释
其实操作iframe的方法还有很多!例如jquery有个contents()方法,可以查找iframe中的某个id或者某段内容。
例如:
$("#iframe2").contents().find("someID").html() 或者 $("#mainiframe").contains().find("someID").text()
iframe2中包含某个ID。
也可以js和jquery混着用!例如:
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
设置iframe1中所有radio选中。
补充一些例子
iframe内容未知,高度可预测
这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript 改变高度。常用的兼容代码有:
// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染html代码,建议使用上面的代码。
多个iframe的情况下
针对知道的iframe的ID调用
function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}
内容宽度变化的iframe高度自适应
打开调试运行窗口可以看到运行。
跨域下的iframe自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。
a.html中包含iframe:
在c.html中加入如下代码:
最后,agent.html中放入一段js:
agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)
小结
关于iframe就总结这些,上面是是这次项目中用到iframe,突然想到的,有些不周全的地方,还请大家多多指点!