1. 程式人生 > >WebView打不開或者顯示異常可能原因

WebView打不開或者顯示異常可能原因

原生對webview內的網頁操作空間有限,基本上是設定的問題

可能的疑難雜症問題和解決方案

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

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

HTML5 Storage主要有:
sessionStorage: 會話 (session) 級別的資料儲存,會話結束後,相關的資料就會被清除掉。
localStorage: 用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。
作為 html5 標準的一部分,絕大多數的瀏覽器都是支援 localStorage 的,但是鑑於它的安全特性(任何人都能讀取到它,儘管有相應的限制,將敏感資料儲存在這裡依然不是明智之舉),Android 預設是關閉該功能的。

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”)