vue项目通过iframe传递值

277 阅读1分钟

vue项目通过iframe传递值

<iframe
  :src="subUrl+'/middle.html'"
  frameborder="0"
  id="iframe"
  style="display: none"
></iframe>

subUrl为项目地址

跳转另一个项目打开页面
handlerMeeting(row) {
  const ifameWin = document.getElementById("iframe").contentWindow;
  let token = getToken();
  ifameWin.postMessage(token, this.subUrl);
  window.open(
    this.subUrl+ "/meet", 
    "_blank"
  );
},

接收方

通过window.addEventListener接收发送过来的信息
window.addEventListener('message', function(e) {
  console.log(e,'我是返回的e',window.parent,e.source==window.parent,e.data,12313131213)
  if (e.source != window.parent)
    return;
  localStorage.setItem('task',e.data); //task为发送过来的token值
  window.parent.postMessage('finished', '*');
});

如果存下的值在本地没有看到,看是否是路由拦截、清空,特殊需求特殊处理