当前位置:Gxlcms > html代码 > 经典的iframe自适应高度重现江湖_html/css_WEB-ITnose

经典的iframe自适应高度重现江湖_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:46人阅读

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就总结这些,上面是是这次项目中用到iframe,突然想到的,有些不周全的地方,还请大家多多指点!

对了,有人可以利用iframe等进行跨框架攻击!我以前也写了一篇关于 跨框架的文章 http://www.haorooms.com/post/liulanq_think_ie,大家在使用iframe的同时,要注意防止漏洞出现!

原文地址: http://www.haorooms.com/post/ifame_height_zishiying

文章原创,转账请注明出自:haorooms 前端博客 http://www.haorooms.com/

人气教程排行