使用postMessage讓 iframe自適應高度的方法示例
我要評論前言
有時候，我們會使用 iframe標簽，將前端分離項目無感的嵌入 如以Freemark為主體較老的項目中。
我們知道，當iframe內部內容比父頁面所指定的寬高大的時候，會出現(xiàn)滾動框。
所以，讓iframe的寬高能根據(jù)自身內容自動改變，就成了一個必須要解決的問題。
使用HTML5中新定義的window.postMessage 可以實現(xiàn)跨window通信。
demo效果
演示地址: www.mixvjiezi.xyz/demo/iframe
我們要的效果如上圖所示。
黃色區(qū)域 是通過 iframe標簽引入 的body.html部分。
index.html ：
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
var $ = window.jQuery;
</script>
<style>
.header{
width: 100%;
min-width: 1260px;
height: 70px;
background-color: red;
box-shadow: 0 0 5px black;
border-radius: 10px;
}
.center{
width: 1560px;
height: 1470px;
margin: 20px auto;
}
.iframe{
width: 250px;
height: 250px;
margin: 20px 0 0 40px;
}
.left-nav{
width: 200px;
height: 1470px;
background-color: blue;
float: left;
margin-top: 10px;
box-shadow: 0 0 5px black;
border-radius: 10px;
}
</style>
<head>
<meta charset="utf-8" />
<title>css study</title>
</head>
<body>
<div class="header">
</div>
<div class="center">
<div class="left-nav"></div>
<iframe class="iframe" id="shopIframeId" src="./body.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
</div>
<script type="text/JavaScript">
window.addEventListener('message', e => {
if (e.data.type === 1) {
$('#shopIframeId').width(e.data.data.width + 50)
$('#shopIframeId').height(e.data.data.height + 50)
}
});
</script>
</body>
</html>
body.html:
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
var $ = window.jQuery;
</script>
<style>
.box{
width: 200px;
height: 200px;
box-shadow: 0 0 5px black;
border-radius: 10px;
background-color: yellow;
}
</style>
<head>
<meta charset="utf-8" />
<title>css study</title>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/JavaScript">
var data = {
el: $('.box'),
height: $('.box').outerHeight(),
width: $('.box').outerWidth(),
parent: window.parent
}
$('.box').on('click', function () {
// 更新數(shù)據(jù)
if (data.width < 1250) {
data.width += 50
}
data.height += 50
// 更新視圖
data.el.width(data.width)
data.el.height(data.height)
// 通知父window 自身高度變更
data.parent.postMessage({
type: 1,
data: {
width: data.width,
height: data.height
}
}, '*')
})
</script>
</html>
正題
我們知道，把大象裝進去需要四步。
使用postMessage API發(fā)送消息比裝大象要少一步，只需要三步就行。
分別是：
1、找到發(fā)送對象
2、發(fā)送消息
3、設置消息處理
接下來，我們用上面的例子，一一來說。
1、找到發(fā)送目標對象
使用window.parent 就可以獲取引入自身文檔的父window對象。
var data = {
el: $('.box'),
height: $('.box').outerHeight(),
width: $('.box').outerWidth(),
parent: window.parent
}
我在這一步中還初始化了鑒定dom，監(jiān)聽dom的height和width，核心是用window.parent獲取 index.html文件的window對象
2、在iframe中發(fā)送消息
$('.box').on('click', function () {
// 更新數(shù)據(jù)
if (data.width < 1250) {
data.width += 50
}
data.height += 50
// 更新視圖
data.el.width(data.width)
data.el.height(data.height)
// 通知父window 自身高度變更
data.parent.postMessage({
type: 1,
data: {
width: data.width,
height: data.height
}
}, '*')
})
給目標div掛在一個單機事件，每次點擊時，都會增加50xp的寬高（如果寬度大于等于1250則寬度不增加）。
然后使用el.postMessage(message, targetOrigin)方法發(fā)送消息。
el:
el是其他窗口的一個引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數(shù)值索引的window.frames。
message：
message參數(shù)是要傳輸?shù)臄?shù)據(jù)消息體。
targetOrigin：
targetOrigin參數(shù)通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個URI。在發(fā)送消息的時候，如果目標窗口的協(xié)議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發(fā)送；只有三者完全匹配，消息才會被發(fā)送。
3、設置消息處理
window.addEventListener('message', e => {
if (e.data.type === 1) {
$('#shopIframeId').width(e.data.data.width + 50)
$('#shopIframeId').height(e.data.data.height + 50)
}
});
我再index.html 添加了message監(jiān)聽，如果有消息被發(fā)送過來，則會觸發(fā)處理函數(shù)，更新iframe標簽的寬高。
處理函數(shù)傳入一個參數(shù)e，e是一個消息對象，包含如下重要屬性:
data:
從其他 window 中傳遞過來的對象。
origin：
調用 postMessage 時消息發(fā)送方窗口的origin . 這個字符串由 協(xié)議、“://“、域名、“ : 端口號”拼接而成。例如 “ https://example.org (隱含端口 443 )”、“ http://example.net (隱含端口 80 )”、“ http://example.com:8080 ”。請注意，這個origin不能保證是該窗口的當前或未來origin，因為postMessage被調用后可能被導航到不同的位置。
source：
對發(fā)送消息的窗口對象的引用; 您可以使用此來在具有不同origin的兩個窗口之間建立雙向通信。
小結
在消息傳輸中，我使用type屬性，在iframe中傳輸不同的message.type和message.data，父window中就可以根據(jù)不同的message.type做出相應的處理。
譬如message.type如果等于2，則可以設置彈出一個帶彈層的alert，內容從message.data獲取
這樣就可以解決，在iframe中彈層不能覆蓋到外部的問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
- 響應式的概念應該是覆蓋了自適應，但是包括的東西更多了。響應式布局可以根據(jù)屏幕的大小自動的調整頁面的展現(xiàn)方式，以及布局。這篇問題給大家介紹了在web響應式布局中讓ifr2016-10-20
- 有A,B,C三個頁面,A頁面包含B頁面,B頁面包含C頁面.A頁面隨著B頁面自適應,C頁面隨著B頁面自適應，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-09-23
- 所謂iframe自適應高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個iframe2012-11-12
- iframe一般用來包含別的頁面，例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站的內容，為了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性，這里簡2014-10-01
- 在構建B/S系統(tǒng)界面的時候，經(jīng)常會遇到主頁面index.html中嵌套其他頁面的情況 ，雖然已經(jīng)有的庫已經(jīng)提供了控件(例如jQuery easy UI),但是有時候iframe的使用是不可避免的2010-08-06
Iframe 高度自適應（兼容IE/Firefox、同域/跨域）
在實際的項目進行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應用開發(fā)也是如此。2010-03-17- js對跨域iframe訪問問題,因為要控制a.html中iframe的高度和寬度就必須首先讀取得到b.html的大小,A、B不屬于同一個域,瀏覽器為了安全性考慮，使js跨域訪問受限,讀取不到b.ht2009-08-08