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

前端不同窗口之间通信：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
3
4
5
6
7
8
9

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);
});
1
2
3
4
5
6
7
8
9
10
11
12

2.2 WebView的特殊API

部分移动平台提供了专门用于App与H5通信的API，例如：

• Android: 使用WebView.addJavascriptInterface暴露Java对象给JavaScript调用。
• iOS: 利用WKWebView的WKUserContentController和WKScriptMessageHandler来实现消息传递。

2.3 Hybrid框架

市面上有许多成熟的Hybrid框架，如Cordova、React Native的Webview组件等，它们内置了完善的JSBridge机制，开发者只需关注业务逻辑，而无需从零开始搭建通信桥梁。

结语

无论是iframe页面间的通信，还是App与H5页面的交互，关键在于选择合适的通信机制，确保数据的安全传输与高效处理。