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;
        }
    });
发布了57 篇原创文章 · 获赞 26 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/Ever69/article/details/104547027