Android WebView里H5调用JS方法为啥没反应?

UI子骞 阅读 37

我在做混合开发,H5页面嵌在Android的WebView里,想通过JSBridge调用原生方法,但点击按钮完全没反应。安卓那边说接口已经注入了,但我这边调用好像没触发。

我试过加try-catch也没报错,控制台也看不到任何输出。是不是我调用方式不对?下面是我写的调用代码:

function callNative() {
  if (window.Android) {
    window.Android.showToast('Hello from H5');
  } else {
    console.log('Android bridge not found');
  }
}
我来解答 赞 5 收藏
二维码
手机扫码查看
2 条解答
W″俊熙
这问题我遇到过好多次了,WebView和JS交互确实容易出幺蛾子。咱们一步步来分析:

首先确认下Android那边的注入方式是否正确,这个问题关键是WebView必须开启JS支持并且正确注入对象。Android那边应该这样写:

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsBridge(), "Android");


然后你的JS代码看起来没啥大问题,但有几个常见坑点需要注意:

1. Android 4.2以上版本必须给暴露的方法加@JavascriptInterface注解
2. 确保WebView已经完成加载再调用JS方法
3. 有时候window对象访问会有延迟

建议改成这样更稳妥:

function callNative() {
// 加个延时确保完全加载
setTimeout(function(){
try {
if(typeof window.Android !== 'undefined') {
window.Android.showToast('Hello from H5');
} else {
console.error('Android bridge not found');
}
} catch(e) {
console.error('JS调用异常:', e);
}
}, 300);
}


如果还不行,建议让Android同学检查下这几个点:
1. 他们的JsBridge类里的showToast方法有没有加@JavascriptInterface
2. WebViewClient是否设置了正确,最好在onPageFinished里通知H5页面可以调用了
3. 是不是用了Chromium内核的WebView,有些厂商魔改过会有兼容问题

另外可以试试在页面加载完成后,让Android主动执行一段JS来确认通讯是否正常:

webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
view.loadUrl("javascript:alert('bridge ready')");
}
});


如果看到alert弹窗说明WebView基础功能是正常的,那问题就出在JSBridge的具体实现上。这种问题经常要两边一起调试才找得到原因。

(小声bb:每次调WebView和JS交互都像在开盲盒,指不定哪里就藏了个坑...)
点赞 2
2026-03-07 18:05
UP主~悦嘉
这问题我遇到过太多次了,WebView和JS通信简直就是性能黑洞和坑的集合体。先别急着怀疑JS代码,Android那边的问题可能性更大。

几个关键检查点:

1. 首先确认WebView设置正确:
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());


2. 安卓端注入的姿势要对:
webView.addJavascriptInterface(new JsBridge(), "Android");  // 注意这个Android要和你JS里的window.Android对上


3. 你的JS代码其实没问题,但性能上建议加个超时兜底:
function callNative() {
let retry = 0;
const tryCall = () => {
if (window.Android) {
window.Android.showToast('Hello from H5');
} else if (retry++ < 3) {
setTimeout(tryCall, 200); // 等200ms再试
} else {
console.error('Bridge加载超时');
}
};
tryCall();
}


4. 最坑的是安卓4.2以上要加@JavascriptInterface注解:
@JavascriptInterface
public void showToast(String msg) {
Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
}


先让安卓同事确认这几点,特别是最后那个注解,我们项目组之前就被这个坑了两天。如果还不行,让他们查logcat看有没有安全策略拦截的日志。
点赞 1
2026-03-05 10:03