亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

postMessage前端跨域并前端監(jiān)聽

ytwman / 2662人閱讀

摘要：有時(shí)候會(huì)遇到傻需求，比如前端單點(diǎn)登陸遇到需求，就要去想解決辦法，這里我給大家做一個(gè)簡(jiǎn)單的前端單點(diǎn)登陸的解決方案，用到的就是跨域信息傳輸以及的監(jiān)聽?？蛇x是一串和同時(shí)傳遞的對(duì)象這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。

有時(shí)候會(huì)遇到傻X需求，比如前端單點(diǎn)登陸！遇到需求，就要去想解決辦法，
這里我給大家做一個(gè)簡(jiǎn)單的前端單點(diǎn)登陸的解決方案，
用到的就是postMessage跨域信息傳輸以及onstorage的監(jiān)聽。
本文用到的知識(shí)點(diǎn) koa架設(shè)靜態(tài)資源服務(wù)、跨域、postMessage的用法
、onstorage監(jiān)聽storage
第一步、架設(shè)兩個(gè)不同端口的服務(wù)

我們這里用koa2來(lái)搭建兩個(gè)服務(wù)到不同的端口，來(lái)模擬一下真正的工作中需要出現(xiàn)的跨域情況。
非常的簡(jiǎn)單 主要用到 koa-static這個(gè)中間件
搭建起來(lái)也是非常容易的，如果大家想學(xué)node相關(guān)的知識(shí) 可以加我微信shouzi_1994 或者在博客下面留言你的聯(lián)系方式 這里就不多說(shuō)廢話了 直接上代碼 視頻內(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

我們首先來(lái)看一下 postMessage的API

otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其他窗口的一個(gè)引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對(duì)象、或者是命名過(guò)或數(shù)值索引的window.frames。
message
將要發(fā)送到其他 window的數(shù)據(jù)。它將會(huì)被結(jié)構(gòu)化克隆算法序列化。這意味著你可以不受什么限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化。[1]
targetOrigin
通過(guò)窗口的origin屬性來(lái)指定哪些窗口能接收到消息事件，其值可以是字符串""（表示無(wú)限制）或者一個(gè)URI。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。這個(gè)機(jī)制用來(lái)控制消息可以發(fā)送到哪些窗口；例如，當(dāng)用postMessage傳送密碼時(shí)，這個(gè)參數(shù)就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預(yù)期接受者的origin屬性完全一致，來(lái)防止密碼被惡意的第三方截獲。如果你明確的知道消息應(yīng)該發(fā)送到哪個(gè)窗口，那么請(qǐng)始終提供一個(gè)有確切值的targetOrigin，而不是。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露到任何對(duì)數(shù)據(jù)感興趣的惡意站點(diǎn)。
transfer 可選
是一串和message 同時(shí)傳遞的 Transferable 對(duì)象. 這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。

怎么樣是不是很容易理解，這里給大家中文化一下。
要傳輸?shù)哪莻€(gè)（父）子窗口.postMessage(傳輸?shù)膬?nèi)容, 傳輸?shù)侥膫€(gè)地址, [權(quán)限是否轉(zhuǎn)移（一般不用）]);

提前說(shuō)一下，要想跨域傳輸，必須是父子頁(yè)面，也就是說(shuō)，是通過(guò)js Open的頁(yè)面，或者ifream嵌套的頁(yè)面
好了 我們開始來(lái)寫代碼




    
    
    
    Document


        
    我是端口3000網(wǎng)站的內(nèi)容
    
    
    








    
    
    
    Document


        
    我是端口4000網(wǎng)站的內(nèi)容

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

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

到這里大家需要思考，什么東西是瀏覽器上的所有同域名網(wǎng)站都能看到的呢？
沒錯(cuò)，storage，我們只需要對(duì)這個(gè)進(jìn)行監(jiān)聽就好了。

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




    
    
    
    Document


        
    我是端口4000網(wǎng)站的內(nèi)容

看，我們是不是到現(xiàn)在就能夠針對(duì)跨域傳輸?shù)膬?nèi)容做出響應(yīng)了呢？

思考

現(xiàn)在我們做到了兩個(gè)頁(yè)面的跨域通訊，那么三個(gè)到多個(gè)的跨域通訊怎么做呢？其實(shí)一個(gè)道理啦?，F(xiàn)在道理說(shuō)給你了，寫法自己去體驗(yàn)一下吧。

寫在最后

大家有什么工作上的坎，想不通的問(wèn)題，學(xué)習(xí)上的難點(diǎn)，都可以給我微信發(fā)信息，或者在博客評(píng)論，我都會(huì)盡力幫助大家，經(jīng)典問(wèn)題我會(huì)做成視頻和大家分享?；A(chǔ)入門視頻我還是會(huì)持續(xù)制作，不過(guò)我覺得教基礎(chǔ)是真的難，還好我手里還有很多免費(fèi)的入門視頻，需要的也可以找我。完全免費(fèi)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98874.html

相關(guān)文章

  • 同源策略和跨域知識(shí)點(diǎn)學(xué)習(xí)

    摘要：同源策略在這之前需要先熟悉一下這個(gè)概念，同源指請(qǐng)求協(xié)議相同，主機(jī)名相同，端口相同，涉及安全的策略。同源策略主要限制的是不同源之間的交互操作，對(duì)于跨域內(nèi)嵌的資源不受該策略限制。 問(wèn)題起因是在使用weibo api的時(shí)候，發(fā)現(xiàn)有一個(gè)報(bào)錯(cuò)。weibo api是https協(xié)議，我本地是模擬的回調(diào)域名，然后進(jìn)行數(shù)據(jù)通信，本地http協(xié)議，于是乎就報(bào)錯(cuò)了。出于對(duì)postMessage的不是很熟悉，...

    baiy 評(píng)論0 收藏0

  • 前端常見跨域解決方案（全）

    摘要：需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。目前，所有瀏覽器都支持該功能需要使用對(duì)象來(lái)支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...

    canger 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

    摘要：二跨域解決方案原理利用標(biāo)簽沒有跨域限制的漏洞，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的數(shù)據(jù)。使用反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。 前言 前后端數(shù)據(jù)交互經(jīng)常會(huì)碰到請(qǐng)求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。 本文完整的源代碼請(qǐng)猛戳github博客，紙上得來(lái)終覺淺，建議動(dòng)手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內(nèi)容？ 同源策略是一種約定，它是瀏覽器最核心...

    edgardeng 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

    摘要：二跨域解決方案原理利用標(biāo)簽沒有跨域限制的漏洞，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的數(shù)據(jù)。使用反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。 前言 前后端數(shù)據(jù)交互經(jīng)常會(huì)碰到請(qǐng)求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。 本文完整的源代碼請(qǐng)猛戳github博客，紙上得來(lái)終覺淺，建議動(dòng)手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內(nèi)容？ 同源策略是一種約定，它是瀏覽器最核心...

    justCoding 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<