javascript动态的改变IFrame的高度实现自动伸展_javascript技巧
程序员文章站
2022-03-26 14:25:16
...
动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩
原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面),添加JavaScript
2、在IFrame的具体页面(就是子页面)的body中,添加onload事件
3、为父页面的IFrame标签添加ID,即上面第一步,方法体中的第2行所写到的childFrame
具体实现二:
//动态改变父类iframe的高度
//iframe页面调用的js
$(function(){
//取到窗口的高度
var winH = $(window).height();
//取到页面的高度
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});
父页面的iframe为
原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面),添加JavaScript
复制代码 代码如下:
2、在IFrame的具体页面(就是子页面)的body中,添加onload事件
复制代码 代码如下:
3、为父页面的IFrame标签添加ID,即上面第一步,方法体中的第2行所写到的childFrame
复制代码 代码如下:
具体实现二:
复制代码 代码如下:
//动态改变父类iframe的高度
//iframe页面调用的js
$(function(){
//取到窗口的高度
var winH = $(window).height();
//取到页面的高度
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});
父页面的iframe为
复制代码 代码如下:
上一篇: js输入框字数实时更新的实例教程
下一篇: python如何遍历list
推荐阅读
-
让你的博文自动带上缩址的实现代码,方便发到微博客上_javascript技巧
-
js实现简单选项卡与自动切换效果的方法_javascript技巧
-
js固定DIV高度,超出部分自动添加滚动条的简单方法_javascript技巧
-
ff chrome和ie下全局动态定位的异同及全局高度的取法_javascript技巧
-
js实现每日自动换一张图片的方法_javascript技巧
-
JS根据浏览器窗口大小实时动态改变网页文字大小的方法_javascript技巧
-
javascript实现的动态文字变换_javascript技巧
-
原生javascript实现自动更新的时间日期_javascript技巧
-
动态的改变IFrame的高度实现IFrame自动伸展适应高度_javascript技巧
-
Js实现双击鼠标自动滚动屏幕的示例代码_javascript技巧