濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > 使用postMessage讓 iframe自適應(yīng)高度的方法示例

使用postMessage讓 iframe自適應(yīng)高度的方法示例

熱門標(biāo)簽:智能電銷機(jī)器人被禁用了么 電話機(jī)器人技術(shù) 惡搞電話機(jī)器人 ok電銷機(jī)器人 黃石ai電銷機(jī)器人呼叫中心 如何查看地圖標(biāo)注 欣鼎電銷機(jī)器人 效果 地圖標(biāo)注軟件打印出來 高德地圖標(biāo)注商戶怎么標(biāo)

前言

有時(shí)候,我們會(huì)使用 iframe標(biāo)簽,將前端分離項(xiàng)目無感的嵌入 如以Freemark為主體較老的項(xiàng)目中。

我們知道,當(dāng)iframe內(nèi)部?jī)?nèi)容比父頁(yè)面所指定的寬高大的時(shí)候,會(huì)出現(xiàn)滾動(dòng)框。

所以,讓iframe的寬高能根據(jù)自身內(nèi)容自動(dòng)改變,就成了一個(gè)必須要解決的問題。

使用HTML5中新定義的window.postMessage 可以實(shí)現(xiàn)跨window通信。

demo效果

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

我們要的效果如上圖所示。

黃色區(qū)域 是通過 iframe標(biāo)簽引入 的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>

正題

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

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

分別是:

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

2、發(fā)送消息

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

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

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

使用window.parent 就可以獲取引入自身文檔的父window對(duì)象。

 var data = {
   el: $('.box'),
   height: $('.box').outerHeight(),
   width: $('.box').outerWidth(),
   parent: window.parent
 }

我在這一步中還初始化了鑒定dom,監(jiān)聽dom的height和width,核心是用window.parent獲取 index.html文件的window對(duì)象 

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返回的窗口對(duì)象、或者是命名過或數(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è)消息對(duì)象,包含如下重要屬性:

data:

從其他 window 中傳遞過來的對(duì)象。

origin:

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

source:

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

小結(jié)

在消息傳輸中,我使用type屬性,在iframe中傳輸不同的message.type和message.data,父window中就可以根據(jù)不同的message.type做出相應(yīng)的處理。

譬如message.type如果等于2,則可以設(shè)置彈出一個(gè)帶彈層的alert,內(nèi)容從message.data獲取

這樣就可以解決,在iframe中彈層不能覆蓋到外部的問題。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:中山 阿壩 綏化 萍鄉(xiāng) 赤峰 聊城 金昌 盤錦

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用postMessage讓 iframe自適應(yīng)高度的方法示例》,本文關(guān)鍵詞  使用,postMessage,讓,iframe,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用postMessage讓 iframe自適應(yīng)高度的方法示例》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于使用postMessage讓 iframe自適應(yīng)高度的方法示例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    常州市| 大方县| 上虞市| 达州市| 蓬溪县| 南阳市| 阳曲县| 财经| 武宣县| 盘锦市| 闽清县| 泾川县| 瑞安市| 兴海县| 长宁区| 玛多县| 阜南县| 湘阴县| 清原| 河北省| 凌海市| 三亚市| 惠州市| 正宁县| 台中市| 两当县| 惠水县| 上饶市| 海安县| 武邑县| 长寿区| 安仁县| 绩溪县| 佛教| 嵊泗县| 富川| 卢氏县| 基隆市| 沙湾县| 九台市| 曲水县|