网络编程 
首页 > 网络编程 > 浏览文章

javascript 装载iframe子页面,自适应高度

(编辑:jimmy 日期: 2026/5/7 浏览:3 次 )
假设主页面有一个div,里面放置一个iframe
复制代码 代码如下:
<div id="frameBox">
<iframe id="frameWin" src="/UploadFiles/2021-04-02/1.html"></div>

3个菜单链接,分别在iframe加载 1.html、2.html、3.html 三个页面。

3个子页面分别在自己页面加载完window.onload执行
复制代码 代码如下:
function aa(){
var newHeight = document.body.scrollHeight + 20 + "px";
window.parent.document.getElementById("frameBox").style.height = newHeight;
//以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改
window.parent.document.getElementById("frameWin").style.height = newHeight;
}

以下方法只需要把代码放在主页面:
页面代码:
复制代码 代码如下:
<div style="border:1px solid #7e99c6" id="frameBox">
<iframe id="frameWin" src="/UploadFiles/2021-04-02/01.html"></div>

js脚本(加在主页面):
复制代码 代码如下:
function test2(){
var frameWin = document.getElementById("frameWin");
var frameBox = document.getElementById("frameBox");
var newHeight;
if (frameWin.Document){
newHeight = frameWin.Document.body.scrollHeight + 20 + "px";
}else{
newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
}
frameWin.style.height = newHeight;
frameBox.style.height = newHeight;
}
上一篇:javascript 响应键盘特定按键(只响应数字键)
下一篇:JavaScript 脚本将当地时间转换成其它时区
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。