H5-PostMessage跨域传参

最新推荐文章于 2025-05-23 06:48:58 发布

happy任

最新推荐文章于 2025-05-23 06:48:58 发布

阅读量973

点赞数

CC 4.0 BY-SA版权

分类专栏：经验总结文章标签： postMessage 跨域 H5

本文链接：https://blog.youkuaiyun.com/qq_24182885/article/details/82589731

本文介绍H5中使用postMessage进行跨域传参的方法，详细阐述了参数发送方和接收方的设置，并分享了作者的实践经验，确保指定IP地址的传参有效性。

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

一、前言

postMessage是H5的跨域传参方式，坑比较多，以下为自己亲测可指定ip地址的传参！

二、正文

1、参数发送方

//例如点击1个按钮，打开新的页面
document.getElementById("btn").onclick = function () {
        //打开子页面，指定传参ip地址
        var newWindow = window.open("http://localhost:8080")
        //监听message事件，当子页面打开完成，并且反馈加载完成消息的时候，
        //进行参数的传递
        window.onmessage =function (e) {
          //可指定要传参数到ip地址,这个要传参数到http://localhost:8080中
          if(e.origin == "http://localhost:8080"){
            newWindow.postMessage({
              sysNo:"02"//系统号
            },"http://localhost:8080")
          }
        }
      }

2、参数接收方

//被传参的页面加载完成后，向发送数据的页面发个信息，只有子页面加载完成后，传参才会成功！这点至关重要！
 window.opener.postMessage("ok","http://10.31.57.80:82")
    //监听数据变化，用来截取postMessage传来的数据
    window.addEventListener("mess