html5 postMessage前端跨域并前端监听的方法示例


Posted in HTML / CSS onNovember 01, 2018

有时候会遇到傻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嵌套的页面

好了 我们开始来写代码

<!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>

看,我们是不是到现在就能够针对跨域传输的内容做出响应了呢?

思考

现在我们做到了两个页面的跨域通讯,那么三个到多个的跨域通讯怎么做呢?其实一个道理啦。现在道理说给你了,写法自己去体验一下吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 #HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 #HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 #HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 #HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 #HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 #HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 #HTML / CSS
You might like
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
详解javascript遍历方式
2015/11/11 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
在Python下尝试多线程编程
2015/04/28 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python实现二叉查找树实例代码
2018/02/08 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
高一历史教学反思
2014/01/13 职场文书
展会邀请函范文
2014/01/26 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
党员进社区活动总结
2015/05/07 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript