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

有时候会遇到傻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);

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码