代码在浏览器正常运行，Android WebView中Bootstrap及JS无法加载求助

这种情况我在开发中碰到过好多次，大概率是WebView的默认配置没到位导致的，咱们一步步来排查和解决：

1. 必须启用JavaScript #

WebView默认是禁用JavaScript的，而Bootstrap的功能完全依赖jQuery和自身的JS，所以第一步就是打开这个开关：

WebSettings webSettings = yourWebView.getSettings();
// 启用JavaScript
webSettings.setJavaScriptEnabled(true);

2. 允许混合内容加载（Android 5.0+） #

如果你的网页是http协议，而Bootstrap的CDN是https的，Android 5.0及以上版本默认会阻止这种混合内容的加载，需要手动开启：

// 允许混合内容，确保HTTPS资源能在HTTP页面里正常加载
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

3. 添加网络权限 #

别漏了在AndroidManifest.xml里添加网络权限，没有这个的话WebView根本没法请求CDN上的资源：

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

4. 处理Android 10+的明文流量限制 #

如果你的网页是http协议（或者本地file://协议加载远程HTTPS资源有问题），需要在AndroidManifest.xml的application标签里添加：

android:usesCleartextTraffic="true"

5. 避免拦截正常请求 #

如果你自定义了WebViewClient，要确保没有错误拦截CDN的请求。比如shouldOverrideUrlLoading方法要正确处理：

yourWebView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // 让WebView自己加载所有正常请求，不要拦截
        view.loadUrl(request.getUrl().toString());
        return true;
    }
});

备选方案：使用本地资源替代CDN #

如果以上配置都试过还是不行，建议把Bootstrap、jQuery的文件下载到本地，放到项目的assets目录下，然后修改index.html里的引用路径：

<link rel="stylesheet" href="file:///android_asset/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="file:///android_asset/jquery.min.js"></script>
<script src="file:///android_asset/bootstrap.min.js"></script>

这种方式不依赖网络，也能避免CDN加载的各种兼容性问题。

内容的提问来源于stack exchange，提问作者justTrying