APP如何与H5通信？
C+ 安口木 2024-08-28 12:33:02 阅读 93
postMessage
<code>postMessage可以安全地实现跨源通信。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent[1] 消息。下面进行实践。
两个页面通信
实现效果：A页面打开B页面，之后进行相互通信。
代码实现
A：
<input type="text" id="ipt" />code>
<button id="btn">点击操作页面</button>code>
<script>
btn.onclick = function(){
const w2 = window.open('http://127.0.0.1:5500/src/utils/index2.html');
w2.onload = function () {
w2.postMessage('页面一 发送====> 页面二', "http://127.0.0.1:5500")
}
}
window.addEventListener('message',function(e){
console.log(e.data);
ipt.value = e.data;
})
</script>
B:
<h2 id="h2">标题二</h2>code>
<button id="btn">点击</button>code>
<script>
const parentWindow = window.opener;
/* 如果是从 http://127.0.0.1:5500 中的某个页面将B页面打开，那么就能成功发送跨文档信息
如果讲此处的URI换成"*"，就意味着任何网页打开B页面，都能收到B页面传输的信息
*/
btn.onclick = function(){
parentWindow.postMessage(h2.innerHTML,'http://127.0.0.1:5500');
}
window.addEventListener('message', function (e) {
console.log(e.data);
ipt.value = e.data;
})
</script>
A发送给B
这样就完成了两个页面的相互通信。
iframe通信
实现效果：在父页面嵌入子页面，进行父子通信。
代码实现
父：
<code><iframe src="http://127.0.0.1:5500/src/utils/index2.html" frameborder="1" width="100%" height="500px" id="Bframe"></iframe>code>
<script>
window.onload = ()=>{
let frame = window.frames[0];
frame.postMessage("父====>子","http://127.0.0.1:5500")
}
window.addEventListener('message', function (e) {
console.log('父接受数据',e.data);
})
</script>
子：
<input type="text" id="ipt" />code>
<button id="frameBtn">iframe点击</button>code>
<script>
frameBtn.onclick = function(){
window.top.postMessage(h2.innerHTML,'http://127.0.0.1:5500');
}
window.addEventListener('message', function (e) {
console.log(e.data);
ipt.value = e.data;
})
</script>
效果
总结
window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口)，而不是自身窗口的window
父页面中：父页面向子页面发送跨域信息，window就是在父页面中嵌入的iframe指向的子页面的window，即：iFrame.contentWindow子页面中：子页面想父页面发送跨域信息，window就是父页面的window，在这里因为子页面是嵌入到父页面中的，对于子页面来讲，window就是top或者parent
需要等到iframe中的子页面加载完成后才发送消息，否则子页面接收不到消息
在监听message事件时需要判断一下消息来源origin
如果指定了origin 必须相同 如果是localhost 和 127.0.0.1 会报错
app与h5通信
原生APP和h5之间可以使用jsBridge进行通信，也可以使用postMessage进行通信。
以安卓为例：
1、 接受APP消息：
<code>// 安卓端
webView.loadUrl("javascript:window.postMessage('Hello H5 OnClick', '*');");
// H5 监听来自App的消息
window.addEventListener('message', (event) => {
console.log('Received message from App:', event.data);
});
2、发送消息到APP：
// H5发送
const message = {
data: 'h5 send',
};
const url = `/sendMsg/${ encodeURIComponent(JSON.stringify(message))}`;
window.location.href = url;
// 安卓端
@Override public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
LogUtils.e("shouldInterceptRequest", request.getUrl().toString());
return super.shouldInterceptRequest(view, request);
}
结果如下：
总结
postMessage是一种安全的实现跨源通信的方式。它可以在不同的窗口之间传递消息，无论这些窗口是同源还是不同源。通过postMessage，我们可以实现以下几种通信方式：
不同窗口之间的通信父页面与嵌入的子页面之间的通信H5与原生APP之间的通信
在使用postMessage时，需要指定消息的来源origin，以确保安全性。另外，为了确保消息的接收方能够正确接收到消息，最好在发送消息之前确保目标窗口已经加载完成。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。