html5: postMessage解決跨域通信的問題

Freeman 發布于2019-08-02 11:17 / 2763人閱讀

摘要：默認值是，即冒泡傳遞。當值為，就是捕獲傳遞。實現方式主界面跨域數據訪問我是主界面等待接收的傳遞界面點擊改變顏色

效果圖

postmessage解析

HTML5提供了新型機制PostMessage實現安全的跨源通信. 語法
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: 其他窗口的一個引用, 比如IFRAME的contentWindow屬性, 執行,
window.open返回的窗口對象. message: 將要發送到其他窗口的數據. targetOrigin:
通過窗口的origin屬性來指定哪些窗口能接收到消息事件, 其值可以是字符”*”(表示無限制)或者一個URL transfer:
是一串和message同時傳遞的Transferable對象. 這些對象的所有權將被轉移給消息的接收方, 而發送一放將不再保有所有權.

element.addEventListener(event,fn,useCaption ); 三個參數 event 事件比如
click mouseenter mouseleave 回調函數 useCaption
用于描述是冒泡還是捕獲。默認值是false，即冒泡傳遞。當值為true，就是捕獲傳遞。

實現方式

主界面 main.html




  
  
  
  跨域數據訪問
  


  
     我是主界面,等待接收iframe的傳遞
  
  
     iframe

iframe界面




  
  
  
  Document
    

  
        
           點擊改變顏色

GPU云服務器云服務器解決問題的方法云計算解決的問題短視頻問題的解決措施數據分析解決的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52892.html

雜談：前端Web通信

摘要：作為開發同學的小伙伴客戶端的瀏覽器，有點小調皮還做了一個同源策略的限制，當我們的數據請求遇到不同源的情況下跨域，我們就得嘗試其它的通信方法，不能一條道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以來，Ajax的出世，解決了傳統表單提交頁面跳轉，閃爍白屏等問題。使得Web頁面可以實現局部更新，...

Betta 2019-08-23 10:29 評論0 收藏0
利用html5的postmessage解決iframe跨域問題的庫cross-domain.js，使

摘要：簡介一個利用的跨域解決一個系統中，多個跨域通信交互的庫。然而各系統采用了不同的域名，與主框架系統和其它業務系統有跨域問題若將所有域名改為同一域名下可能會產生一些系統間頁面元素和樣式的沖突故采用了標準下的來解決該問題。簡介一個利用html5的跨域api postMessage解決一個系統中，多個iframe跨域通信交互的js庫。 github地址：cross-domain 背景最...

I_Am 2019-08-22 18:25 評論0 收藏0
【跨域】跨域的簡易實現和測試

摘要：前言由于自己平時只做做，并沒有遇到太多跨域問題，今天通過幾個樣例模擬實現了幾種跨域方式。前言由于自己平時只做做demo，并沒有遇到太多跨域問題，今天通過幾個樣例模擬實現了幾種跨域方式。原文地址傳送門本文所有樣例靜態服務器基于nodejs實現，代碼親測可用。測試步驟如下： 1.為了實現跨域訪問的效果，需要下載http-server 作為一個服務器 npm install http...

ninefive 2019-08-22 11:07 評論0 收藏0