软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

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

收集整理的这篇文章主要介绍了html5 postMessage前端跨域并前端监听的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有时候会遇到傻X需求,比如前端单点登陆!遇到需求,就要去想解决办法,这里我给大家做一个简单的前端单点登陆的解决方案,用到的就是postMessage跨域信息传输以及onstorage的监听。本文用到的知识点 koa架设静态资源服务、跨域、postMessage的用法、onstorage监听storage第一步、架设两个不同端口的服务我们这里用koa2来搭建两个服务到不同的端口,来模拟一下真正的工作中需要出现的跨域情况。非常的简单 主要用到 koa-static这个中间件搭建起来也是非常容易的,如果大家想学node相关的知识 可以加我微信shouzi_1994 或者在博客下面留言你的联系方式 这里就不多说废话了 直接上代码 视频内会有详细的搭建步骤// localhost:4000const 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:3000const 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 postMessage前端跨域并前端监听的方法示例全部内容,希望文章能够帮你解决html5 postMessage前端跨域并前端监听的方法示例所遇到的程序开发问题。