1.媒介
處理iframe高度自適應題目有兩種要領
1.
pym2.手動設置iframe的高度
本文主假如總結第二種完成體式格局,由於第一種pym.js插件我沒用懂
假如運用iframe時,碰到以下的需求:
- iframe的高度一向即是嵌入頁面內容的高度,而不是屏幕的高度
- 右邊不允許湧現兩個滾動條
- iframe的高度自適應不僅僅是指剛加載進來時,也有能夠嵌入內容的高度會隨點擊變化(如:下拉菜單,左邊導航欄等)
- 頁面能夠同時嵌入多個iframe
2.contentWindow對象
*須要起個效勞,不要直接在當地翻開
這是個只讀屬性,返回指定的iframe的window對象
拿到這個對象,就能夠依據一般網頁的要領拿到嵌入(子)網頁的文檔高度,然後把值附給父頁面的iframe的height。
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
為了監測網頁高度是不是由於點擊了某個下拉按鈕高度變化,我們豎立一個定時器使命,如許一向看管着子網頁的高度。
setInterval(function () {
setIframeHeight($('#iframe')[0])
}, 200)
頁面有能夠同時存在多個iframe
$(".flexiframe").each(function (index) {//iframe公用類名:flexiframe
var that = $(this);
(function () {
setInterval(function () {
setIframeHeight(that[0])
}, 200)
})(that)
});
假如此時,你發明當子頁面高度變高時,高度能夠自適應的變高,但在變低時,會發明父頁面的高度並沒有向我們設想的跟着子頁面下降,致使底部留有大面積空缺的題目,請繼承往下看
3.文檔聲明的重要性
- 將子頁面的文檔聲明改成就好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.demo
父頁面:a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>a</title>
</head>
<body style="background-color:red">
<iframe id="iFrame" class="flexiframe" src="./b.html" style="padding: 0;width:100%;" marginwidth="0" frameborder="no" scrolling="no" height="2000px"></iframe>
<!-- <iframe id="iFrame1" class="flexiframe" src="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
<!-- <iframe id="iFrame2" class="flexiframe" src="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="./flexiframe.js"></script>
</body>
</html>
./flexiframe.js
// 運用前先將子頁面文檔聲明改成
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
$(".flexiframe").each(function (index) {
var that = $(this);
(function () {
setInterval(function () {
setIframeHeight(that[0])
}, 200)
})(that)
});
子頁面b.html,離別解釋兩種聲明體式格局,點擊變大變小按鈕看一下右邊滾動條的變化,(細節能夠F12看一下iframe種的html和body跟div的高度關聯)
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html>
<div id="b_conntent">
<div style="width:100px;background-color:blue">
<div style="height:2000px">
<button id="btn">小</button>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$('#btn').on('click', function () {
if ($(this).text() == '小') {
$(this).text('大').parent().css('height', '200px')
} else {
$(this).text('小').parent().css('height', '2000px')
}
})
</script>
5.總結
1.有時間照樣要了解下html的進化汗青。
2.本文flexiframe.js能夠直接運用,然則只支撐同源下父頁面能夠經由過程contentWindow獵取子頁面的內容高度,跨域的下次再說。
3.迎接指出題目或留言加深本文的深度,比方html5已不須要聲明DTD,然則我處理這個題目不得不改一下DOCTYPE,退步到html4,為何在html5中子頁面html和body的高度不是由內部的內容決議的,而是即是父元素iframe的高度?