如何在html5中實現(xiàn)前端跨域與監(jiān)聽效果?實現(xiàn)方法示例詳解！

猿友 2021-07-26 13:52:18 瀏覽數(shù) (1987)

反饋

今天我們就來講講有關(guān)于：“如何在html5中實現(xiàn)前端跨域與監(jiān)聽效果?實現(xiàn)方法示例詳解！ ”這個問題。下面是小編整理的相關(guān)內(nèi)容！

這里我給大家做一個簡單的前端單點登陸的解決方案，用到的就是postMessage跨域信息傳輸以及onstorage的監(jiān)聽。

本文用到的知識點 koa架設(shè)靜態(tài)資源服務(wù)、跨域、postMessage的用法、onstorage監(jiān)聽storage

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

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

非常的簡單主要用到 koa-static這個中間件
搭建起來也是非常容易的，這里就不多說廢話了直接上代碼視頻內(nèi)會有詳細的搭建步驟

// 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ù)啟動在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ù)啟動在4000端口")
app.listen(4000);

第二步、跨域通訊postMessage

我們首先來看一下 ?postMessage?的?API?

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

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

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

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

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

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

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

提前說一下，要想跨域傳輸，必須是父子頁面，也就是說，是通過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網(wǎng)站的內(nèi)容
    <button onclick="send()">發(fā)消息給兒子</button>
    
    <iframe style="display:none" src="http://localhost:4000" frameborder="0"></iframe>
<script>
        function send() { 
                window.frames[0].postMessage({a:"1"},"http://localhost:4000"); // 觸發(fā)跨域子頁面的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網(wǎng)站的內(nèi)容
    <button onclick="send()">發(fā)消息給爸爸</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>

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

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

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

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

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

<!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網(wǎng)站的內(nèi)容
    <button onclick="send()">發(fā)消息給爸爸</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>

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

思考

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

通過這篇文章和代碼大家對于：“如何在html5中實現(xiàn)前端跨域與監(jiān)聽效果?實現(xiàn)方法示例詳解！ ”這個問題就有所了解了吧！當然更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進行學習和了解！

HTML5

0 人點贊

如何在html5中實現(xiàn)前端跨域與監(jiān)聽效果?實現(xiàn)方法示例詳解！

如何在html5中實現(xiàn)前端跨域與監(jiān)聽效果?實現(xiàn)方法示例詳解！