Android加载本地H5页面显示白页面

报错信息:

"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.", source: file:///storage/emulated/0/Android/data/com.baidu.yy/cache/h5/cded73abd4131c0a544d508aa155b9c0/funterApp/assets/index-599bc40d.js (0)"

原因:Android系统WebView的Chrome浏览器版本太低,导致不支持es6开发的H5页面; es6开发的页面返回的MIMEType是空,导致页面内容不显示;

查看手机的:Android系统WebView的Chrome浏览器版本号信息,下面的代码亲测好用:

WebView mWebView = new WebView(mContext);
String userAgent = mWebView.getSettings().getUserAgentString();
Logger.d("WebViewVersion-Chromium版本----", userAgent);

日志打印:Mozilla/5.0 (Linux; Android 12; M2102J2SC Build/SKQ1.211006.001; wv) AppleWebKit/537.36 (KHTML, like Gecko)  Version/4.0      Chrome/96.0.4664.104 Mobile Safari/537.36

测试:Chrome/96.0 和 Chrome/92.0 都是白页,用了一个手机是:Chrome/116.0的可以正常显示。

解决方法:android拦截请求路径,给h5的文件设置mimeType


            @Nullable
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {


                Uri uri = request.getUrl();
                String path = uri.getPath();

                // 自定义处理路径
                if (path != null && path.startsWith("/storage/emulated/0/Android/data/com.baidu.yy/cache/h5/")) {
                    try {
                        // 处理文件请求
                        FileInputStream fileInputStream = new FileInputStream(path);
                        String mimeType = getH5MimeType(path);
                        return new WebResourceResponse(mimeType, "UTF-8", fileInputStream);

                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                return super.shouldInterceptRequest(view, request);

            }


private String getH5MimeType(String path) {
        if (path.endsWith(".js")) return "application/javascript";
        if (path.endsWith(".html")) return "text/html";
        if (path.endsWith(".css")) return "text/css";
        return "application/octet-stream";
    }

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值