前言
有時候，我們會使用 iframe標簽，將前端分離項目無感的嵌入 如以Freemark為主體較老的項目中。
我們知道，當iframe內部內容比父頁面所指定的寬高大的時候，會出現滾動框。
所以，讓iframe的寬高能根據自身內容自動改變，就成了一個必須要解決的問題。
使用HTML5中新定義的window.postMessage 可以實現跨window通信。
demo效果
演示地址: www.mixvjiezi.xyz/demo/iframe
我們要的效果如上圖所示。
黃色區域 是通過 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 () { // 更新數據 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發送消息比裝大象要少一步，只需要三步就行。
分別是：
1、找到發送對象
2、發送消息
3、設置消息處理
接下來，我們用上面的例子，一一來說。
1、找到發送目標對象
使用window.parent 就可以獲取引入自身文檔的父window對象。
var data = { el: $('.box'), height: $('.box').outerHeight(), width: $('.box').outerWidth(), parent: window.parent }我在這一步中還初始化了鑒定dom，監聽dom的height和width，核心是用window.parent獲取 index.html文件的window對象
2、在iframe中發送消息
$('.box').on('click', function () { // 更新數據 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)方法發送消息。
el:
el是其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。
message：
message參數是要傳輸的數據消息體。
targetOrigin：
targetOrigin參數通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個URI。在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發送；只有三者完全匹配，消息才會被發送。
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監聽，如果有消息被發送過來，則會觸發處理函數，更新iframe標簽的寬高。
處理函數傳入一個參數e，e是一個消息對象，包含如下重要屬性:
data:
從其他 window 中傳遞過來的對象。
origin：
調用 postMessage 時消息發送方窗口的origin . 這個字符串由 協議、“://“、域名、“ : 端口號”拼接而成。例如 “ https://example.org (隱含端口 443 )”、“ http://example.net (隱含端口 80 )”、“ http://example.com:8080 ”。請注意，這個origin不能保證是該窗口的當前或未來origin，因為postMessage被調用后可能被導航到不同的位置。
source：
對發送消息的窗口對象的引用; 您可以使用此來在具有不同origin的兩個窗口之間建立雙向通信。
小結
在消息傳輸中，我使用type屬性，在iframe中傳輸不同的message.type和message.data，父window中就可以根據不同的message.type做出相應的處理。
譬如message.type如果等于2，則可以設置彈出一個帶彈層的alert，內容從message.data獲取
這樣就可以解決，在iframe中彈層不能覆蓋到外部的問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
