window.onmessage

格來羙、日出

已于 2023-01-31 15:58:34 修改

阅读量3.8k

点赞数 1

分类专栏：前端开发文章标签： javascript ecmascript html5

于 2022-10-11 10:56:01 首次发布

本文链接：https://blog.csdn.net/w345731923/article/details/127259330

版权

前端开发专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用HTML5的postMessage和onmessage方法实现跨页面及iframe间通信的技术方案。通过具体的代码示例展示了如何在不同页面间发送和接收消息，特别适用于解决因同源策略限制而无法直接访问的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中iframe通信，使用了onmessage，

window.addEventListener（'message'，function（event）{...}）
window.onmessage = function（event）{...}

postMessage和onmessage是HTML5的方法，用来解决跨页面通信，或者通过iframe嵌套的不同页面的通信的。postMessage为发送方，onmessage为接收方。

页面A

    /**
     * onmessage接收方，对应/public/iframe/videoPlay.html
     * @param e 
     */
    window.onmessage = function (e) {
      console.log('onmessage收到请求，save...', e.data);
      api_service(e.data).then((res) => {
        if (res.success) { }
      })
    }

页面B

window.addEventListener("message", receiveMessageFromIndex, false);

  /**
   * 回调函数，切记，只被调用一次
   */
  function receiveMessageFromIndex(event) {
    //TODO..做了一些关于视频初始化赋值的操作
  }


  /**
   * 发送方给content数据，
   * /pages/content
   */
  function sendMessage() {
    /**
     * message监听器说明
     * otherWindow.postMessage(message, targetOrigin, [transfer]);
     * otherWindow--其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象
     * message--将要发送到其他 window 的数据
     * targetOrigin--通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI
     * [transfer]--是一串和 message 同时传递的 Transferable 对象
     */
    window.parent.postMessage(data)

这样实现了2个页面的通信。发送方postMessage如果只有一个参数，默认是local