postMessage跨域、跨iframe窗口消息傳遞

      作者:CSDN博主「zy1281539626」
      分類: 觀點/經驗
      2021-03-19
      199

      網站:www.lanlanwork.com 昌平區天通苑中苑61號樓4單元1502室 全國統一客服熱線:400-608-6026 公司郵箱:weibaobei@

      work_icon7.jpg

       

      文章目錄
      1. 作用
      2. 語法
      3. 使用
      4. 兼容性
      5. 應用場景
      說起postMessage 可能平時大家也不遇到,但是如果遇到問題了,又想不起它,這里記錄下防止后面忘記它。


      1. 作用
      window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如,在一個頁面和它生成的彈出窗口之間,或者是頁面和嵌入其中的iframe之間。

      通常情況下,受瀏覽器“同源策略”的限制跨域問題一直是個問題,window.postMessage()提供了一個受控的機制來安全地規避這個限制(如果使用得當的話)。

      2. 語法
      一般來說,一個窗口可以獲得對另一個窗口的引用(例如,通過targetWindow=window.opener),然后使用targetWindow.postMessage()在其上派發MessageEvent。接收窗口隨后可根據需要自行處理此事件,傳遞給window.postMessage()的參數通過事件對象暴露給接收窗口。

      基本語法:

      targetWindow.postMessage(message, targetOrigin, [transfer]);
      1
      targetWindow
      targetWindow就是接收消息的窗口的引用。 獲得該引用的方法包括:

      Window.open
      Window.opener
      HTMLIFrameElement.contentWindow
      Window.parent
      Window.frames +索引值
      message
      要發送到目標窗口的消息。 數據使用結構化克隆算法進行序列化。 這意味著我們可以將各種各樣的數據對象安全地傳遞到目標窗口,而無需自己對其進行序列化。

      targetOrigin
      定目標窗口的來源,必須與消息發送目標相一致,可以是字符串或URI。 表示任何目標窗口都可接收,為安全起見,請一定要明確提定接收方的URI。如果為"*"則都可以接收。

      transfer
      可選屬性。是一串和message同時傳遞的Transferable對象,這些對象的所有權將被轉移給消息的接收方,而發送一方將不再保有所有權。

      3. 使用
      postMessage程序

      var receiver = document.getElementById('receiver').contentWindow;
      var btn = document.getElementById('send');
      btn.addEventListener('click', function (e) {
          e.preventDefault();
          var val = document.getElementById('text').value;
          receiver.postMessage("Hello "+val+"!", "http://www.xxx.com");
      }); 

      接收端

      window.addEventListener("message", receiveMessage, false);
      function receiveMessage(event){
        if (event.origin !== "http://www.xxx.com")
          return;
      }

      event對象有三個屬性,分別是origin,data和source。event.data表示接收到的消息;event.origin表示postMessage的發送來源,包括協議,域名和端口;event.source表示發送消息的窗口對象的引用; 我們可以用這個引用來建立兩個不同來源的窗口之間的雙向通信。

      4. 兼容性

      總體兼容性還是很好的!


      5. 應用場景
      跨域通信(包括GET請求和POST請求)
      WebWorker
      vue項目中使用到了iframe并且需要傳遞參數

      ————————————————
      版權聲明:本文為CSDN博主「zy1281539626」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。

      原文鏈接:https://blog.csdn.net/zy1281539626/article/details/114934551



      藍藍設計www.lanlanwork.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服


      標簽: html js 前端知識總結


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 无码国产精品一区二区免费虚拟VR | av无码一区二区三区| 免费无码VA一区二区三区| 国产免费一区二区三区在线观看| 日本一区二区三区精品中文字幕| 中文字幕一区一区三区| 亚洲av成人一区二区三区观看在线| 女同一区二区在线观看| 国产91一区二区在线播放不卡| 亚洲一区免费在线观看| 日韩人妻一区二区三区蜜桃视频| 久久一区二区三区免费| 交换国产精品视频一区| 制服丝袜一区在线| 老熟女高潮一区二区三区| 性色AV一区二区三区| 国产萌白酱在线一区二区| 亚洲国产精品乱码一区二区| 成人国内精品久久久久一区| 国产91一区二区在线播放不卡| 一区二区三区四区视频在线| 99久久人妻精品免费一区| 无码国产精品一区二区免费vr| 免费看无码自慰一区二区 | 国产成人无码精品一区不卡| 亚洲日本va一区二区三区 | 又硬又粗又大一区二区三区视频| asmr国产一区在线| 精品少妇一区二区三区在线 | 日韩精品无码一区二区三区免费| 无码精品黑人一区二区三区| 日韩免费无码视频一区二区三区| 蜜臀AV免费一区二区三区| 国产精品一区视频| 亚洲熟女www一区二区三区| 精品乱码一区内射人妻无码| 亚洲福利一区二区精品秒拍| 亚洲熟女综合一区二区三区| 精品综合一区二区三区| 亚洲一区二区三区在线网站| 中文字幕一区二区三区日韩精品 |