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 = 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