国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

postMessage前端跨域并前端監聽

ytwman / 2612人閱讀

摘要：有時候會遇到傻需求，比如前端單點登陸遇到需求，就要去想解決辦法，這里我給大家做一個簡單的前端單點登陸的解決方案，用到的就是跨域信息傳輸以及的監聽。可選是一串和同時傳遞的對象這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。

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

我們這里用koa2來搭建兩個服務到不同的端口，來模擬一下真正的工作中需要出現的跨域情況。
非常的簡單 主要用到 koa-static這個中間件
搭建起來也是非常容易的，如果大家想學node相關的知識 可以加我微信shouzi_1994 或者在博客下面留言你的聯系方式 這里就不多說廢話了 直接上代碼 視頻內會有詳細的搭建步驟

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

//設置靜態資源的路徑 
const staticPath = "./static"

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

  
console.log("服務啟動在4000端口")

app.listen(4000);


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

//設置靜態資源的路徑 
const staticPath = "./static"

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


console.log("服務啟動在4000端口")

app.listen(4000);
第二步、跨域通訊postMessage

我們首先來看一下 postMessage的API

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

怎么樣是不是很容易理解，這里給大家中文化一下。
要傳輸的那個（父）子窗口.postMessage(傳輸的內容, 傳輸到哪個地址, [權限是否轉移（一般不用）]);

提前說一下，要想跨域傳輸，必須是父子頁面，也就是說，是通過js Open的頁面，或者ifream嵌套的頁面
好了 我們開始來寫代碼




    
    
    
    Document


        
    我是端口3000網站的內容
    
    
    








    
    
    
    Document


        
    我是端口4000網站的內容

寫到這里我們已經實現了父子頁面的跨域通訊，但是這個通訊只發生在一個窗口內啊，并沒有達到我想要的效果，該怎么辦呢。

監聽數值變化，做出及時反應

到這里大家需要思考，什么東西是瀏覽器上的所有同域名網站都能看到的呢？
沒錯，storage，我們只需要對這個進行監聽就好了。

這里我們選擇監聽 loacalStorage 現在我們對子頁面做一下改進




    
    
    
    Document


        
    我是端口4000網站的內容

看，我們是不是到現在就能夠針對跨域傳輸的內容做出響應了呢？

思考

現在我們做到了兩個頁面的跨域通訊，那么三個到多個的跨域通訊怎么做呢？其實一個道理啦。現在道理說給你了，寫法自己去體驗一下吧。

寫在最后

大家有什么工作上的坎，想不通的問題，學習上的難點，都可以給我微信發信息，或者在博客評論，我都會盡力幫助大家，經典問題我會做成視頻和大家分享。基礎入門視頻我還是會持續制作，不過我覺得教基礎是真的難，還好我手里還有很多免費的入門視頻，需要的也可以找我。完全免費。

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

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

相關文章

  • 同源策略和跨域知識點學習

    摘要：同源策略在這之前需要先熟悉一下這個概念，同源指請求協議相同，主機名相同，端口相同，涉及安全的策略。同源策略主要限制的是不同源之間的交互操作，對于跨域內嵌的資源不受該策略限制。 問題起因是在使用weibo api的時候，發現有一個報錯。weibo api是https協議，我本地是模擬的回調域名，然后進行數據通信，本地http協議，于是乎就報錯了。出于對postMessage的不是很熟悉，...

    baiy 評論0 收藏0

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

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

    canger 評論0 收藏0

  • 九種跨域方式實現原理（完整版）

    摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的數據。使用反向代理實現跨域，是最簡單的跨域方式。 前言 前后端數據交互經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容。 本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內容？ 同源策略是一種約定，它是瀏覽器最核心...

    edgardeng 評論0 收藏0

  • 九種跨域方式實現原理（完整版）

    摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的數據。使用反向代理實現跨域，是最簡單的跨域方式。 前言 前后端數據交互經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容。 本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內容？ 同源策略是一種約定，它是瀏覽器最核心...

    justCoding 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<