Android WebView里H5调用JS方法为啥没反应?
我在做混合开发,H5页面嵌在Android的WebView里,想通过JSBridge调用原生方法,但点击按钮完全没反应。安卓那边说接口已经注入了,但我这边调用好像没触发。
我试过加try-catch也没报错,控制台也看不到任何输出。是不是我调用方式不对?下面是我写的调用代码:
function callNative() {
if (window.Android) {
window.Android.showToast('Hello from H5');
} else {
console.log('Android bridge not found');
}
}
首先确认下Android那边的注入方式是否正确,这个问题关键是WebView必须开启JS支持并且正确注入对象。Android那边应该这样写:
然后你的JS代码看起来没啥大问题,但有几个常见坑点需要注意:
1. Android 4.2以上版本必须给暴露的方法加@JavascriptInterface注解
2. 确保WebView已经完成加载再调用JS方法
3. 有时候window对象访问会有延迟
建议改成这样更稳妥:
如果还不行,建议让Android同学检查下这几个点:
1. 他们的JsBridge类里的showToast方法有没有加@JavascriptInterface
2. WebViewClient是否设置了正确,最好在onPageFinished里通知H5页面可以调用了
3. 是不是用了Chromium内核的WebView,有些厂商魔改过会有兼容问题
另外可以试试在页面加载完成后,让Android主动执行一段JS来确认通讯是否正常:
如果看到alert弹窗说明WebView基础功能是正常的,那问题就出在JSBridge的具体实现上。这种问题经常要两边一起调试才找得到原因。
(小声bb:每次调WebView和JS交互都像在开盲盒,指不定哪里就藏了个坑...)
几个关键检查点:
1. 首先确认WebView设置正确:
2. 安卓端注入的姿势要对:
3. 你的JS代码其实没问题,但性能上建议加个超时兜底:
4. 最坑的是安卓4.2以上要加@JavascriptInterface注解:
先让安卓同事确认这几点,特别是最后那个注解,我们项目组之前就被这个坑了两天。如果还不行,让他们查logcat看有没有安全策略拦截的日志。