webview部分內容偶爾載入不出來,html5在webview渲染問題
阿新 • • 發佈:2019-01-03
今天做專案時遇到webview部分內容偶爾載入不出來。
做的是一個抽獎的轉盤,其中轉盤部分是用h5的canvas寫的,測試發現有部分有手機根本載入不出來(聯想4.3),有的偶爾載入不出來(vivo5.0)
效果如下
後來反覆設定webview的setting仍然無效,貼出部分程式碼:
後來發現 webview的onPageFinished方法結束時,也就是頁面已經載入完了canvas仍然沒有渲染完畢,考慮到可能是canvas渲染的過早或過晚,經過測試發現在webview還沒開始載入的時候canvas已經渲染完了,所以在canvas渲染的時候可以延遲一些時間即可,雖然webview體驗會看到有些延遲,但是暫時魚和熊掌不可兼得,如有知道的兄弟可以留言。webview = (WebView) findViewById(R.id.webview); WebSettings settings = webview.getSettings(); settings.setJavaScriptEnabled(true); settings.setLoadWithOverviewMode(true); settings.setSupportZoom(true); settings.setDomStorageEnabled(true); settings.setCacheMode(WebSettings.LOAD_NO_CACHE); settings.setAllowFileAccess(true);// 設定允許訪問檔案資料 settings.setUseWideViewPort(true); settings.setSupportMultipleWindows(true); settings.setBlockNetworkImage(false);//同步請求圖片 webview.setVerticalScrollBarEnabled(true); webview.setHorizontalScrollBarEnabled(true); webview.loadUrl(url); webview.setWebViewClient(new WebViewClient() { public boolean shouldOverrideUrlLoading(WebView view, String url) { // 重寫此方法表明點選網頁裡面的連結還是在當前的webview裡跳轉,不跳到瀏覽器那邊 view.loadUrl(url); return false; } //重寫此方法可以讓webview處理https請求。 @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); } //在載入頁面資源時會呼叫,每一個資源(比如圖片)的載入都會呼叫一次。 @Override public void onLoadResource(WebView view, String url) { super.onLoadResource(view, url); } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { // showDialogLoading(); super.onPageStarted(view, url, favicon); } @Override public void onPageFinished(WebView view, String url) { // hideDialogLoading(); super.onPageFinished(view, url); } } );
貼上h5延時js程式碼
$("#canvas").hide();
setTimeout(function(){$("#canvas").show(),1000);
另外,google每次更新版本都會有webview做些改動,有些低版本不支援html5。