经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
来源:cnblogs  作者:授客  时间:2019/8/15 13:59:43  对本文有异议

iframe宽高度自适应浏览器窗口大小的解决方法

 

by:授客 QQ1033553122

  1. 1.   测试环境

JQuery-3.2.1.min.js

下载地址:

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

 

Bootstrap-3.3.7-dist

下载地址:

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

 

win7

 

  1. 2.   需求场景1

 

实现需求:如下图,点击左侧的导航,打开对应tab页面,其中tab页面的内容为 iframe,这里希望iframe的高度和宽度,根据浏览器窗口大小变化而变化,同时页面内容过多,或者过宽时,出现iframe滚动条,其所在父页面不出现滚动条。

 

 

 

 

 

  

 

 

  1. 3.   HTML代码片段

iframe页面所在父页面代码片段

  1. <!DOCTYPE html>

略...

  1. <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参数

  1.         <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.clientHeightwindow.innerHeight 5px

 

 

/**

 * 浏览器窗口大小发生变化时,自动调整iframe页面高度

* 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight()

*/

$(function(){

    var resizeTimer = null;

    window.onresize=function(){

        if (resizeTimer) {

            clearTimeout(resizeTimer); // 取消上次的延迟事件

        }

        resizeTimer = setTimeout('changeFrameHeight()', 500);  // //延迟500毫秒执行 changeFrameHeight方法

    }

});

  1.  
  1.  

说明:

window.onresize=“resize事件发生时执行的 JavaScript”,以上代码也可以使用JQuery的$(window).resize(function)等效实现。

 

当调整浏览器窗口的大小时,发生 resize 事件。 $(window).resize(function)指定了当发生 resize 事件时运行的函数function

  1.  
  1. $(window).resize(function(){
  1.     var resizeTimer = null;
  1.     if (resizeTimer) {
  1.     clearTimeout(resizeTimer); // 取消上次的延迟事件
  1.     }
  1.     resizeTimer = setTimeout('changeFrameHeight()', 500);  // //延迟500毫秒执行 changeFrameHeight方法
  1. });
  1.  
  1.  
  1.  

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方法

        }

    }

});

 

  1.  
  1. 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

原文链接:http://www.cnblogs.com/shouke/p/11357313.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号