js打开浏览器新窗口，并监听新窗口变化

代码

newOpen(msg) {
    const id = window.open('https://www.jianshu.com/p/1057b36968cc','_blank','height=1000,width=600');
    //可以添加一些内容，设置标题
    id.document.body.innerHTML=`<div>${msg}`</div>`;
    id.document.title='这里设置标题';
}

窗口是打开了，这边有个需求，我需要知道新窗口的东西变化了，然后通知给原先的浏览器窗口

解决方式用LocalStorage，window.onstorage监听

//发送消息
senMsg(type, payload){
  localStorage.setItem('@@'+type, JSON.stringify({
    payload,
    temp:Date.now() //保证存的值不一样，这样监听的时候就能确保监听到
  }))
}
//监听消息
listenMsg(handler){
  const storageHandler = e=>{
    const data = JSON.parse(e.newValue)
    handler(e.key.substring(2), data.payload)  
  }
  window.addEventListener('storage',storageHandler)
  return ()=>{
    //提供销毁这个监听
    window.removeEventListener('storage',storageHandler)
  }
}

使用
原浏览器所属页面

export default {
  data() {
    return {
      unHandler: null
    }
  },
  mounted(){
    //监听localStorage是否发生变化
    this.unHandler = this.listenMsg((type, payload) =>{
      if(type === '定义的localStorage的key及keyName'){
        //进行你想要的操作
      }
    })
  },
  methods:{
    //监听消息
    listenMsg(handler){
      const storageHandler = e=>{
        const data = JSON.parse(e.newValue)
        handler(e.key.substring(2), data.payload)  
      }
      window.addEventListener('storage',storageHandler)
      return ()=>{
        //提供销毁这个监听
        window.removeEventListener('storage',storageHandler)
      }
    }
  }
}

新浏览器窗口所属页面

export default {
  data() {
    return {}
  },
  methods:{
    //发送变化触发的函数
    add(){
         let data = {name:'张三'}
         this.senMsg('keyName', data)
    },
    //发送消息
    senMsg(type, payload){
      localStorage.setItem('@@'+type, JSON.stringify({
        payload,
        temp:Date.now() //保证存的值一样，这样监听的时候就能确保监听到
      }))
    }
  },
}