使用postMessage讓 iframe自適應高度

時間 2019-11-16

標籤使用 postmessage iframe 自適應高度欄目 HTML 简体版

原文原文鏈接

前言

有時候，咱們會使用 iframe標籤，將前端分離項目無感的嵌入如以Freemark爲主體較老的項目中。javascript

咱們知道，當iframe內部內容比父頁面所指定的寬高大的時候，會出現滾動框。css

因此，讓iframe的寬高能根據自身內容自動改變，就成了一個必需要解決的問題。html

使用HTML5中新定義的window.postMessage 能夠實現跨window通訊。前端

demo效果

演示地址: www.mixvjiezi.xyz/demo/iframe
java

咱們要的效果如上圖所示。jquery

黃色區域是經過 iframe標籤引入的body.html部分。bash

index.html ：dom

<!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>
  複製代碼

正題

咱們知道，把大象裝進去須要四步。post

使用postMessage API發送消息比裝大象要少一步，只須要三步就行。

分別是：

一、找到發送對象

二、發送消息

三、設置消息處理

接下來，咱們用上面的例子，一一來講。

一、找到發送目標對象

使用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對象

二、在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提供的值，那麼消息就不會被髮送；只有三者徹底匹配，消息纔會被髮送。

三、設置消息處理

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的兩個窗口之間創建雙向通訊。