React项目中Android WebView调用JavaScript方法在部分机型失效？

雯清 ☘︎ 提问于 2026-01-26 22:45:24 阅读 57

移动

在开发H5页面时遇到个奇怪问题，通过React组件调用Android WebView的JavaScript接口，在Android 10以下机型能正常触发，但到了Android 11及以上就直接失效了。

我尝试过在WebView设置里开了setJavaScriptEnabled和setWebViewClient，代码示例：

function handleClick() {
  try {
    window.android_bridge?.callNative('test')
  } catch(e) {
    console.error('调用失败:', e)
  }
}

return (
  
)

但点击按钮时控制台报”Not allowed to load local resource”，检查了Android端代码，addJavascriptInterface已经正确绑定。难道是Android版本升级后对跨域有新限制？求大佬指点排查方向…

H5开发

我来解答赞 8 收藏

反馈

2 条解答

___炳硕 Lv1

这个问题我踩过坑。Android 11对WebView的权限限制更严格了，尤其是跨域场景下调用JavaScriptInterface。除了你已经设置的setJavaScriptEnabled(true)和setWebViewClient，还需要在WebView配置里加上：

webView.getSettings().setDomStorageEnabled(true);

webView.getSettings().setAllowUniversalAccessFromFileURLs(true);

webView.getSettings().setAllowFileAccessFromFileURLs(true);

如果你的H5页面是通过本地assets加载的（比如file://），并且JavaScript里调用了绑定的android_bridge，那必须要开启setAllowUniversalAccessFromFileURLs和allowFileAccessFromFileURLs。否则WebView会拦截这类调用并报"Not allowed to load local resource"。

另外确认一下你的addJavascriptInterface是不是这样写的：

webView.addJavascriptInterface(new AndroidBridge(), "android_bridge");

还有别忘了在AndroidManifest.xml里加上：

<uses-permission android:name="android.permission.INTERNET" />

如果页面有加载远程资源，建议把CSP(Content Security Policy)也加上：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:;">

2026-02-06 05:10

司空浩然 Lv1

这个问题确实有点坑，不过前端这块遇到类似的情况挺常见的。Android 11及以上版本对WebView的安全策略做了更严格的限制，特别是涉及到JavaScript接口的调用。

先说解决方法吧，你需要确保以下几点：

1. **设置正确的安全选项**：在Android端初始化WebView时，除了setJavaScriptEnabled，还需要加上setAllowFileAccess(false)和setAllowContentAccess(false)，这样可以避免"local resource"相关的错误。

2. **使用HTTPS加载页面**：如果你的H5页面是通过HTTP协议加载的，可能会被新的安全策略拦截。尽量改为HTTPS。

3. **检查CORS问题**：虽然你说addJavascriptInterface已经绑定了，但Android 11增加了跨域限制，可以尝试在WebView中添加以下配置：

webSettings.setDomStorageEnabled(true);

webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

4. **调整React代码**：把你的JS调用稍微改一下，增加一个判断确保window.android_bridge存在后再调用：

function handleClick() {

     if (window.android_bridge && typeof window.android_bridge.callNative === 'function') {

       window.android_bridge.callNative('test');

     } else {

       console.error('Android bridge not available');

     }

   }

最后提醒一下，Android WebView的安全策略改来改去，有时候真让人头疼。如果还是不行，建议让安卓同事抓个日志看看具体报错信息。前端这边能做的也就这么多了。

2026-01-29 10:04