這篇文章將為大家詳細(xì)講解有關(guān)如何在html5中使用postMessage前端跨域并前端監(jiān)聽，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)網(wǎng)站設(shè)計(jì)，為客戶量身定制各類網(wǎng)站建設(shè)業(yè)務(wù)，包括企業(yè)型、電子商務(wù)型、響應(yīng)式網(wǎng)站設(shè)計(jì)、行業(yè)門戶型等各類網(wǎng)站，實(shí)戰(zhàn)經(jīng)驗(yàn)豐富，成功案例眾多。以客戶利益為出發(fā)點(diǎn)，成都創(chuàng)新互聯(lián)網(wǎng)站制作為客戶規(guī)劃、按需定制制作符合企業(yè)需求、帶有營銷價(jià)值的網(wǎng)絡(luò)建站方案認(rèn)真對待每一個(gè)客戶，我們不用口頭的語言來吹擂我們的優(yōu)秀，上1000家的成功案例見證著我們的成長。

第一步、架設(shè)兩個(gè)不同端口的服務(wù)

我們這里用koa2來搭建兩個(gè)服務(wù)到不同的端口，來模擬一下真正的工作中需要出現(xiàn)的跨域情況。

非常的簡單 主要用到 koa-static這個(gè)中間件
搭建起來也是非常容易的，如果大家想學(xué)node相關(guān)的知識 可以加我微信shouzi_1994 或者在博客下面留言你的聯(lián)系方式 這里就不多說廢話了 直接上代碼 視頻內(nèi)會(huì)有詳細(xì)的搭建步驟

// localhost:4000
const Koa = require('koa');
const path = require('path')
const static = require('koa-static')
const app = new Koa();

//設(shè)置靜態(tài)資源的路徑 
const staticPath = './static'

app.use(static(
    path.join( __dirname,  staticPath)
  ))

  
console.log("服務(wù)啟動(dòng)在4000端口")

app.listen(4000);


// localhost:3000
const Koa = require('koa');
const path = require('path')
const static = require('koa-static')
const app = new Koa();

//設(shè)置靜態(tài)資源的路徑 
const staticPath = './static'

app.use(static(
    path.join( __dirname,  staticPath)
  ))


console.log("服務(wù)啟動(dòng)在4000端口")

app.listen(4000);

第二步、跨域通訊postMessage

我們首先來看一下 postMessage的API

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow
其他窗口的一個(gè)引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數(shù)值索引的window.frames。

message
將要發(fā)送到其他 window的數(shù)據(jù)。它將會(huì)被結(jié)構(gòu)化克隆算法序列化。這意味著你可以不受什么限制的將數(shù)據(jù)對象安全的傳送給目標(biāo)窗口而無需自己序列化。[1]

targetOrigin
通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串""（表示無限制）或者一個(gè)URI。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。這個(gè)機(jī)制用來控制消息可以發(fā)送到哪些窗口；例如，當(dāng)用postMessage傳送密碼時(shí)，這個(gè)參數(shù)就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預(yù)期接受者的origin屬性完全一致，來防止密碼被惡意的第三方截獲。如果你明確的知道消息應(yīng)該發(fā)送到哪個(gè)窗口，那么請始終提供一個(gè)有確切值的targetOrigin，而不是。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露到任何對數(shù)據(jù)感興趣的惡意站點(diǎn)。

transfer 可選
是一串和message 同時(shí)傳遞的 Transferable 對象. 這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。

怎么樣是不是很容易理解，這里給大家中文化一下。

要傳輸?shù)哪莻€(gè)（父）子窗口.postMessage(傳輸?shù)膬?nèi)容, 傳輸?shù)侥膫€(gè)地址, [權(quán)限是否轉(zhuǎn)移（一般不用）]);

提前說一下，要想跨域傳輸，必須是父子頁面，也就是說，是通過js Open的頁面，或者ifream嵌套的頁面

好了 我們開始來寫代碼

    
    
    
    


        
    我是端口3000網(wǎng)站的內(nèi)容
    發(fā)消息給兒子
    
    

    
    
    
    


        
    我是端口4000網(wǎng)站的內(nèi)容
    發(fā)消息給爸爸
    
    

寫到這里我們已經(jīng)實(shí)現(xiàn)了父子頁面的跨域通訊，但是這個(gè)通訊只發(fā)生在一個(gè)窗口內(nèi)啊，并沒有達(dá)到我想要的效果，該怎么辦呢。

監(jiān)聽數(shù)值變化，做出及時(shí)反應(yīng)

到這里大家需要思考，什么東西是瀏覽器上的所有同域名網(wǎng)站都能看到的呢？

沒錯(cuò)，storage，我們只需要對這個(gè)進(jìn)行監(jiān)聽就好了。

這里我們選擇監(jiān)聽 loacalStorage 現(xiàn)在我們對子頁面做一下改進(jìn)

    
    
    
    


        
    我是端口4000網(wǎng)站的內(nèi)容
    發(fā)消息給爸爸
    
    

關(guān)于如何在html5中使用postMessage前端跨域并前端監(jiān)聽就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：如何在html5中使用postMessage前端跨域并前端監(jiān)聽-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://weahome.cn/article/dghdss.html