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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
css弧边选项卡的项目实践
May 07 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
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python版简单工厂模式
2017/10/16 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
获取Django项目的全部url方法详解
2017/10/26 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python3正则模块re的使用方法详解
2020/02/11 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
注塑工厂厂长岗位职责
2013/12/02 职场文书
揠苗助长教学反思
2014/02/04 职场文书
道路交通安全实施方案
2014/03/12 职场文书
《四季》教学反思
2014/04/08 职场文书
企业文化演讲稿
2014/05/20 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
python常见的占位符总结及用法
2021/07/02 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
JavaScript函数柯里化
2021/11/07 Javascript
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
JS函数式编程实现XDM一
2022/06/16 Javascript