溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何在html5中使用postMessage前端跨域并前端監聽，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
第一步、架設兩個不同端口的服務
我們這里用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嵌套的頁面
好了 我們開始來寫代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- postMessage和iframe解決普通的跨域問題 -->
我是端口3000網站的內容
<button onclick="send()">發消息給兒子</button>
<iframe style="display:none" src="http://localhost:4000" frameborder="0"></iframe>
<script>
function send() {
window.frames[0].postMessage({a:"1"},"http://localhost:4000"); // 觸發跨域子頁面的messag事件
}
window.addEventListener('message', function(event) {
console.info('兒子來信了', event);
}, false);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- postMessage和iframe解決普通的跨域問題 -->
我是端口4000網站的內容
<button onclick="send()">發消息給爸爸</button>
<iframe style="display:none" src="http://localhost:4000" frameborder="0"></iframe>
<script>
window.addEventListener("message",function(event){
console.log("爸爸來信了：", event)
},false)
function send() {
parent.postMessage({a:1}, 'http://localhost:3000'); //
}
</script>
</body>
</html>寫到這里我們已經實現了父子頁面的跨域通訊，但是這個通訊只發生在一個窗口內啊，并沒有達到我想要的效果，該怎么辦呢。
監聽數值變化，做出及時反應
到這里大家需要思考，什么東西是瀏覽器上的所有同域名網站都能看到的呢？
沒錯，storage，我們只需要對這個進行監聽就好了。
這里我們選擇監聽 loacalStorage 現在我們對子頁面做一下改進
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- postMessage和iframe解決普通的跨域問題 -->
我是端口4000網站的內容
<button onclick="send()">發消息給爸爸</button>
<iframe style="display:none" src="http://localhost:4000" frameborder="0"></iframe>
<script>
window.addEventListener("message",function(event){
console.log("爸爸來信了：", event)
var data = JSON.stringify(event.data)
window.localStorage.setItem("data",data)
},false)
window.onstorage(function(st){
console.log(st.key,st.value)
})
function send() {
parent.postMessage({a:1}, 'http://localhost:3000'); //
}
</script>
</body>
</html>關于如何在html5中使用postMessage前端跨域并前端監聽就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
