让iframe自适应大小 解决方案.doc
文本预览下载声明
让iframe自适应大小 解决方案
第一种:
iframe name=src width=100% frameborder=0 scrolling=no src=admin.htm?catId=c:out value=${model.l} /??????? onload=this.height =?? document.frames[src].document.body.scrollHeight /
例子:
1,创建页面 test.html 。 页面中含有一个 iframe,name为 ifrname ,id为 ifrid, src 为 iframe.html页面。iframe src=ifarme.html name=ifrname height= style= onload= id=ifrid?? scrolling= /iframe
2,创建 iframe.html 页面,里面含有一些内容。p这是iframe页面,通过在父窗口页面或子页面添加JS来自动更改宽高,以适应内容的多少。/p
要想使iframe自动适应宽和高,可以在 test.html 页面iframe onload处增加一些JS代码。如:?? iframe src=ifarme.html name=ifrname height= style= onload=this.height =?? document.frames[ifrname].document.body.scrollHeight id=ifrid?? scrolling=/iframe
这样iframe即可以自动适应高度了。如果不在onload处增加js,那也可以放到页面上来调用。比如写个函数。
scriptfunction setAutoHeight(iframeElement,?? iframeWindow) {
iframeElement.style.height = iframeWindow.document.body.scrollHeight;iframeElement.style.width?? =?? iframeWindow.document.body.scrollWidth?? ;
// 或者// iframeElement.height = iframeWindow.document.body.offsetHeight ;// iframeElement.width?? =?? iframeWindow.document.body.offsetWidth;}//调用函数setAutoHeight();setAutoHeight( document.getElementById(iframeid), window.frames[0]?? );/script
这样也可以达到自适应高宽的目的,在这里要注意的是,iframeElement参数必须是 document.getElementById(iframeid), iframeWindow参数是 window.frames[0] 或document.frames[ifrname]。这是因为通过name得到的对象是窗口(window)对象,非窗口里的iframe对象。同时document.getElementById(iframeid)不能像window对象可以得到window.document。
所以这里最好给iframe分别加上name和id,id用来更改宽高样式属性,name用来执行window相关事件如location.href,document.write。bgColor例外,元素对象和窗口对象都可以得到,这是因为他们都有这个属性。
如果要隐藏iframe滚动条,可以设置iframeWindow.scrolling = no;但这不能兼容多个浏览器,用iframeElement.document.body.style.overflow = hidden;这种或直接在iframe处增加scrolling=no html代码就可以很好地兼容了。
3,如果不能修改父页面,而只能把代码增加在iframe页面里呢?可以写个类似函数,放在iframe页面里:
scriptfunction setAutoHeight( parentIframeElement, slefDocument ){
slefDocument.style.overflow = hidden;?????????? // 隐藏全部滚动条// document.body.style.overflowY = hidden;?? // 没有竖滚动条
parentIframeElement.style.height = slefDocu
显示全部