使用postMessage讓 iframe自適應高度的方法示例

  發布時間:2019-10-08 15:55:20   作者:一不小心就😍 😞   我要評論
這篇文章主要介紹了使用postMessage讓 iframe自適應高度的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

前言

有時候,我們會使用 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中彈層不能覆蓋到外部的問題。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • web響應式布局中iframe自適應的方法

    響應式的概念應該是覆蓋了自適應,但是包括的東西更多了。響應式布局可以根據屏幕的大小自動的調整頁面的展現方式,以及布局。這篇問題給大家介紹了在web響應式布局中讓ifr
    2016-10-20
  • iframe 多層嵌套 無限嵌套 高度自適應的解決方案

    有A,B,C三個頁面,A頁面包含B頁面,B頁面包含C頁面.A頁面隨著B頁面自適應,C頁面隨著B頁面自適應,具體實現如下,感興趣的朋友可以參考下
    2013-09-23
  • 網頁設計技巧:iframe自適應高度的問題

    所謂iframe自適應高度,就是,基于界面美觀和交互的考慮,隱藏了iframe的border和scrollbar,讓人看不出它是個iframe
    2012-11-12
  • iframe標簽用法詳解(屬性、透明、自適應高度)

    iframe一般用來包含別的頁面,例如我們可以在我們自己的網站頁面加載別人網站的內容,為了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe屬性,這里簡
    2014-10-01
  • 三談Iframe自適應高度代碼

    在構建B/S系統界面的時候,經常會遇到主頁面index.html中嵌套其他頁面的情況 ,雖然已經有的庫已經提供了控件(例如jQuery easy UI),但是有時候iframe的使用是不可避免的
    2010-08-06
  • Iframe 高度自適應(兼容IE/Firefox、同域/跨域)

    在實際的項目進行中,很多地方可能由于歷史原因不得不去使用iframe,包括目前正火熱的應用開發也是如此。
    2010-03-17
  • iframe 自適應大小實現代碼

    js對跨域iframe訪問問題,因為要控制a.html中iframe的高度和寬度就必須首先讀取得到b.html的大小,A、B不屬于同一個域,瀏覽器為了安全性考慮,使js跨域訪問受限,讀取不到b.ht
    2009-08-08

最新評論

码报108