javascript 装载iframe子页面,自适应高度_javascript技巧
程序员文章站
2022-05-07 14:44:46
...
假设主页面有一个div,里面放置一个iframe
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;
}
以下方法只需要把代码放在主页面:
页面代码:
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;
}
复制代码 代码如下:
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;
}
以下方法只需要把代码放在主页面:
页面代码:
复制代码 代码如下:
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;
}
推荐阅读
-
让iframe子窗体取父窗体地址栏参数(querystring)_javascript技巧
-
js将iframe中控件的值传到主页面控件中的实现方法_javascript技巧
-
js实现iframe动态调整高度的代码_javascript技巧
-
让iframe自适应高度(支持XHTML,支持FF)_javascript技巧
-
js将iframe中控件的值传到主页面控件中的实现方法_javascript技巧
-
js控制iframe的高度/宽度让其自适应内容_javascript技巧
-
从父页面读取和操作iframe中内容方法_javascript技巧
-
iframe子页面与父页面在同域或不同域下的js通信_javascript技巧
-
JavaScript编程开发如何使用jquery实现iframe自适应高度
-
javascript原生和jquery库实现iframe自适应高度和宽度