window.postMessage详细使用方法以及踩坑总结

428 阅读1分钟

前言:

我这次用的是通过window.open("http:...")跳转到另一窗口,在网上查询了方法后还是无法正确接收到消息,最后经过不懈的努力,终于成功啦。

话不多说,上代码

(1)下边这块呢我称他为父窗口

const targetWindow: any = window.open(`http:...`)
timer.current = setInterval(() => {
  targetWindow.postMessage({
    type: "child",
  }, "*")
}, 10)

(2)下边为子窗口

window.addEventListener("message", (event: any) => {
  if (event.data.type === "child") {
    event.source.postMessage({
      type: "parent",
    }, "*")
  }
}, false)

总结:其实就是这么简单就是踩了一些坑

(1)用setTimeout也是可以的,但是这个时间我们无法控制呀,不可控,有可能会出问题的,所以放弃。 (2)如果直接通过window.postMessage去发送的话,是接收不到信息的,我猜测是因为,子窗口还没加载好,但是已经发出去所以接收不到了。

最后,在父窗口得到子窗口的回应后记得把定时器去掉。

自己的一些看法,多多指教。