方式一:在被嵌入页里写入代码
假设main.htm文件内容:
<iframe src="iframe.htm"></iframe>
则在iframe.htm文件中加入如下代码:
<script language="JavaScript">
<!--
function window.onload() {
if(top.location != self.location){
var a = window.parent.document.getElementsByTagName('iframe');
for (var i=0; i<a.length; i++){
if (a[i].name == self.name) {
a[i].height = document.body.scrollHeight+10; return;
}
}
}
}
// -->
</script>
要测试效果则在iframe.htm文件中再加入一个表格(表格高度设大些):
<table width="100%" height="1000"><tr><td valign="bottom">Hello!</td></tr></table>
用浏览器打开mail.htm就可以预览效果。
方式二:在父页中加入代码,被嵌入页不变(有两种方法)
一法:
在父页中加入如下代码:
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
<iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}" marginwidth=0 marginheight=0 frameborder=0 scrolling=nosrc="myiframe.htm" width=200 height=100></iframe>
然后myiframe.htm中为正常页面内容。
用浏览器打开父页即可看到效果,该方法对各种浏览器通用,包括IE、FF、Opera等。
二法:
在父页中写入以下代码:
<iframe id=headlogin marginWidth=0 marginHeight=0 src="myiframe.htm" frameBorder=0 width=100% scrolling=no height=25onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
用浏览器打开父页即可看到效果。以上JScript代码在opera下不能正常显示出效果。
分享到:
相关推荐
iframe设置高度随子页高度的变化而变化 0分资源共享
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
js脚本: 自动调节iframe高度,而不显示其滚动条
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
iFrame 自动调整高度 绝对有效! 分可能是高咯滴滴儿....不过一分钱一分货哈,没效果你骂我、使劲骂!
iframe自动适应高度
iframe自动改变高度 朝好用的一个框架 我就在用
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作
iframe包含的页面的高度,兼容性好,iframe高度自适应
iframe 自动调节高度 ,而且不需要滚动条的功能总结 <!--自动调节高度 ,而且不需要滚动条的功能--> <!-- 以下处理自动调节后页面 从新布局后 内容被覆盖的问题 --> 个人总结
纯JS实现的iframe自适应高度。兼容主流浏览器。
iframe自动适应高度,很难得的资源,很多下载的都是部分浏览器可以用,这个可以兼容360.ie6789等,遨游,火狐。搜狗等浏览器。。亲自测试。
javascript动态调整iframe高度
iframe高度自适应。点击链接载入网页,脚本检测iframe页面高度并动态增加父页面高度
iframe高度自适应.pdf
在用js动态创建时,iframe 很难自动适应高度宽度,写100%也没有,推出此方法可以解决这方面难题
iframe自适应高度和宽度
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js