ILD

webview bidirectional communicate with javascript
作者:Yuan Jianpeng 邮箱:yuanjp89@163.com
发布时间:2026-4-18 站点:Inside Linux Development


在webview应用中,app通常需要和webview页面中的javascript通信。


有3种方法。

1 lagacy

addJavascriptInterface()同步的,很古老


2 postMessage() WebMessageChannel()


这个是最时髦的,最新的技术。



本文介绍第二种技术,它可以发送一个channel给javascript,然后通信


app端kotlin代码:

val channel:Array<out WebMessagePort> = webView.createWebMessageChannel()

channel[1].setWebMessageCallback(object : WebMessagePort.WebMessageCallback() {
    override fun onMessage(port: WebMessagePort, message: WebMessage) {
    
    }
})

val message = WebMessage("Web Message Established\n", arrayOf(channel[0]))
webView.postWebMessage(message, Uri.parse("*"))


javascript代码

window.addEventListener("message", onMessage);

function onMessage(e) {
    if (!e.ports.length)
       return;
       // Use the transferred port to post a message to the main frame
       e.ports[0].postMessage("A message from the iframe in page2.html");
}

不创建channel的情况下,app可以单方向发送消息给webview的页面

webView.postWebMessage(WebMessage(xxx"), Uri.parse("*"))

这里没有指定channel。

javascript的window.onmessage回调可以收到


上述的例子,发送一个channel给javascript。javascript收到后,通过e.ports[0]或得这个channel

它可以通过这个channel发送消息。


app创建的channel有2个,[0]发给javascript. [1]留着自己手消息,[1]也可以发消息。此时javascript通过channel收取。


参考

[1]

Access native APIs with JavaScript bridge

https://developer.android.google.cn/develop/ui/views/layout/webapps/native-api-access-jsbridge?hl=en


Copyright © linuxdev.cc 2017-2024. Some Rights Reserved.