WebView適配問題彙總(持續更新)

1、網頁圖片寬高過大

有些時候,我們用WebView加載的網頁沒有對移動端進行適配,導致網頁中的圖片超出屏幕大小,影響顯示效果,這時我們就需要對WebView進行設置使網頁中的圖片大小適配移動端。

通過js腳本,重置img標籤中圖片的寬度和高度。

//開啓javascript支持
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //重置webview中img標籤的圖片大小
                view.loadUrl("javascript:(function(){" +
                        "var objs = document.getElementsByTagName('img'); " +
                        "for(var i=0;i<objs.length;i++) " +
                        "{"
                        + "var img = objs[i]; " +
                        " img.style.maxWidth = '100%'; img.style.height = 'auto'; " +
                        "}" +
                        "})()");
            }
        });

2、Https與Http混合請求問題

在Android5.0 以及以上的系統,當WebView加載的鏈接爲Https開頭,但是鏈接裏面的內容,比如圖片爲Http鏈接,這時候,圖片就會加載不出來,因爲從Android5.0開始,WebView默認不允許同時加載Https和Http,如果要更改,我們需要配置Webview加載內容的混合模式一共有如下三種模式:

  • MIXED_CONTENT_NEVER_ALLOW:Webview不允許一個安全的站點(https)去加載非安全的站點內容(http),比如,https網頁內容的圖片是http鏈接。(建議App使用這種模式,因爲這樣更安全
  • MIXED_CONTENT_ALWAYS_ALLOW:在這種模式下,WebView是可以在一個安全的站點(Https)里加載非安全的站點內容(Http)。(這個模式有可能會產生安全問題,儘可能地不要使用這種模式
  • MIXED_CONTENT_COMPATIBILITY_MODE:在這種模式下,當涉及到混合式內容時,WebView會嘗試去兼容最新Web瀏覽器的風格。一些不安全的內容(Http)能被加載到一個安全的站點上(Https),而其他類型的內容將會被阻塞。這些內容的類型是被允許加載還是被阻塞可能會隨着版本的不同而改變,並沒有明確的定義。(這種模式主要用於在App裏面不能控制內容的渲染,但是又希望在一個安全的環境下運行
     

3、禁止WebView長摁複製

  • 通過HTML禁止
//直接在HTML Style裏面加入以下代碼即可
<style type="text/css">
        *{
          -webkit-touch-callout:none;
          -webkit-user-select:none;
          -khtml-user-select:none;
          -moz-user-select:none;
          -ms-user-select:none;
          user-select:none;
        }
        input,textarea {
          -webkit-user-select:auto;
          margin: 0px;
          padding: 0px;
          outline: none;
        }
</style>
  • 通過WebView禁止
webview.setOnLongClickListener(new OnLongClickListener() {
    @Override
    public boolean onLongClick(View v) {
        return true;
        }
    });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章