WebView打不开或者显示异常可能原因

时间:2022-08-05 14:45:35

原生对webview内的网页操作空间有限,基本上是设置的问题

可能的疑难杂症问题和解决方案

1.Cannot read property ‘XXX’ of undefined at null

解决方案:
webView.getSettings().setDomStorageEnabled(true);

HTML5 Storage主要有:
sessionStorage: 会话 (session) 级别的数据存储,会话结束后,相关的数据就会被清除掉。
localStorage: 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
作为 html5 标准的一部分,绝大多数的浏览器都是支持 localStorage 的,但是鉴于它的安全特性(任何人都能读取到它,尽管有相应的限制,将敏感数据存储在这里依然不是明智之举),Android 默认是关闭该功能的。

参考Android WebView 无法打开天猫页面

2.混合https和http内容的时候,图片加载不出来,在浏览器中的Console会有如下警告- Mixed-content

解决方案:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

在Android5.0 以及以上的系统,当WebView加载的链接为Https开头,但是链接里面的内容,比如图片为Http链接,这时候,图片就会加载不出来,
从Android5.0以后,当一个安全的站点(https)去加载一个非安全的站点(http)时,需要配置Webview加载内容的混合模式,一共有如下三种模式:
MIXED_CONTENT_NEVER_ALLOW:Webview不允许一个安全的站点(https)去加载非安全的站点内容(http),比如,https网页内容的图片是http链接。强烈建议App使用这种模式,因为这样更安全。
MIXED_CONTENT_ALWAYS_ALLOW:在这种模式下,WebView是可以在一个安全的站点(Https)里加载非安全的站点内容(Http),这是WebView最不安全的操作模式,尽可能地不要使用这种模式。
MIXED_CONTENT_COMPATIBILITY_MODE:在这种模式下,当涉及到混合式内容时,WebView会尝试去兼容最新Web浏览器的风格。一些不安全的内容(Http)能被加载到一个安全的站点上(Https),而其他类型的内容将会被阻塞。这些内容的类型是被允许加载还是被阻塞可能会随着版本的不同而改变,并没有明确的定义。这种模式主要用于在App里面不能控制内容的渲染,但是又希望在一个安全的环境下运行。

常见的设置解释

settings.setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口,如window.open(),默认为false

settings.setJavaScriptEnabled(true);//是否允许执行js,默认为false。设置true时,会提醒可能造成XSS漏洞
settings.setSupportZoom(true);//是否可以缩放,默认true

settings.setBuiltInZoomControls(true);//是否显示缩放按钮,默认false

settings.setUseWideViewPort(true);//设置此属性,可任意比例缩放。大视图模式

settings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题

settings.setAppCacheEnabled(true);//是否使用缓存

settings.setDomStorageEnabled(true);//DOM Storage

// displayWebview.getSettings().setUserAgentString("User-Agent:Android");//设置用户代理,一般不用
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);//加载https和http混合模式
webview.setWebViewClient(new WebViewClient())//不设置 下一步的网页就会在原生浏览器中打开

其他设置
android 4.4以后webView的适配,setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN)失效,
更好替代方案
1.img后面加一个width=100%,或者是如果是加载的html,直接replaceAll(“< img “,”< img width=100% height=auto”)

2.参考Webview setLayoutAlgorithm