html5 postMessage前端开发跨域并前端开发监视的方式

2021-02-23 00:48 jianzhan

有时会遇到傻X要求,例如前端开发多点登录!遇到要求,就要去想处理方法,

这里我给大伙儿做1个简易的前端开发多点登录的处理计划方案,

用到的便是postMessage跨域信息内容传送和onstorage的监视。

本文用到的专业知识点 koa架设静态数据資源服务、跨域、postMessage的用法、onstorage监视storage

第1步、架设两个不一样端口号的服务

大家这里用koa2来构建两个服务到不一样的端口号,来仿真模拟1下真实的工作中中必须出現的跨域状况。

十分的简易 关键用到 koa-static这个正中间件
构建起来也是是非非常非常容易的,假如大伙儿想学node有关的专业知识 能够加我手机微信shouzi_1994 或在blog下面留言你的联络方法 这里就很少说空话了 立即上编码 视頻内会有详尽的构建流程

// 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);

第2步、跨域通信postMessage

大家最先看来1下 postMessage的API

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

otherWindow
别的对话框的1个引入,例如iframe的contentWindow特性、实行window.open回到的对话框目标、或是取名过或标值数据库索引的window.frames。

message
即将推送到别的 window的数据信息。它可能被构造化克隆优化算法编码序列化。这代表着你能够不会受到甚么限定的将数据信息目标安全性的传输给总体目标对话框而不用自身编码序列化。[1]

targetOrigin
根据对话框的origin特性来特定哪些对话框能接受到信息恶性事件,其值能够是标识符串""(表明无尽制)或1个URI。在推送信息的情况下,假如总体目标对话框的协议书、主机详细地址或端口号这3者的随意1项不配对targetOrigin出示的值,那末信息就不容易被推送;仅有3者彻底配对,信息才会被推送。这个体制用来操纵信息能够推送到哪些对话框;比如,当用postMessage传输登陆密码时,这个主要参数就显得尤其关键,务必确保它的值与这条包括登陆密码的信息内容的预期接纳者的origin特性彻底1致,来避免登陆密码被故意的第3方截获。假如你确立的了解信息应当推送到哪一个对话框,那末请自始至终出示1个有准确值的targetOrigin,而并不是。不出示准确的总体目标将致使数据信息泄漏到任何对数据信息感兴趣爱好的故意站点。

transfer 可选
是1串和message 另外传送的 Transferable 目标. 这些目标的全部权将被迁移给信息的接受方,而推送1方将已不保有一定的有权。

如何是否很非常容易了解,这里给大伙儿汉语化1下。

要传送的那个(父)子对话框.postMessage(传送的內容, 传送到哪一个详细地址, [管理权限是不是迁移(1般无需)]);

提早说1下,要想跨域传送,务必是父子网页页面,也便是说,是根据js Open的网页页面,或ifream嵌套循环的网页页面

好了 大家刚开始来写编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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⑻">
    <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>

写到这里大家早已完成了父子网页页面的跨域通信,可是这个通信只产生在1个对话框内啊,并沒有做到我要想的实际效果,应该怎么办呢。

监视标值转变,做出立即反映

到这里大伙儿必须思索,甚么物品是访问器上的全部同网站域名网站都能看到的呢?

没错,storage,大家只必须对这个开展监视就行了。

这里大家挑选监视 loacalStorage 如今大家对子网页页面做1下改善

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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>

看,大家是否到如今就可以够对于跨域传送的內容做出回应了呢?

思索

如今大家保证了两个网页页面的跨域通信,那末3个到好几个的跨域通信如何做呢?实际上1个道理啦。如今道理说给你了,写法自身去体验1下吧。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。