用JS控制IFrame的高度,让它的高度自动适应
2011-03-17 11:23
513 查看
代码:
谢谢浏览!
<!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"> <head> <title>用JS控制IFrame的高度,让它的高度自动适应</title> <style type="text/css"> .letCenter { margin: 30px auto; width: 800px; height: 50px; } </style> <script language="javascript" type="text/javascript"> //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 //定义iframe的ID var iframeids = ["menuFrame"]; //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 var iframehide = "yes"; function dyniframesize() { var dyniframe = new Array(); for (var i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display = "block"; if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) { //如果用户的浏览器是IE var contentDocHeight = dyniframe[i].contentDocument.body.offsetHeight; dyniframe[i].height = contentDocHeight; } else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) { //其它浏览器 dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj = document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); tempobj.style.display="block"; } } } if (window.addEventListener) { window.addEventListener("load", dyniframesize, false); } else if (window.attachEvent) { window.attachEvent("onload", dyniframesize); } else { window.onload = dyniframesize; } </script> </head> <body> <div class="letCenter"> <h1> 这是主页面</h1> </div> <div style="border:solid 1px red; margin:0px 0px 0px 0px; padding:0px 0px;"> <iframe id="menuFrame" name="menuFrame" frameBorder="0" scrolling="no" src="ControlIFrameHeight_Child.htm" width="100%"></iframe> </div> </body> </html>
谢谢浏览!
相关文章推荐
- 用JS控制Iframe自动适应页面的高度
- JS怎么控制IFRAME高度自动适应内容而不出现滚动条
- table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)
- js控制textarea输入框根据内容自动适应高度
- js 操作 Iframe (跨域,高度自动适应)
- iframe高度自动适应宽高的js (兼容FF)
- table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)
- JS 控制iframe自动高度
- js Iframe 自动适应 高度 宽度
- iframe 框架自动适应高度
- iframe高度自动适应代码且浏览器URL改变
- 控制iframe的高度随内容的多而自动增长
- JS 中根据iframe子页面自动iframe高度
- div 文字自动换行 去掉链接样式虚框 让iframe自动适用高度JS代码
- iframe同域或异域下高度自动适应(兼容种浏览器)
- Iframe自动适应宽度和高度
- javascript自动适应的iframe高度
- iframe高度自动适应
- css 控制左右高度自动适应