跨域窗口通讯，可实现跨域单点登录

实现思路

参考淘宝和天猫的跨域单点登录实现思路由于localstorage不能跨域存取，要想跨域读取，这时候可以找一个中间者来实现。例如有A、B两个不同域名的网页，要想实现A向B发送消息或者B向A发送消息，这时候我们可以找一个C网站，让A和B网站都通过iframe包含C网站，通过C网站监听消息，并将消息存入localstorage中，实现A和B的通讯

单点登录

目前比较主流的项目都是前后端分离的项目，此时会使用token来验证用户信息。这时要想实现单点登录无非就是不同的网站能拥有已经登录过网站的token和一些用户信息，就可以实现不用再登录就能访问页面的功能。还是以A、B和C网站来举例吧。

C网站

c网站作为转发消息的网站，需要实现监听消息，并且将存取localstorage数据的结果返回给A或B网站，代码如下

const option = {
  setData(key, value) {
    localStorage.setItem(key, value);
  },
  getData(key) {
    return localStorage.getItem(key);
  }
}
window.addEventListener('message', function(e) {
	// 过滤掉一些消息
  if (e.origin != 'http://127.0.0.1:8848' && e.origin != 'http://localhost:8000') {
    return;
  }
  // 还有一种稍微简单的方式，使用eval方法执行字符串形式的js代码
  let data = JSON.parse(e.data);
  e.source.postMessage(option[data.name](data.key, data.value), e.origin);
}, false);

A或B网站

这两个网站需要实现给iframe发送消息和接收iframe发送的消息，给iframe发送的消息为要执行的js代码，接收的消息是iframe执行发送的js代码后的返回值，代码如下

window.addEventListener('message', function(e) {
  // 只接收iframe的发来的消息
  if (e.origin != 'http://localhost:8080') {
    return;
  }
  // e.data就是子窗口执行代码后的返回值
  console.log(e.data);
}, false);
var iframe = document.getElementById('iframe');
iframe.onload = function(){
  let data = {
    name: 'setData',
    key: 'user',
    value: 'test'
  }
  // 如果C网站使用的是eval方法直接执行js代码，这儿就可以直接写js代码字符串
  iframe.contentWindow.postMessage(JSON.stringify(data), 'http://localhost:8080/');
}

这样大概就能实现单点登录，当然还有一些细节就需要大家去思考一下了，这里只是提供了一个不同域名的网站如何去共享已经拥有的token。