body.html:

 
 
    
    var $ = window.jQuery;
    
   
   
     
     
   
 
   
   
 
 
 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
     }
   }, '*')
 })

 

正題

我們知道，把大象裝進(jìn)去需要四步。

使用postMessage API發(fā)送消息比裝大象要少一步，只需要三步就行。

分別是：

1、找到發(fā)送對象

2、發(fā)送消息

3、設(shè)置消息處理

接下來，我們用上面的例子，一一來說。

1、找到發(fā)送目標(biāo)對象

使用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
     }
   }, '*')
 })

給目標(biāo)div掛在一個(gè)單機(jī)事件，每次點(diǎn)擊時(shí)，都會(huì)增加50xp的寬高（如果寬度大于等于1250則寬度不增加）。

然后使用el.postMessage(message,  targetOrigin)方法發(fā)送消息。

el:

el是其他窗口的一個(gè)引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數(shù)值索引的window.frames。

message：

message參數(shù)是要傳輸?shù)臄?shù)據(jù)消息體。

targetOrigin：

targetOrigin參數(shù)通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個(gè)URI。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。

3、設(shè)置消息處理

 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ā)送過來，則會(huì)觸發(fā)處理函數(shù)，更新iframe標(biāo)簽的寬高。

處理函數(shù)傳入一個(gè)參數(shù)e，e是一個(gè)消息對象，包含如下重要屬性:

data:

從其他 window 中傳遞過來的對象。

origin：

調(diào)用postMessage 時(shí)消息發(fā)送方窗口的origin . 這個(gè)字符串由 協(xié)議、“://“、域名、“ : 端口號(hào)”拼接而成。例如 “https://example.org (隱含端口443 )”、“http://example.net (隱含端口80 )”、“http://example.com:8080 ”。請注意，這個(gè)origin不能保證是該窗口的當(dāng)前或未來origin，因?yàn)閜ostMessage被調(diào)用后可能被導(dǎo)航到不同的位置。

source：

對發(fā)送消息的窗口對象的引用; 您可以使用此來在具有不同origin的兩個(gè)窗口之間建立雙向通信。

關(guān)于使用postMessage怎么實(shí)現(xiàn)iframe自適應(yīng)高度就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。