JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法
by:授客 qq：1033553122
- 1. 测试环境
jquery-3.2.1.min.js
下载地址：
bootstrap-3.3.7-dist
下载地址：
win7
- 2. 需求场景1
实现需求：如下图，点击左侧的导航，打开对应tab页面，其中tab页面的内容为 iframe，这里希望iframe的高度和宽度，根据浏览器窗口大小变化而变化，同时页面内容过多，或者过宽时，出现iframe滚动条，其所在父页面不出现滚动条。
- 3. html代码片段
iframe页面所在父页面代码片段
<!doctype html>
略...
<body style="overflow: hidden;">
略...
说明：
这里设置style="overflow: hidden;" 作用在于隐藏父页面的滚动条;
添加<!doctype html>文档类型声明，避免相关高度属性可能取不到值的情况
iframe代码片段1
<div id="tabcontent" class="tab-content">
<!--通过js获取 tab对应的页面内容-->
<div id="tab-content-80" role="tabpanel" class="tab-pane">
<iframe name="tabiframe" id="ifm80" src="/platform/page/resourcesetting.html" width="100%" frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
scrolling="yes"
allowtransparency="yes"
onload="changeframeheight()">
</iframe>
</div>
<div id="tab-content-117" role="tabpanel" class="tab-pane active">
<iframe name="tabiframe" id="ifm117" src="/platform/page/rolesetting.html" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeframeheight()">
</iframe>
</div>
</div>
说明：
scrolling="auto" 设置用于自动判断是否出现滚动条。
width="100%" 设置用于控制iframe页面宽度根据浏览器宽度变化而变化
iframe代码片段2
基本同“iframe代码片段1”，只是给changeframeheight函数增加iframeid参数
<iframe name="tabiframe" id="ifm117" src="/platform/page/rolesetting.html" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeframeheight('ifm117')">
</iframe>
js代码片段1(批量更改所有tab页的iframe高度)
/**
* 设置tab标签对应的iframe页面高度
*/
function changeframeheight(){
var iframes = document.getelementsbyname('tabiframe');
var contentcontainer = $('#' + tabcontentid); // 获取tab标签对应的页面div容器对象 // 可能会出现获取不到的情况
if (contentcontainer.offset()) {
offsettop = contentcontainer.offset().top; //容器距离document顶部的距离
}
$.each(iframes, function(index, iframe){
var h = window.innerheight || document.documentelement.clientheight || document.body.clientheight;
iframe.height = h - offsettop; // 这里 offsettop可以替换成一个比较合理的常量值
});
}
说明：
window.innerheight 获取浏览器窗口的高度-去掉浏览器地址栏，书签栏的可视区域的高度，包括横向滚动条的高度。
document.documentelement.clientheight - 获取文档html根节点的高度，不包括横向滚动条的高度，其值等于window.innerheight - 横向滚动条高度(如果有的话)，否则等于window.innerheight
document.body.clientheight 获取body节点的的高度，不包括横向滚动条的高度。实践中发现document.body.clientheight略大于document.documentelement.clientheight和window.innerheight 5px。
/**
* 浏览器窗口大小发生变化时，自动调整iframe页面高度
* 浏览器等因素导致改变浏览器窗口大小时，会发生多次resize事件，导致频繁调用changeframeheight()
*/
$(function(){
var resizetimer = null;
window.onresize=function(){
if (resizetimer) {
cleartimeout(resizetimer); // 取消上次的延迟事件
}
resizetimer = settimeout('changeframeheight()', 500); // //延迟500毫秒执行 changeframeheight方法
}
});
说明：
window.onresize=“resize事件发生时执行的 javascript”，以上代码也可以使用jquery的$(window).resize(function)等效实现。
当调整浏览器窗口的大小时，发生 resize 事件。 $(window).resize(function)指定了当发生 resize 事件时运行的函数function
$(window).resize(function(){
var resizetimer = null;
if (resizetimer) {
cleartimeout(resizetimer); // 取消上次的延迟事件
}
resizetimer = settimeout('changeframeheight()', 500); // //延迟500毫秒执行 changeframeheight方法
});
js片段代码2(只更新当前tab页的iframe高度）
/**
* 设置tab标签对应的iframe页面高度
*/
function changeframeheight(ifmid){
var contentcontainer = $('#' + tabcontentid); // 获取tab标签对应的页面div容器对象 // 可能会出现获取不到的情况
var offsettop = 0;
if (contentcontainer.offset()) {
offsettop = contentcontainer.offset().top; //容器距离document顶部的距离
}
var ifm = document.getelementbyid(ifmid);
var h = window.innerheight || document.documentelement.clientheight || document.body.clientheight;
ifm.height = h - offsettop; // 这里 offsettop可以替换成一个比较合理的常量值
}
$(function(){
window.onresize=function(){
var resizetimer = null;
if (resizetimer) {
cleartimeout(resizetimer); // 取消上次的延迟事件
}
var li_active = $("#"+ tabfatherelementid + " > li.active");
if (li_active.text().length) {
var iframeid = 'ifm' + li_active.attr('id').replace('tab-li-', '');
resizetimer = settimeout('changeframeheight("'+iframeid+'")', 500); // //延迟500毫秒执行 changeframeheight方法
}
}
});
- 4. 参考链接