iframe根据子页面自动调整大小
- 2020-05-06
简介众所周知,iframe是一个内嵌的浏览器,通常要求iframe完全显示子页面,不带滚动条,根据子页面自动调整高度。
在网页布局中,经常会涉及到类似于下面这种布局,像一些Crm系统,MIS系统。。。。

众所周知,iframe是一个内嵌的浏览器,通常要求iframe完全显示子页面,不带滚动条,根据子页面自动调整高度。 这是个很典型的例子,在项目开发中经常遇到这种样式的布局,我的原则是看再多的书都不如在实战中得来的实际,所以借此机会把一些经常碰到的问题总结一下, 以便以后再开发中可以事半功倍,那么就跟大家分享下“自动调整iframe大小”的JS代码:
以下是HTML页面调用:
本文参考链接:https://www.cnblogs.com/taoxiaoji/archive/2010/12/20/1911272.html
侵删.

众所周知,iframe是一个内嵌的浏览器,通常要求iframe完全显示子页面,不带滚动条,根据子页面自动调整高度。 这是个很典型的例子,在项目开发中经常遇到这种样式的布局,我的原则是看再多的书都不如在实战中得来的实际,所以借此机会把一些经常碰到的问题总结一下, 以便以后再开发中可以事半功倍,那么就跟大家分享下“自动调整iframe大小”的JS代码:
//定义变量,存储iframe的ID列表var iframeids=["pframe"];//判断浏览器是否支持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) //如果用户的浏览器是NetScape dyniframe[i].height=dyniframe[i].contentDocument.body.offsetHeight; else if(dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE 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)elsewindow.onload=dyniframesize |
以下是HTML页面调用:
<iframe id="pframe" name="pframe" scrolling="no" src="notebook/index.asp" frameborder="0" width="660" onload="dyniframesize()"> </iframe> |
侵删.