
头一段时间做一个网站项目,页面中有个地方需要嵌套iframe框架,并需要让框架能自动适应页面的内容高度。并在多个浏览器中测试能兼容,所以搜索资料后,现将我总结整理的代码贴到此,希望能帮助到大家
建立个js脚本文件,将如下代码写进去,并保存此脚本文件(为了方便下面说明,此处暂时将此脚本文件名字命名为page.js):function reinitIframe(){ var iframe = document.getElementById("ifmdt"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; }catch (ex){} } window.setInterval("reinitIframe()", 100); //每隔100毫秒,系统自动执行一次这个reinitIframe()函数
新建立个网页,然后在页面头部声明js脚本文件存放位置:例如:
在页面正文部分写上嵌套iframe框架的代码,如下图,注意iframe中的src设置为你想要嵌入到框架中的网页。例如:
保存网页。,然后运行,这样每隔100毫秒,系统会检测一下嵌套到iframe框架中的页面的高度,如果页面高度有变化,那么系统也会马上修改iframe的高度以便来适应框架中页面的高度。
在不支持此js程序效果的浏览器中,其实你可以将iframe框架的滚动条隐藏,就像程序中写的那样,让scrolling="no",这样滚动条就再也不出现了
