JQuery iframe highly adaptive wide solution browser window size

iframe width height solutions adaptive browser window size

by: award-off QQ : 1033553122

1. Test Environment

JQuery-3.2.1.min.js

download link:

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

Bootstrap-3.3.7-dist

download link:

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip

win7

2. Demand Scene 1

Implementation requirements: as shown below, the left click navigation, tab corresponding to the page is opened, the contents of the page tab iframe, where desired height and width of the iframe, changes in the size of the browser window in accordance with the change while the page content is too large, or too when wide, appear iframe scroll bar, scroll bar does not appear in its parent page.

3. the HTML snippet

The parent page iframe page where the code snippet

<!DOCTYPE html>

slightly...

<body style="overflow: hidden;">

slightly...

Description:

Set here style = "overflow: hidden;" the role that the scroll bar to hide the parent page ;

添加<!DOCTYPE html>文档类型声明，避免相关高度属性可能取不到值的情况

iframe代码片段1

border="0"

marginwidth="0"

marginheight="0"

scrolling="yes"

allowtransparency="yes"

onload="changeFrameHeight()">

</iframe>

</div>

</iframe>

</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. 参考链接

http://www.runoob.com/js/js-window.html

https://www.w3cplus.com/javascript/offset-scroll-client.html

https://www.imooc.com/qadetail/109244?t=103342

http://www.w3school.com.cn/jquery/event_resize.asp

http://www.w3school.com.cn/jsref/event_onresize.asp