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实现可滑动跳转的分页插件示例
May 08 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 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
基于mysql的论坛(3)
2006/10/09 PHP
PHP添加MySQL数据记录代码
2008/06/07 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
零基础php编程好学吗
2019/10/11 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python格式化输出%s和%d
2018/05/07 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python实现微信防撤回神器
2019/04/29 Python
pytorch 模型可视化的例子
2019/08/17 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Django nginx配置实现过程详解
2020/09/10 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
读书活动总结范文
2014/04/26 职场文书
节能环保标语
2014/06/12 职场文书
个人总结与自我评价
2015/02/14 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
升学宴祝酒词
2015/08/11 职场文书
初三化学教学反思
2016/02/22 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS