window.postMessage客户端之间通信

【百度百科】PostMessage是Windows API(应用程序接口) 中的一个常用函数,用于将一条消息放入到消息队列中。消息队列里的消息通过调用GetMessage和PeekMessage取得。

  • –发送端
<script type="text/javascript">
    $(function(){
        var data = {
            act: 'article',  // 自定义的消息类型、行为,用于switch条件判断等。。
            identity: {
                token: '20171018',
                appKey: 'titan'
            },
            msg: {
                subject: '跨域通信消息收到了有木有~', 
            },
            param: {}
        };

        // 不限制域名则填写 * 星号, 否则请填写对应域名如 http://www.b.com
        var $iframe = $('#showPage-M-04')[0].contentWindow;
        $iframe.postMessage(data, '*');
    });
</script>
  • –接收端
window.addEventListener('message', function(e){
    if (e.data.act == 'response') {
        alert(e.data.msg.answer);
    } else {
        alert('未定义的消息: '+ e.data.act);
    }
    console.log(e.data);
}, false);
### 解决 `uni.postMessage` 方法未定义的问题 当遇到 `uni.postMessage` 方法未定义的错误时,这通常意味着当前环境不支持该 API 或者存在某些配置问题。为了有效解决问题,可以从以下几个方面入手: #### 1. 检查 Uni-app 版本兼容性 确保使用的 Uni-app 版本支持 `postMessage` 功能。不同版本之间可能存在功能差异或 bug,更新到最新稳定版可以避免许多已知问题[^1]。 #### 2. 验证运行平台 `uni.postMessage` 主要用于小程序环境中,在 H5 页面或其他平台上可能并不适用。确认应用正在合适的小程序环境下执行此操作。 #### 3. 正确引入依赖库 如果项目中涉及多模块开发,则需保证所有必要的依赖项都已被正确加载。对于特定插件或组件的支持情况也要仔细核对文档说明。 #### 4. 使用替代方案 考虑到跨域通信的需求,除了 `uni.postMessage` 外还可以考虑其他方式实现相同目的。例如通过监听消息事件来接收来自子页面的信息: ```javascript window.addEventListener("message", ReceiveMessage); function ReceiveMessage(event){ console.log('接收到的消息:', event.data); } ``` 另外也可以采用 AJAX 请求作为备用手段完成数据交互任务[^2]: ```javascript function ajax(url, successCallback, failCallback) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { successCallback(this.responseText); } else { failCallback(this.status); } } }; xhttp.open("GET", url, true); xhttp.send(); } // 调用示例 ajax("/api/data", function(data){console.log('成功获取的数据:', data)}, function(status){console.error('请求失败的状态码:', status)}); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值