H5开发跨域 postMessage 传数据token

最近遇到一个需求，需要将两个不同域名的h5网站进行数据共享，于是在跳转页面的时候，需要传递token完成登录。

A页面（http://127.0.0.1:8080/search）：

const Cookie = require("js-cookie") async created () { window.addEventListener('message', (e) => { if(e.origin != "http://127.0.0.1:8081") return if (e.data) { clearInterval(this.messageInterval) } }, false) }, destroyed () { window.removeEventListener('message', this.addListener, false) }, methods: { searchClick () { let cookie = Cookie.get('auth') if (cookie) { let auth = JSON.parse(cookie) let activityWindow = window.open('http://127.0.0.1:8081/h5-home/activity') this.messageInterval = setInterval(() => { activityWindow.postMessage(auth.token, 'http://127.0.0.1:8081') }, 1000) } } }

注意：使用postMessage的时候一定要延时（我这里使用setInterval是为了保证数据接收成功），不然会接收不到数据。 使用window.open时不能带_self参数，不然会关掉A页面，无法进行数据传递。

B页面（http://127.0.0.1:8081/h5-home/activity）：

async created () { window.addEventListener('message', this.addListener, false) }, destroyed(){ window.removeEventListener('message', this.addListener, false) }, methods: { addListener (e) { if (e.origin != "http://127.0.0.1:8080") { return } if (e.data) { e.source.postMessage('received',e.origin); } console.log(e.data) //打印出传输过来的消息 } }