iframe自适应高度(有用哦)
来源:互联网 发布:张靓颖乳钉 知乎 编辑:程序博客网 时间:2024/06/14 13:10
今天在编写html页面的时候,遇到在ie浏览器下iframe无法自适应高度,但是chrome怎么弄都行,为了解决ie这个不能自适应的问题,我费了好大的劲儿,又是百度又是谷歌的,折腾了我好一阵子,也尝试了好多方法,但还是不行。最后经过不懈的斗争,对网友的代码改改,嘿,还真行了。特此记录一下,免得以后又遇到这样蛋疼的问题。
在修改页面过程中,我发觉和html文档定义标准也有出入。
第一种方法,如果文档头定义为:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html></html>这个ie就能自适应了,但是我在项目中用到了dialog插件,又不兼容这个插件,无奈,放弃了。
第二种方法,文档头定义为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"></html>
javascript代码如下:
<script type="text/javascript"><!--var winWidth = 0;var winHeight = 0;function findDimensions() // 函数:获取尺寸{// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;// 获取窗口高度if (window.innerHeight)winHeight = window.innerHeight;else if ((document.body) && (document.body.clientHeight))winHeight = document.body.clientHeight;// 通过深入 Document 内部对 body 进行检测,获取窗口大小if (document.documentElement && document.documentElement.clientHeight&& document.documentElement.clientWidth) {winHeight = document.documentElement.clientHeight;winWidth = document.documentElement.clientWidth;}// 结果输出至两个文本框document.getElementById("topFrame").height = winHeight - 2;//减2是避免初始化页面时出现滚动条//document.getElementById("topFrame").width= winWidth;//这句可要可不要,宽度它会自适应的}// 调用函数,获取数值window.onresize = findDimensions;//--></script>
html代码如下:
<body style="margin: 0px;"><div style="width: 100%; height: 100%;"><iframe id="topFrame" name="topFrame" src="frame.do"style="margin: 0px;" frameborder="0" width="100%" height="100%" onload="findDimensions();")></iframe></div></body>
第三种方法(此方法适应于div的自适应高度,经测试,也可以用来iframe自适应):
定义样式
<style type="text/css">html,body{height:100%;}#topFrame{height:auto!important; /*for ie6 bug and ie7+,moz,webkit 正确*/height:100%; /*修复IE6,all browser*/min-height:99%; /*for ie6 bug and ie7+,moz,webkit 正确*/background-color: green;}</style>
html代码:
<body style="margin: 0px;"><div style="width: 100%; height: 100%;"><iframe id="topFrame" name="topFrame" src="frame.do"style="margin: 0px;" frameborder="0" width="100%" height="100%"></iframe></div></body>
Ok,解决了。希望能帮助遇到此类问题的朋友。
作者:Tandaly
出处:http://blog.csdn.net/tandaly/article/details/9250345
- iframe自适应高度(有用哦)
- Iframe高度自适应
- iframe 的自适应高度
- 是Iframe高度自适应
- iframe 的自适应高度
- iframe自适应高度
- Iframe自适应高度
- 让IFRAME自适应高度
- Iframe 自适应高度宽度
- iframe自适应高度
- iframe自适应高度
- Iframe自适应高度[摘]
- 让Iframe自适应高度
- IFRAME自适应高度
- iframe自适应高度[转]
- iframe自动自适应高度
- iframe 自适应高度
- Iframe自适应高度
- iPhone 上Sqlite 3 的使用方法
- javascript 将长串数字每三个数字间加一个逗号
- 不同类型的变量与零值比较的写法
- Nginx学习之七-模块ngx_epoll_module详解(epoll机制在nginx中的实现)
- AFNetworking 如何POST一个JSON数据到服务器
- iframe自适应高度(有用哦)
- Git版本管理工具(一)
- android连接webservice(通用,可使用复杂返回值)
- PIC 、APIC(IOAPIC LAPIC)
- GraphChi之pagerank分析新浪微博用户
- PICC使用__EEPROM_DATA()宏指令初始化PIC的EEPROM存储区
- 华三(杭州) ------笔试题
- ABAP与设计模式之装饰者模式
- 从一个字符串中提取中文字符