关于前端不同窗口之间如何通信的思考（Ifream页面之间、App与H5之间）

骨灰级尤雨溪迷弟~

于 2024-06-19 09:54:31 发布

阅读量491

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/weixin_43742274/article/details/139773707

版权

前端不同窗口之间通信：iframe页面、App与H5的交互

在现代Web开发中，跨窗口通信是一个常见需求，尤其是在涉及iframe嵌套页面、原生App与Webview（H5页面）交互的场景中。本文将深入探讨这些不同环境下的通信技术，包括使用iframe实现同源和跨域通信，以及App与H5页面间的通信策略。

1. iframe页面间通信

1.1 同源页面通信

对于同源的iframe页面，可以直接使用JavaScript的window.postMessage方法进行通信，或者直接通过访问父窗体或子窗体的window对象来传递信息。

使用`window.postMessage`

// 在父页面发送消息
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', '*');

// 在子iframe接收消息
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent-page.com') return; // 验证来源
    console.log('Received:', event.data);
}, false);

1.2 跨域页面通信

对于跨域的iframe，只能使用window.postMessage来安全地进行通信，因为直接访问跨域iframe的window对象会受到浏览器同源策略的限制。

2. App与H5之间的通信

2.1 JavaScriptBridge（JSBridge）

在原生App中嵌入H5页面时，通常需要实现一种叫做“JSBridge”的机制来桥接原生代码与JavaScript代码。这种机制允许两者相互调用对方的功能。

实现原理

定义协议：双方约定一套通信协议，如函数名、参数格式等。
消息发送：H5通过特定方式（如调用一个全局函数）发送消息给原生App。
消息接收处理：原生App监听到消息后，解析并执行相应的原生操作，然后回调H5提供的处理函数。

示例

// H5端
function callNative(method, params, callback) {
    window.JSBridge.call(method, params, callback);
}

// 原生端（伪代码）
JSBridge.registerHandler('nativeMethod', function(data, responseCallback) {
    // 执行原生操作
    var result = performAction(data);
    // 回调H5
    responseCallback(result);
});