iframe 宽高度自适应浏览器窗口大小的解决方法
by: 授客 QQ:1033553122
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
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 = Windows.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
- iframe.height = h - offsetTop; // 这里 offsetTop 可以替换成一个比较合理的常量值
- });
- }
说明:
Windows.innerHeight 获取浏览器窗口的高度 - 去掉浏览器地址栏, 书签栏的可视区域的高度, 包括横向滚动条的高度.
document.documentElement.clientHeight - 获取文档 HTML 根节点的高度, 不包括横向滚动条的高度, 其值等于 Windows.innerHeight - 横向滚动条高度 (如果有的话), 否则等于 Windows.innerHeight
document.body.clientHeight 获取 body 节点的的高度, 不包括横向滚动条的高度. 实践中发现 document.body.clientHeight 略大于 document.documentElement.clientHeight 和 Windows.innerHeight 5px.
- /**
- * 浏览器窗口大小发生变化时, 自动调整 iframe 页面高度
- * 浏览器等因素导致改变浏览器窗口大小时, 会发生多次 resize 事件, 导致频繁调用 changeFrameHeight()
- */
- $(function(){
- varresizeTimer = null;
- Windows.onresize=function(){
- if(resizeTimer) {
- clearTimeout(resizeTimer); // 取消上次的延迟事件
- }
- resizeTimer = setTimeout('changeFrameHeight()', 500); // // 延迟 500 毫秒执行 changeFrameHeight 方法
- }
- });
说明:
Windows.onresize="resize 事件发生时执行的 JavaScript", 以上代码也可以使用 jQuery 的 $(Windows).resize(function) 等效实现.
当调整浏览器窗口的大小时, 发生 resize 事件.$(Windows).resize(function) 指定了当发生 resize 事件时运行的函数 function
- $(Windows).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 = Windows.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
- ifm.height = h - offsetTop; // 这里 offsetTop 可以替换成一个比较合理的常量值
- }
- $(function(){
- Windows.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
来源: http://www.bubuko.com/infodetail-3156475.html