x5开源库后续知识点

4次阅读

共计 34134 个字符，预计需要花费 86 分钟才能阅读完成。

目录介绍

  • 01. 基础使用目录介绍

    • 1.0.1 常用的基础介绍
    • 1.0.2 Android 调用 Js
    • 1.0.3 Js 调用 Android
    • 1.0.4 WebView.loadUrl(url)流程
    • 1.0.5 js 的调用时机分析
    • 1.0.6 清除缓存数据方式有哪些
    • 1.0.7 如何使用 DeepLink
    • 1.0.8 应用被作为第三方浏览器打开

  • 02. 优化汇总目录介绍

    • 2.0.1 视频全屏播放按返回页面被放大
    • 2.0.2 加快加载 webView 中的图片资源
    • 2.0.3 自定义加载异常 error 的状态页面
    • 2.0.4 WebView 硬件加速导致页面渲染闪烁
    • 2.0.5 WebView 加载证书错误
    • 2.0.6 web 音频播放销毁后还有声音
    • 2.0.7 DNS 采用和客户端 API 相同的域名
    • 2.0.8 如何设置白名单操作
    • 2.0.9 后台无法释放 js 导致发热耗电
    • 2.1.0 可以提前显示加载进度条
    • 2.1.1 WebView 密码明文存储漏洞优化

  • 03. 问题汇总目录介绍

    • 3.0.0 WebView 进化史介绍
    • 3.0.1 提前初始化 WebView 必要性
    • 3.0.2 x5 加载 office 资源
    • 3.0.3 WebView 播放视频问题
    • 3.0.4 无法获取 webView 的正确高度
    • 3.0.5 使用 scheme 协议打开链接风险
    • 3.0.6 如何处理加载错误
    • 3.0.7 webView 防止内存泄漏
    • 3.0.8 关于 js 注入时机修改
    • 3.0.9 视频 / 图片宽度超过屏幕
    • 3.1.0 如何保证 js 安全性
    • 3.1.1 如何代码开启硬件加速
    • 3.1.2 WebView 设置 Cookie
    • 3.1.4 webView 加载网页不显示图片
    • 3.1.5 绕过证书校验漏洞
    • 3.1.6 allowFileAccess 漏洞
    • 3.1.7 WebView 嵌套 ScrollView 问题
    • 3.1.8 WebView 中图片点击放大
    • 3.1.9 页面滑动期间不渲染 / 执行
    • 3.2.0 被运营商劫持和注入问题
    • 3.2.1 解决资源加载缓慢问题
    • 3.2.2 判断是否已经滚动到页面底端
    • 3.2.3 使用 loadData 加载 html 乱码
    • 3.2.4 WebView 下载进度无法监听
    • 3.2.5 webView 出现 302/303 重定向

x5 封装库 YCWebView 开源项目地址

  • https://github.com/yangchong2…
  • 该后续知识点，几乎包含了实际开发中绝大多数的问题，再次学习和巩固 webView，希望这篇文章对你有用……更多内容，可以看我的开源项目，如果觉得给你带来一些收获，麻烦 star 一下，这也可以增加开发者开源项目的动力！

01. 基础使用目录介绍

1.0.1 常用的基础介绍

  • 在 activity 中最简单的使用

    webview.loadUrl("http://www.baidu.com/");                    // 加载 web 资源
//webView.loadUrl("file:///android_asset/example.html");       // 加载本地资源
// 这个时候发现一个问题，启动应用后，自动的打开了系统内置的浏览器，解决这个问题需要为 webview 设置 WebViewClient，并重写方法：webview.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);
        // 返回值是 true 的时候控制去 WebView 打开，为 false 调用系统浏览器或第三方浏览器
        return true;
    }
    // 还可以重写其他的方法
});

  • 那些因素影响页面加载速度

    • 影响页面加载速度的因素有非常多，在对 WebView 加载一个网页的过程进行调试发现

      • 每次加载的过程中都会有较多的网络请求，除了 web 页面自身的 URL 请求
      • 有 web 页面外部引用的 JS、CSS、字体、图片等等都是个独立的 http 请求。这些请求都是串行的，这些请求加上浏览器的解析、渲染时间就会导致 WebView 整体加载时间变长，消耗的流量也对应的真多。

1.0.2 Android 调用 Js

  • 第一种方式：native 调用 js 的方法，方法为：

    • 注意的是名字一定要对应上，要不然是调用不成功的，而且还有一点是 JS 的调用一定要在 onPageFinished 函数回调之后才能调用，要不然也是会失败的。
    //java
// 调用无参方法
mWebView.loadUrl("javascript:callByAndroid()");
// 调用有参方法
mWebView.loadUrl("javascript:showData(" + result + ")");

//javascript，下面是对应的 js 代码
<script type="text/javascript">

function showData(result){alert("result"=result);
    return "success";
}

function callByAndroid(){console.log("callByAndroid")
    showElement("Js: 无参方法 callByAndroid 被调用");
}
</script>

  • 第二种方式：

    • 如果现在有需求，我们要得到一个 Native 调用 Web 的回调怎么办，Google 在 Android4.4 为我们新增加了一个新方法，这个方法比 loadUrl 方法更加方便简洁，而且比 loadUrl 效率更高，因为 loadUrl 的执行会造成页面刷新一次，这个方法不会，因为这个方法是在 4.4 版本才引入的，所以使用的时候需要添加版本的判断：
    if (Build.VERSION.SDK_INT < 18) {mWebView.loadUrl(jsStr);
} else {mWebView.evaluateJavascript(jsStr, new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {// 此处为 js 返回的结果}
    });
}

  • 两种方式的对比

    • 一般最常使用的就是第一种方法，但是第一种方法获取返回的值比较麻烦，而第二种方法由于是在 4.4 版本引入的，所以局限性比较大。

  • 注意问题

    • 记得添加 ws.setJavaScriptEnabled(true)代码

1.0.3 Js 调用 Android

  • 第一种方式：通过 addJavascriptInterface 方法进行添加对象映射

    • 这种是使用最多的方式了，首先第一步我们需要设置一个属性：
    mWebView.getSettings().setJavaScriptEnabled(true);

    • 这个函数会有一个警告，因为在特定的版本之下会有非常危险的漏洞，设置完这个属性之后，Native 需要定义一个类：

      • 在 API17 版本之后，需要在被调用的地方加上 @addJavascriptInterface 约束注解，因为不加上注解的方法是没有办法被调用的
public class JSObject {
    private Context mContext;
    public JSObject(Context context) {mContext = context;}

    @JavascriptInterface
    public String showToast(String text) {Toast.show(mContext, text, Toast.LENGTH_SHORT).show();
        return "success";
    }
    
    /**
     * 前端代码嵌入 js：* imageClick 名应和 js 函数方法名一致
     *
     * @param src 图片的链接
     */
    @JavascriptInterface
    public void imageClick(String src) {Log.e("imageClick", "---- 点击了图片");
    }
    
    /**
     * 网页使用的 js，方法无参数
     */
    @JavascriptInterface
    public void startFunction() {Log.e("startFunction", "---- 无参");
    }
}

// 特定版本下会存在漏洞
mWebView.addJavascriptInterface(new JSObject(this), "yc 逗比");
- JS 代码调用
    - 这种方式的好处在于使用简单明了，本地和 JS 的约定也很简单，就是对象名称和方法名称约定好即可，缺点就是要提到的漏洞问题。```
function showToast(){var result = myObj.showToast("我是来自 web 的 Toast");
}

function showToast(){myObj.imageClick("图片");
}

function showToast(){myObj.startFunction();
}
```

  • 第二种方式：利用 WebViewClient 接口回调方法拦截 url

    • 这种方式其实实现也很简单，使用的频次也很高，上面介绍到了 WebViewClient，其中有个回调接口 shouldOverrideUrlLoading (WebView view, String url))，就是利用这个拦截 url，然后解析这个 url 的协议，如果发现是我们预先约定好的协议就开始解析参数，执行相应的逻辑。注意这个方法在 API24 版本已经废弃了，需要使用 shouldOverrideUrlLoading (WebView view, WebResourceRequest request)) 替代，使用方法很类似，我们这里就使用 shouldOverrideUrlLoading (WebView view, String url)) 方法来介绍一下：

      • 代码很简单，这个方法可以拦截 WebView 中加载 url 的过程，得到对应的 url，我们就可以通过这个方法，与网页约定好一个协议，如果匹配，执行相应操作。
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // 假定传入进来的 url = "js://openActivity?arg1=111&arg2=222"，代表需要打开本地页面，并且带入相应的参数
    Uri uri = Uri.parse(url);
    String scheme = uri.getScheme();
    // 如果 scheme 为 js，代表为预先约定的 js 协议
    if (scheme.equals("js")) {
          // 如果 authority 为 openActivity，代表 web 需要打开一个本地的页面
        if (uri.getAuthority().equals("openActivity")) {
              // 解析 web 页面带过来的相关参数
            HashMap<String, String> params = new HashMap<>();
            Set<String> collection = uri.getQueryParameterNames();
            for (String name : collection) {params.put(name, uri.getQueryParameter(name));
            }
            Intent intent = new Intent(getContext(), MainActivity.class);
            intent.putExtra("params", params);
            getContext().startActivity(intent);
        }
        // 代表应用内部处理完成
        return true;
    }
    return super.shouldOverrideUrlLoading(view, url);
}
- JS 代码调用
```
function openActivity(){document.location = "js://openActivity?arg1=111&arg2=222";}
```
- 存在问题：这个代码执行之后，就会触发本地的 shouldOverrideUrlLoading 方法，然后进行参数解析，调用指定方法。这个方式不会存在第一种提到的漏洞问题，但是它也有一个很繁琐的地方是，如果 web 端想要得到方法的返回值，只能通过 WebView 的 loadUrl 方法去执行 JS 方法把返回值传递回去，相关的代码如下：```
//java
mWebView.loadUrl("javascript:returnResult(" + result + ")");

//javascript
function returnResult(result){alert("result is" + result);
}
```

  • 第三种方式：利用 WebChromeClient 回调接口的三个方法拦截消息

    • 这个方法的原理和第二种方式原理一样，都是拦截相关接口，只是拦截的接口不一样：
    @Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {return super.onJsAlert(view, url, message, result);
}

@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {return super.onJsConfirm(view, url, message, result);
}

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    // 假定传入进来的 message = "js://openActivity?arg1=111&arg2=222"，代表需要打开本地页面，并且带入相应的参数
    Uri uri = Uri.parse(message);
    String scheme = uri.getScheme();
    if (scheme.equals("js")) {if (uri.getAuthority().equals("openActivity")) {HashMap<String, String> params = new HashMap<>();
            Set<String> collection = uri.getQueryParameterNames();
            for (String name : collection) {params.put(name, uri.getQueryParameter(name));
            }
            Intent intent = new Intent(getContext(), MainActivity.class);
            intent.putExtra("params", params);
            getContext().startActivity(intent);
            // 代表应用内部处理完成
            result.confirm("success");
        }
        return true;
    }
    return super.onJsPrompt(view, url, message, defaultValue, result);
}

    • 和 WebViewClient 一样，这次添加的是 WebChromeClient 接口，可以拦截 JS 中的几个提示方法，也就是几种样式的对话框，在 JS 中有三个常用的对话框方法：

      • onJsAlert 方法是弹出警告框，一般情况下在 Android 中为 Toast，在文本里面加入 n 就可以换行；
      • onJsConfirm 弹出确认框，会返回布尔值，通过这个值可以判断点击时确认还是取消，true 表示点击了确认，false 表示点击了取消；
      • onJsPrompt 弹出输入框，点击确认返回输入框中的值，点击取消返回 null。
    • 但是这三种对话框都是可以本地拦截到的，所以可以从这里去做一些更改，拦截这些方法，得到他们的内容，进行解析，比如如果是 JS 的协议，则说明为内部协议，进行下一步解析然后进行相关的操作即可，prompt 方法调用如下所示：
    function clickprompt(){var result=prompt("js://openActivity?arg1=111&arg2=222");
    alert("open activity" + result);
}
    • 需要注意的是 prompt 里面的内容是通过 message 传递过来的，并不是第二个参数的 url，返回值是通过 JsPromptResult 对象传递。为什么要拦截 onJsPrompt 方法，而不是拦截其他的两个方法，这个从某种意义上来说都是可行的，但是如果需要返回值给 web 端的话就不行了，因为 onJsAlert 是不能返回值的，而 onJsConfirm 只能够返回确定或者取消两个值，只有 onJsPrompt 方法是可以返回字符串类型的值，操作最全面方便。

  • 以上三种方案的总结和对比

    • 以上三种方案都是可行的，在这里总结一下
    • 第一种方式：是现在目前最普遍的用法，方便简洁，但是唯一的不足是在 4.2 系统以下存在漏洞问题；
    • 第二种方式：通过拦截 url 并解析，如果是已经约定好的协议则进行相应规定好的操作，缺点就是协议的约束需要记录一个规范的文档，而且从 Native 层往 Web 层传递值比较繁琐，优点就是不会存在漏洞，iOS7 之下的版本就是使用的这种方式。
    • 第三种方式：和第二种方式的思想其实是类似的，只是拦截的方法变了，这里拦截了 JS 中的三种对话框方法，而这三种对话框方法的区别就在于返回值问题，alert 对话框没有返回值，confirm 的对话框方法只有两种状态的返回值，prompt 对话框方法可以返回任意类型的返回值，缺点就是协议的制定比较麻烦，需要记录详细的文档，但是不会存在第二种方法的漏洞问题。

1.0.4 WebView.loadUrl(url)流程

  • WebView.loadUrl(url)加载网页做了什么？

    • 加载网页是一个复杂的过程，在这个过程中，我们可能需要执行一些操作，包括：
    • 加载网页前，重置 WebView 状态以及与业务绑定的变量状态。WebView 状态包括重定向状态 (mTouchByUser)、前端控制的回退栈(mBackStep) 等，业务状态包括进度条、当前页的分享内容、分享按钮的显示隐藏等。
    • 加载网页前，根据不同的域拼接本地客户端的参数，包括基本的机型信息、版本信息、登录信息以及埋点使用的 Refer 信息等，有时候涉及交易、财产等还需要做额外的配置。
    • 开始执行页面加载操作时，会回调 WebViewClient.onPageStarted(webview,url,favicon)。在此方法中，可以重置重定向保护的变量(mRedirectProtected)，当然也可以在页面加载前重置，由于历史遗留代码问题，此处尚未省去优化。
    • 加载页面的过程中，WebView 会回调几个方法。
    • 页面加载结束后，WebView 会回调几个方法。

  • 加载页面的过程中回调哪些方法？

    • WebChromeClient.onReceivedTitle(webview, title)，用来设置标题。需要注意的是，在部分 Android 系统版本中可能会回调多次这个方法，而且有时候回调的 title 是一个 url，客户端可以针对这种情况进行特殊处理，避免在标题栏显示不必要的链接。
    • WebChromeClient.onProgressChanged(webview, progress)，根据这个回调，可以控制进度条的进度（包括显示与隐藏）。一般情况下，想要达到 100% 的进度需要的时间较长（特别是首次加载），用户长时间等待进度条不消失必定会感到焦虑，影响体验。其实当 progress 达到 80 的时候，加载出来的页面已经基本可用了。事实上，国内厂商大部分都会提前隐藏进度条，让用户以为网页加载很快。
    • WebViewClient.shouldInterceptRequest(webview, request)，无论是普通的页面请求(使用 GET/POST)，还是页面中的异步请求，或者页面中的资源请求，都会回调这个方法，给开发一次拦截请求的机会。在这个方法中，我们可以进行静态资源的拦截并使用缓存数据代替，也可以拦截页面，使用自己的网络框架来请求数据。包括后面介绍的 WebView 免流方案，也和此方法有关。
    • WebViewClient.shouldOverrideUrlLoading(webview, request)，如果遇到了重定向，或者点击了页面中的 a 标签实现页面跳转，那么会回调这个方法。可以说这个是 WebView 里面最重要的回调之一，后面 WebView 与 Native 页面交互一节将会详细介绍这个方法。
    • WebViewClient.onReceivedError(webview,handler,error)，加载页面的过程中发生了错误，会回调这个方法。主要是 http 错误以及 ssl 错误。在这两个回调中，我们可以进行异常上报，监控异常页面、过期页面，及时反馈给运营或前端修改。在处理 ssl 错误时，遇到不信任的证书可以进行特殊处理，例如对域名进行判断，针对自己公司的域名“放行”，防止进入丑陋的错误证书页面。也可以与 Chrome 一样，弹出 ssl 证书疑问弹窗，给用户选择的余地。

  • 加载页面结束回调哪些方法

    • 会回调 WebViewClient.onPageFinished(webview,url)。
    • 这时候可以根据回退栈的情况判断是否显示关闭 WebView 按钮。通过 mActivityWeb.canGoBackOrForward(-1)判断是否可以回退。

1.0.5 js 的调用时机分析

  • onPageFinished()或者 onPageStarted()方法中注入 js 代码

    • 做过 WebView 开发，并且需要和 js 交互，大部分都会认为 js 在 WebViewClient.onPageFinished()方法中注入最合适，此时 dom 树已经构建完成，页面已经完全展现出来。但如果做过页面加载速度的测试，会发现 WebViewClient.onPageFinished()方法通常需要等待很久才会回调（首次加载通常超过 3s），这是因为 WebView 需要加载完一个网页里主文档和所有的资源才会回调这个方法。
    • 能不能在 WebViewClient.onPageStarted()中注入呢？答案是不确定。经过测试，有些机型可以，有些机型不行。在 WebViewClient.onPageStarted()中注入还有一个致命的问题——这个方法可能会回调多次，会造成 js 代码的多次注入。
    • 从 7.0 开始，WebView 加载 js 方式发生了一些小改变，官方建议把 js 注入的时机放在页面开始加载之后。

  • WebViewClient.onProgressChanged()方法中注入 js 代码

    • WebViewClient.onProgressChanged()这个方法在 dom 树渲染的过程中会回调多次，每次都会告诉我们当前加载的进度。

      • 在这个方法中，可以给 WebView 自定义进度条，类似微信加载网页时的那种进度条
      • 如果在此方法中注入 js 代码，则需要避免重复注入，需要增强逻辑。可以定义一个 boolean 值变量控制注入时机

    • 那么有人会问，加载到多少才需要处理 js 注入逻辑呢？

      • 正是因为这个原因，页面的进度加载到 80% 的时候，实际上 dom 树已经渲染得差不多了，表明 WebView 已经解析了 <html> 标签，这时候注入一定是成功的。在 WebViewClient.onProgressChanged()实现 js 注入有几个需要注意的地方：
      • 1 上文提到的多次注入控制，使用了 boolean 值变量控制
      • 2 重新加载一个 URL 之前，需要重置 boolean 值变量，让重新加载后的页面再次注入 js
      • 3 如果做过本地 js，css 等缓存，则先判断本地是否存在，若存在则加载本地，否则加载网络 js
      • 4 注入的进度阈值可以自由定制，理论上 10%-100% 都是合理的，不过建议使用了 75% 到 90% 之间可以。

1.0.6 清除缓存数据方式有哪些

  • 清除缓存数据的方法有哪些？

    // 清除网页访问留下的缓存
// 由于内核缓存是全局的因此这个方法不仅仅针对 webview 而是针对整个应用程序.
Webview.clearCache(true);

// 清除当前 webview 访问的历史记录 // 只会 webview 访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；// 这个 api 仅仅清除自动完成填充的表单数据，并不会清除 WebView 存储到本地的数据
Webview.clearFormData()；

1.0.7 如何使用 DeepLink

  • 具体可以看这篇文章：https://www.jianshu.com/p/127…

1.0.8 应用被作为第三方浏览器打开

  • 微信里的文章页面，可以选择“在浏览器打开”。现在很多应用都内嵌了 WebView，那是否可以使自己的应用作为第三方浏览器打开此文章呢？

  • 在 Manifest 文件中，给想要接收跳转的 Activity 添加 <intent-filter> 配置：

    <activity
    android:name=".X5WebViewActivity"
    android:configChanges="orientation|screenSize"
    android:hardwareAccelerated="true"
    android:launchMode="singleTask"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
    <!-- 需要添加下面的 intent-filter 配置 -->
    <intent-filter tools:ignore="AppLinkUrlError">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- 使用 http，则只能打开 http 开头的网页 -->
        <data android:scheme="https" />
    </intent-filter>
</activity>

  • 然后在 X5WebViewActivity 中获取相关传递数据。具体可以看 lib 中的 X5WebViewActivity 类代码。

    public class X5WebViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        getIntentData();
        initTitle();
        initWebView();
        webView.loadUrl(mUrl);
       // 处理 作为三方浏览器打开传过来的值
        getDataFromBrowser(getIntent());
    }

   /**
     * 使用 singleTask 启动模式的 Activity 在系统中只会存在一个实例。* 如果这个实例已经存在，intent 就会通过 onNewIntent 传递到这个 Activity。
     */
    @Override
    protected void onNewIntent(Intent intent) {super.onNewIntent(intent);
        getDataFromBrowser(intent);
    }

    /**
     * 作为三方浏览器打开传过来的值
     * Scheme: https
     * host: www.jianshu.com
     * path: /p/yc
     * url = scheme + "://" + host + path;
     */
    private void getDataFromBrowser(Intent intent) {Uri data = intent.getData();
        if (data != null) {
            try {String scheme = data.getScheme();
                String host = data.getHost();
                String path = data.getPath();
                String text = "Scheme:" + scheme + "\n" + "host:" + host + "\n" + "path:" + path;
                Log.e("data", text);
                String url = scheme + "://" + host + path;
                webView.loadUrl(url);
            } catch (Exception e) {e.printStackTrace();
            }
        }
    }
}
```

  • 一些重点说明

    • 在微信中“通过浏览器”打开自己的应用，然后将自己的应用切到后台。重复上面的操作，会一直创建应用的实例，这样肯定是不好的，为了避免这种情况我们设置启动模式为：launchMode=”singleTask”。

02. 优化汇总目录介绍

2.0.1 视频全屏播放按返回页面被放大（部分手机出现)

  • 至于原因暂时没有找到，解决方案如下所示

    /**
 * 当缩放改变的时候会调用该方法
 * @param view                              view
 * @param oldScale                          之前的缩放比例
 */
@Override
public void onScaleChanged(WebView view, float oldScale, float newScale) {super.onScaleChanged(view, oldScale, newScale);
    // 视频全屏播放按返回页面被放大的问题
    if (newScale - oldScale > 7) {
        // 异常放大，缩回去。view.setInitialScale((int) (oldScale / newScale * 100));
    }
}
```

2.0.2 加载 webView 中的资源时，加快加载的速度优化，主要是针对图片

  • html 代码下载到 WebView 后，webkit 开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但如果在这之前也有解析到 image 节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求就会造成带宽紧张，影响到 css 或 js 文件加载完成的时间，造成页面空白 loading 过久。解决的方法就是告诉 WebView 先不要自动加载图片，等页面 finish 后再发起图片加载。

    // 初始化的时候设置，具体代码在 X5WebView 类中
if(Build.VERSION.SDK_INT >= KITKAT) {
    // 设置网页在加载的时候暂时不加载图片
    ws.setLoadsImagesAutomatically(true);
} else {ws.setLoadsImagesAutomatically(false);
}

/**
 * 当页面加载完成会调用该方法
 * @param view                              view
 */
@Override
public void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);
    // 页面 finish 后再发起图片加载
    if(!webView.getSettings().getLoadsImagesAutomatically()) {webView.getSettings().setLoadsImagesAutomatically(true);
    }
}
```

2.0.3 自定义加载异常 error 的状态页面，比如下面这些方法中可能会出现 error

  • 当 WebView 加载页面出错时（一般为 404 NOT FOUND），安卓 WebView 会默认显示一个出错界面。当 WebView 加载出错时，会在 WebViewClient 实例中的 onReceivedError()，还有 onReceivedTitle 方法接收到错误

    /**
 * 请求网络出现 error
 * @param view                              view
 * @param errorCode                         错误????
 * @param description                       description
 */
@Override
public void onReceivedError(WebView view, int errorCode, String description, String
        failingUrl) {super.onReceivedError(view, errorCode, description, failingUrl);
    if (errorCode == 404) {
        // 用 javascript 隐藏系统定义的 404 页面信息
        String data = "Page NO FOUND！";
        view.loadUrl("javascript:document.body.innerHTML=\"" + data + "\"");
    } else {if (webListener!=null){webListener.showErrorView();
        }
    }
}

// 向主机应用程序报告 Web 资源加载错误。这些错误通常表明无法连接到服务器。// 值得注意的是，不同的是过时的版本的回调，新的版本将被称为任何资源（iframe，图像等）// 不仅为主页。因此，建议在回调过程中执行最低要求的工作。// 6.0 之后
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {super.onReceivedError(view, request, error);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {X5WebUtils.log("服务器异常"+error.getDescription().toString());
    }
    //ToastUtils.showToast("服务器异常 6.0 之后");
    // 当加载错误时，就让它加载本地错误网页文件
    //mWebView.loadUrl("file:///android_asset/errorpage/error.html");
    if (webListener!=null){webListener.showErrorView();
    }
}

/**
 * 这个方法主要是监听标题变化操作的
 * @param view                              view
 * @param title                             标题
 */
@Override
public void onReceivedTitle(WebView view, String title) {super.onReceivedTitle(view, title);
    if (title.contains("404") || title.contains("网页无法打开")){if (webListener!=null){webListener.showErrorView();
        }
    } else {// 设置 title}
}
```

2.0.4 WebView 硬件加速导致页面渲染闪烁

  • 4.0 以上的系统我们开启硬件加速后，WebView 渲染页面更加快速，拖动也更加顺滑。但有个副作用就是，当 WebView 视图被整体遮住一块，然后突然恢复时（比如使用 SlideMenu 将 WebView 从侧边滑出来时），这个过渡期会出现白块同时界面闪烁。解决这个问题的方法是在过渡期前将 WebView 的硬件加速临时关闭，过渡期后再开启

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

2.0.5 WebView 加载证书错误

  • webView 加载一些别人的 url 时候，有时候会发生证书认证错误的情况，这时候我们希望能够正常的呈现页面给用户，我们需要忽略证书错误，需要调用 WebViewClient 类的 onReceivedSslError 方法，调用 handler.proceed()来忽略该证书错误。

    /**
 * 在加载资源时通知主机应用程序发生 SSL 错误
 * 作用：处理 https 请求
 * @param view                              view
 * @param handler                           handler
 */
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {super.onReceivedSslError(view, handler, error);
    if (error!=null){String url = error.getUrl();
        X5WebUtils.log("onReceivedSslError---- 异常 url----"+url);
    }
    //https 忽略证书问题
    if (handler!=null){
        // 表示等待证书响应
        handler.proceed();
        // handler.cancel();      // 表示挂起连接，为默认方式
        // handler.handleMessage(null);    // 可做其他处理
    }
}
```

2.0.6 web 音频播放销毁后还有声音

  • WebView 页面中播放了音频, 退出 Activity 后音频仍然在播放，需要在 Activity 的 onDestory()中调用

    @Override
protected void onDestroy() {
    try {
        // 有音频播放的 web 页面的销毁逻辑
        // 在关闭了 Activity 时，如果 Webview 的音乐或视频，还在播放。就必须销毁 Webview
        // 但是注意：webview 调用 destory 时,webview 仍绑定在 Activity 上
        // 这是由于自定义 webview 构建时传入了该 Activity 的 context 对象
        // 因此需要先从父容器中移除 webview, 然后再销毁 webview:
        if (webView != null) {ViewGroup parent = (ViewGroup) webView.getParent();
            if (parent != null) {parent.removeView(webView);
            }
            webView.removeAllViews();
            webView.destroy();
            webView = null;
        }
    } catch (Exception e) {Log.e("X5WebViewActivity", e.getMessage());
    }
    super.onDestroy();}

2.0.7 DNS 采用和客户端 API 相同的域名

  • 建立连接 / 服务器处理；在页面请求的数据返回之前，主要有以下过程耗费时间。

    DNS
connection
服务器处理

  • DNS 采用和客户端 API 相同的域名

    • DNS 会在系统级别进行缓存，对于 WebView 的地址，如果使用的域名与 native 的 API 相同，则可以直接使用缓存的 DNS 而不用再发起请求图片。
    • 举个简单例子，客户端请求域名主要位于 api.yc.com，然而内嵌的 WebView 主要位于 i.yc.com。
    • 当我们初次打开 App 时：客户端首次打开都会请求 api.yc.com，其 DNS 将会被系统缓存。然而当打开 WebView 的时候，由于请求了不同的域名，需要重新获取 i.yc.com 的 IP。静态资源同理，最好与客户端的资源域名保持一致。

2.0.8 如何设置白名单操作

  • 客户端内的 WebView 都是可以通过客户端的某个 schema 打开的，而要打开页面的 URL 很多都并不写在客户端内，而是可以由 URL 中的参数传递过去的。上面 4.0.5 使用 scheme 协议打开链接风险已经说明了 scheme 使用的危险性，那么如何避免这个问题了，设置运行访问的白名单。或者当用户打开外部链接前给用户强烈而明显的提示。具体操作如下所示：

    • 在 onPageStarted 开始加载资源的方法中，获取加载 url 的 host 值，然后和本地保存的合法 host 做比较，这里 domainList 是一个数组
    @Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);
    String host = Uri.parse(url).getHost();
    LoggerUtils.i("host:" + host);
    if (!BuildConfig.IS_DEBUG) {if (Arrays.binarySearch(domainList, host) < 0) {// 不在白名单内，非法网址，这个时候给用户强烈而明显的提示} else {// 合法网址}
    }
}
  • 设置白名单操作其实和过滤广告是一个意思，这里你可以放一些合法的网址允许访问。

2.0.9 后台无法释放 js 导致发热耗电

  • 在有些手机你如果 webView 加载的 html 里，有一些 js 一直在执行比如动画之类的东西，如果此刻 webView 挂在了后台这些资源是不会被释放用户也无法感知。

  • 导致一直占有 cpu 耗电特别快，所以如果遇到这种情况，处理方式如下所示。大概意思就是在后台的时候，会调用 onStop 方法，即此时关闭 js 交互，回到前台调用 onResume 再开启 js 交互。

    // 在 onStop 里面设置 setJavaScriptEnabled(false);
// 在 onResume 里面设置 setJavaScriptEnabled(true)。@Override
protected void onResume() {super.onResume();
    if (mWebView != null) {mWebView.getSettings().setJavaScriptEnabled(true);
    }
}
@Override
protected void onStop() {super.onStop();
    if (mWebView != null) {mWebView.getSettings().setJavaScriptEnabled(false);
    }
}

2.1.0 可以提前显示加载进度条

  • 提前显示进度条不是提升性能，但是对用户体验来说也是很重要的一点，WebView.loadUrl(“url”) 不会立马就回调 onPageStarted 或者 onProgressChanged 因为在这一时间段，WebView 有可能在初始化内核，也有可能在与服务器建立连接，这个时间段容易出现白屏，白屏用户体验是很糟糕的，所以建议

    // 正确
pb.setVisibility(View.VISIBLE);
mWebView.loadUrl("https://github.com/yangchong211/LifeHelper");

// 不太好
@Override
public void onPageStarted(WebView webView, String s, Bitmap bitmap) {super.onPageStarted(webView, s, bitmap);
    // 设定加载开始的操作
    pb.setVisibility(View.VISIBLE);
}

// 下面这个是监听进度条进度变化的逻辑
mWebView.getX5WebChromeClient().setWebListener(interWebListener);
mWebView.getX5WebViewClient().setWebListener(interWebListener);
private InterWebListener interWebListener = new InterWebListener() {
    @Override
    public void hindProgressBar() {pb.setVisibility(View.GONE);
    }

    @Override
    public void showErrorView() {}

    @Override
    public void startProgress(int newProgress) {pb.setProgress(newProgress);
    }

    @Override
    public void showTitle(String title) {}};

2.1.1 WebView 密码明文存储漏洞优化

  • WebView 默认开启密码保存功能 mWebView.setSavePassword(true)，如果该功能未关闭，在用户输入密码时，会弹出提示框，询问用户是否保存密码，如果选择”是”，密码会被明文保到 /data/data/com.package.name/databases/webview.db 中，这样就有被盗取密码的危险，所以需要通过 WebSettings.setSavePassword(false) 关闭密码保存提醒功能。

    • 具体代码操作如下所示
    / 设置是否开启密码保存功能，不建议开启，默认已经做了处理，存在盗取密码的危险
mX5WebView.setSavePassword(false);

03. 问题汇总目录介绍

3.0.0 WebView 进化史介绍

  • 进化史如下所示

    • 从 Android4.4 系统开始，Chromium 内核取代了 Webkit 内核。
    • 从 Android5.0 系统开始，WebView 移植成了一个独立的 apk，可以不依赖系统而独立存在和更新。
    • 从 Android7.0 系统开始，如果用户手机里安装了 Chrome，系统优先选择 Chrome 为应用提供 WebView 渲染。
    • 从 Android8.0 系统开始，默认开启 WebView 多进程模式，即 WebView 运行在独立的沙盒进程中。

3.0.1 提前初始化 WebView 必要性

  • 第一次打开 Web 面，使用 WebView 加载页面的时候特别慢，第二次打开就能明显的感觉到速度有提升，为什么？

    • 是因为在你第一次加载页面的时候 WebView 内核并没有初始化，所以在第一次加载页面的时候需要耗时去初始化 WebView 内核。
    • 提前初始化 WebView 内核，例如如下把它放到了 Application 里面去初始化 , 在页面里可以直接使用该 WebView，这种方法可以比较有效的减少 WebView 在 App 中的首次打开时间。当用户访问页面时，不需要初始化 WebView 的时间。
    • 但是这样也有不好的地方，额外的内存消耗。页面间跳转需要清空上一个页面的痕迹，更容易内存泄露。

3.0.2 x5 加载 office 资源

  • 关于加载 word，pdf，xls 等文档文件注意事项：Tbs 不支持加载网络的文件，需要先把文件下载到本地，然后再加载出来
  • 还有一点要注意，在 onDestroy 方法中调用此方法 mTbsReaderView.onStop()，否则第二次打开无法浏览。更多可以看 FileReaderView 类代码！

3.0.3 WebView 播放视频问题

  • 1、此次的方案用到 WebView，而且其中会有视频嵌套，在默认的 WebView 中直接播放视频会有问题，而且不同的 SDK 版本情况还不一样，网上搜索了下解决方案，在此记录下. webView.getSettings.setPluginState(PluginState.ON);webView.setWebChromeClient(new WebChromeClient());
  • 2、然后在 webView 的 Activity 配置里面加上：android:hardwareAccelerated=”true”
  • 3、以上可以正常播放视频了，但是 webview 的页面都 finish 了居然还能听 到视频播放的声音，于是又查了下发现 webview 的 onResume 方法可以继续播放，onPause 可以暂停播放，但是这两个方法都是在 Added in API level 11 添加的，所以需要用反射来完成。
  • 4、停止播放：在页面的 onPause 方法中使用：webView.getClass().getMethod(“onPause”).invoke(webView, (Object[])null);
  • 5、继续播放：在页面的 onResume 方法中使用：webView.getClass().getMethod(“onResume”).invoke(webView,(Object[])null); 这样就可以控制视频的暂停和继续播放了。

3.0.4 无法获取 webView 的正确高度

  • 偶发情况，获取不到 webView 的内容高度

    • 其中 htmlString 是一个 HTML 格式的字符串。
    webView.loadData(htmlString, "text/html", "utf-8");
webView.setWebViewClient(new WebViewClient() {public void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);
        Log.d("yc", view.getContentheight() + "");
    }
});
    • 这是因为 onPageFinished 回调指的 WebView 已经完成从网络读取的字节数，这一点。在点 onPageFinished 被激发的页面可能还没有被解析。

  • 第一种解决办法：提供 onPageFinished（）一些延迟

    webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);
        webView.postDelayed(new Runnable() {
            @Override
            public void run() {int contentHeight = webView.getContentHeight();
                int viewHeight = webView.getHeight();}
        }, 500);
    }
});
  • 第二种解决办法：使用 js 获取内容高度，具体可以看这篇文章：https://www.jianshu.com/p/ad2…

3.0.5 使用 scheme 协议打开链接风险

  • 常见的用法是在 APP 获取到来自网页的数据后，重新生成一个 intent，然后发送给别的组件使用这些数据。比如使用 Webview 相关的 Activity 来加载一个来自网页的 url，如果此 url 来自 url scheme 中的参数，如：yc://ycbjie:8888/from?load_url=http://www.taobao.com。

    • 如果在 APP 中，没有检查获取到的 load_url 的值，攻击者可以构造钓鱼网站，诱导用户点击加载，就可以盗取用户信息。
    • 这个时候，别人非法篡改参数，于是将 scheme 协议改成 yc://ycbjie:8888/from?load_url=http://www.doubi.com。这个时候点击进去即可进入钓鱼链接地址。

  • 使用建议

    • APP 中任何接收外部输入数据的地方都是潜在的攻击点，过滤检查来自网页的参数。
    • 不要通过网页传输敏感信息，有的网站为了引导已经登录的用户到 APP 上使用，会使用脚本动态的生成 URL Scheme 的参数，其中包括了用户名、密码或者登录态 token 等敏感信息，让用户打开 APP 直接就登录了。恶意应用也可以注册相同的 URL Sechme 来截取这些敏感信息。Android 系统会让用户选择使用哪个应用打开链接，但是如果用户不注意，就会使用恶意应用打开，导致敏感信息泄露或者其他风险。

  • 解决办法

    • 在内嵌的 WebView 中应该限制允许打开的 WebView 的域名，并设置运行访问的白名单。或者当用户打开外部链接前给用户强烈而明显的提示。具体操作可以看 5.0.8 如何设置白名单操作方式。

3.0.6 如何处理加载错误(Http、SSL、Resource)

  • 对于 WebView 加载一个网页过程中所产生的错误回调，大致有三种

    /**
 * 只有在主页面加载出现错误时，才会回调这个方法。这正是展示加载错误页面最合适的方法。* 然而，如果不管三七二十一直接展示错误页面的话，那很有可能会误判，给用户造成经常加载页面失败的错觉。* 由于不同的 WebView 实现可能不一样，所以我们首先需要排除几种误判的例子：*      1. 加载失败的 url 跟 WebView 里的 url 不是同一个 url，排除；*      2.errorCode=-1，表明是 ERROR_UNKNOWN 的错误，为了保证不误判，排除
 *      3failingUrl=null&errorCode=-12，由于错误的 url 是空而不是 ERROR_BAD_URL，排除
 * @param webView                                           webView
 * @param errorCode                                         errorCode
 * @param description                                       description
 */
@Override
public void onReceivedError(WebView webView, int errorCode,
                            String description, String failingUrl) {super.onReceivedError(webView, errorCode, description, failingUrl);
    // -12 == EventHandle.ERROR_BAD_URL, a hide return code inside android.net.http package
    if ((failingUrl != null && !failingUrl.equals(webView.getUrl())
            && !failingUrl.equals(webView.getOriginalUrl())) /* not subresource error*/
            || (failingUrl == null && errorCode != -12) /*not bad url*/
            || errorCode == -1) { // 当 errorCode = -1 且错误信息为 net::ERR_CACHE_MISS
        return;
    }
    if (!TextUtils.isEmpty(failingUrl)) {if (failingUrl.equals(webView.getUrl())) {// 做自己的错误操作，比如自定义错误页面}
    }
}

/**
 * 只有在主页面加载出现错误时，才会回调这个方法。这正是展示加载错误页面最合适的方法。* 然而，如果不管三七二十一直接展示错误页面的话，那很有可能会误判，给用户造成经常加载页面失败的错觉。* 由于不同的 WebView 实现可能不一样，所以我们首先需要排除几种误判的例子：*      1. 加载失败的 url 跟 WebView 里的 url 不是同一个 url，排除；*      2.errorCode=-1，表明是 ERROR_UNKNOWN 的错误，为了保证不误判，排除
 *      3failingUrl=null&errorCode=-12，由于错误的 url 是空而不是 ERROR_BAD_URL，排除
 * @param webView                                           webView
 * @param webResourceRequest                                webResourceRequest
 * @param webResourceError                                  webResourceError
 */
@Override
public void onReceivedError(WebView webView, WebResourceRequest webResourceRequest,
                            WebResourceError webResourceError) {super.onReceivedError(webView, webResourceRequest, webResourceError);
}

/**
 * 任何 HTTP 请求产生的错误都会回调这个方法，包括主页面的 html 文档请求，iframe、图片等资源请求。* 在这个回调中，由于混杂了很多请求，不适合用来展示加载错误的页面，而适合做监控报警。* 当某个 URL，或者某个资源收到大量报警时，说明页面或资源可能存在问题，这时候可以让相关运营及时响应修改。* @param webView                                           webView
 * @param webResourceRequest                                webResourceRequest
 * @param webResourceResponse                               webResourceResponse
 */
@Override
public void onReceivedHttpError(WebView webView, WebResourceRequest webResourceRequest,
                                WebResourceResponse webResourceResponse) {super.onReceivedHttpError(webView, webResourceRequest, webResourceResponse);
}

/**
 * 任何 HTTPS 请求，遇到 SSL 错误时都会回调这个方法。* 比较正确的做法是让用户选择是否信任这个网站，这时候可以弹出信任选择框供用户选择（大部分正规浏览器是这么做的）。* 有时候，针对自己的网站，可以让一些特定的网站，不管其证书是否存在问题，都让用户信任它。* 坑：有时候部分手机打开页面报错，绝招：让自己网站的所有二级域都是可信任的。* @param webView                                           webView
 * @param sslErrorHandler                                   sslErrorHandler
 * @param sslError                                          sslError
 */
@Override
public void onReceivedSslError(WebView webView, SslErrorHandler sslErrorHandler, SslError sslError) {super.onReceivedSslError(webView, sslErrorHandler, sslError);
    // 判断网站是否是可信任的，与自己网站 host 作比较
    if (WebViewUtils.isYCHost(webView.getUrl())) {
        // 如果是自己的网站，则继续使用 SSL 证书
        sslErrorHandler.proceed();} else {super.onReceivedSslError(webView, sslErrorHandler, sslError);
    }
}
```

3.0.7 webView 防止内存泄漏

  • https://my.oschina.net/zhibuj…

3.0.9 视频 / 图片宽度超过屏幕

  • 视频播放宽度或者图片宽度比 webView 设置的宽度大，超过屏幕：这个时候可以设置 ws.setLoadWithOverviewMode(false);

  • 另外一种让图片不超出屏幕范围的方法，可以用的是 css

    <script type="text/javascript">
   var tables = document.getElementsByTagName("img");  // 找到 table 标签
     for(var i = 0; i<tables.length; i++){  // 逐个改变
            tables[i].style.width = "100%";  // 宽度改为 100%
             tables[i].style.height = "auto";
     }
</script>

  • 通过 webView 的 setting 属性设置

    // 网页内容的宽度是否可大于 WebView 控件的宽度
ws.setLoadWithOverviewMode(false);

3.1.0 如何保证 js 安全性

  • Android 和 js 如何通信

    • 为了与 Web 页面实现动态交互，Android 应用程序允许 WebView 通过 WebView.addJavascriptInterface 接口向 Web 页面注入 Java 对象，页面 Javascript 脚本可直接引用该对象并调用该对象的方法。

    • 这类应用程序一般都会有类似如下的代码：

      webView.addJavascriptInterface(javaObj, "jsObj");

    • 此段代码将 javaObj 对象暴露给 js 脚本，可以通过 jsObj 对象对其进行引用，调用 javaObj 的方法。结合 Java 的反射机制可以通过 js 脚本执行任意 Java 代码，相关代码如下：

      • 当受影响的应用程序执行到上述脚本的时候，就会执行 someCmd 指定的命令。
      <script>
  function execute(cmdArgs) {return jsobj.getClass().forName("java.lang.Runtime").getMethod("getRuntime",null).invoke(null,null).exec(cmdArgs);
  }

  execute(someCmd);
</script>

  • addJavascriptInterface 任何命令执行漏洞

    • 在 webView 中使用 js 与 html 进行交互是一个不错的方式，但是，在 Android4.2(16，包含 4.2)及以下版本中，如果使用 addJavascriptInterface，则会存在被注入 js 接口的漏洞；在 4.2 之后，由于 Google 增加了 @JavascriptInterface，该漏洞得以解决。

  • @JavascriptInterface 注解做了什么操作

    • 之前，任何 Public 的函数都可以在 JS 代码中访问，而 Java 对象继承关系会导致很多 Public 的函数都可以在 JS 中访问，其中一个重要的函数就是 getClass()。然后 JS 可以通过反射来访问其他一些内容。通过引入 @JavascriptInterface 注解，则在 JS 中只能访问 @JavascriptInterface 注解的函数。这样就可以增强安全性。

3.1.1 如何代码开启硬件加速

  • 开启软硬件加速这个性能提升还是很明显的，但是会耗费更大的内存。直接调用代码 api 即可完成，webView.setOpenLayerType(true);

3.1.2 WebView 设置 Cookie

  • h5 页面为何要设置 cookie，主要是避免网页重复登录，作用是记录用户登录信息，下次进去不需要重复登录。

  • 代码里怎么设置 Cookie，如下所示

    /**
 *
 * @param url               地址
 * @param cookieList        需要添加的 Cookie 值, 以键值对的方式:key=value
 */
private void syncCookie (Context context , String url, ArrayList<String> cookieList) {
    // 初始化
    CookieSyncManager.createInstance(context);
    // 获取对象
    CookieManager cookieManager = CookieManager.getInstance();
    cookieManager.setAcceptCookie(true);
    // 移除
    cookieManager.removeSessionCookie();
    // 添加
    if (cookieList != null && cookieList.size() > 0) {for (String cookie : cookieList) {cookieManager.setCookie(url, cookie);
        }
    }
    String cookies = cookieManager.getCookie(url);
    X5LogUtils.d("cookies-------"+cookies);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {cookieManager.flush();
    } else {CookieSyncManager.getInstance().sync();}
}
```

  • 在 android 里面在调用 webView.loadUrl(url)之前一句调用此方法就可以给 WebView 设置 Cookie

    • 注: 这里一定要注意一点，在调用设置 Cookie 之后不能再设置，否则设置 Cookie 无效。该处需要校验，为何？？？
    webView.getSettings().setBuiltInZoomControls(true);  
webView.getSettings().setJavaScriptEnabled(true);

  • 还有跨域问题：域 A: test1.yc.com 域 B: test2.yc.com

    • 那么在域 A 生产一个可以使域 A 和域 B 都能访问的 Cookie 就需要将 Cookie 的 domain 设置为.yc.com；
    • 如果要在域 A 生产一个令域 A 不能访问而域能访问的 Cookie 就要将 Cookie 设置为 test2.yc.com。

  • Cookie 的过期机制

    • 可以设置 Cookie 的生效时间字段名为：expires 或 max-age。

      • expires：过期的时间点
      • max-age：生效的持续时间，单位为秒。
    • 若将 Cookie 的 max-age 设置为负数，或者 expires 字段设置为过期时间点，数据库更新后这条 Cookie 将从数据库中被删除。如果将 Cookie 的 max-age 和 expires 字段设置为正常的过期日期，则到期后再数据库更新时会删除该条数据。

  • 下面列出几个有用的接口：

    • 获取某个 url 下的所有 Cookie：CookieManager.getInstance().getCookie(url)
    • 判断 WebView 是否接受 Cookie：CookieManager.getInstance().acceptCookie()
    • 清除 Session Cookie：CookieManager.getInstance().removeSessionCookies(ValueCallback<Boolean> callback)
    • 清除所有 Cookie：CookieManager.getInstance().removeAllCookies(ValueCallback<Boolean> callback)
    • Cookie 持久化：CookieManager.getInstance().flush()
    • 针对某个主机设置 Cookie：CookieManager.getInstance().setCookie(String url, String value)

3.1.4 webView 加载网页不显示图片

  • webView 从 Lollipop(5.0)开始 webView 默认不允许混合模式, https 当中不能加载 http 资源, 而开发的时候可能使用的是 https 的链接, 但是链接中的图片可能是 http 的, 所以需要设置开启。

    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {mWebView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
mWebView.getSettings().setBlockNetworkImage(false);

3.1.5 绕过证书校验漏洞

  • webviewClient 中有 onReceivedError 方法，当出现证书校验错误时，我们可以在该方法中使用 handler.proceed()来忽略证书校验继续加载网页，或者使用默认的 handler.cancel()来终端加载。

    • 因为我们使用了 handler.proceed()，由此产生了该“绕过证书校验漏洞”。如果确定所有页面都能满足证书校验，则不必要使用 handler.proceed()
    @SuppressLint("NewApi")
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {//handler.proceed();// 接受证书
    super.onReceivedSslError(view, handler, error);
}

3.1.6 allowFileAccess 漏洞

  • 如果 webView.getSettings().setAllowFileAccess(boolean)设置为 true，则会面临该问题；该漏洞是通过 WebView 对 Javascript 的延时执行和 html 文件替换产生的。

    • 解决方案是禁止 WebView 页面打开本地文件，即：webView.getSettings().setAllowFileAccess(false);
    • 或者更直接的禁止使用 JavaScript：webView.getSettings().setJavaScriptEnabled(false);

3.1.7 WebView 嵌套 ScrollView 问题

  • 问题描述

    • 当 WebView 嵌套在 ScrollView 里面的时候，如果 WebView 先加载了一个高度很高的网页，然后加载了一个高度很低的网页，就会造成 WebView 的高度无法自适应，底部出现大量空白的情况出现。

  • 解决办法

    • 可以参考这篇博客：https://blog.csdn.net/self_st…

3.1.8 WebView 中图片点击放大

  • 首先载入 js

    // 将 js 对象与 java 对象进行映射
webView.addJavascriptInterface(new ImageJavascriptInterface(context), "imagelistener");

  • html 加载完成之后，添加监听图片的点击 js 函数，这个可以在 onPageFinished 方法中操作

    @Override
public void onPageFinished(WebView view, String url) {X5LogUtils.i("-------onPageFinished-------"+url);
    //html 加载完成之后，添加监听图片的点击 js 函数
    //addImageClickListener();
    addImageArrayClickListener(webView);
}

  • 具体看 addImageArrayClickListener 的实现方法。

    /**
 * android 与 js 交互：* 首先我们拿到 html 中加载图片的标签 img.
 * 然后取出其对应的 src 属性
 * 循环遍历设置图片的点击事件
 * 将 src 作为参数传给 java 代码
 * 这个循环将所图片放入数组，当 js 调用本地方法时传入。* 当然如果采用方式一获取图片的话，本地方法可以不需要传入这个数组
 * 通过 js 代码找到标签为 img 的代码块，设置点击的监听方法与本地的 openImage 方法进行连接
 */
private void addImageArrayClickListener(WebView webView) {webView.loadUrl("javascript:(function(){" +
            "var objs = document.getElementsByTagName(\"img\");" +
            "var array=new Array();" +
            "for(var j=0;j<objs.length;j++){" +
            "array[j]=objs[j].src;" +
            "}"+
            "for(var i=0;i<objs.length;i++)" +
            "{"
            + "objs[i].onclick=function()" +
            "{"
            + "window.imagelistener.openImage(this.src,array);" +
            "}" +
            "}" +
            "})()");
}
```

  • 最后看看 js 的通信接口做了什么

    public class ImageJavascriptInterface {

    private Context context;
    private String[] imageUrls;

    public ImageJavascriptInterface(Context context,String[] imageUrls) {
        this.context = context;
        this.imageUrls = imageUrls;
    }

    public ImageJavascriptInterface(Context context) {this.context = context;}

    /**
     */
    @android.webkit.JavascriptInterface
    public void openImage(String img , String[] imageUrls) {Intent intent = new Intent();
        intent.putExtra("imageUrls", imageUrls);
        intent.putExtra("curImageUrl", img);
//        intent.setClass(context, PhotoBrowserActivity.class);
        context.startActivity(intent);
        for (int i = 0; i < imageUrls.length; i++) {Log.e("图片地址"+i,imageUrls[i].toString());
        }
    }
}
```

3.1.9 页面滑动期间不渲染 / 执行

  • 在有些需求中会有一些吸顶的元素，例如导航条，购买按钮等；当页面滚动超出元素高度后，元素吸附在屏幕顶部。在 WebView 中成了难题：在页面滚动期间，Scroll Event 不触发。不仅如此，WebView 在滚动期间还有各种限定：

    • setTimeout 和 setInterval 不触发。
    • GIF 动画不播放。
    • 很多回调会延迟到页面停止滚动之后。
    • background-position: fixed 不支持。

  • 这些限制让 WebView 在滚动期间很难有较好的体验。这些限制大部分是不可突破的，但至少对于吸顶功能还是可以做一些支持，解决方法：

    • 在 Android 上，监听 touchMove 事件可以在滑动期间做元素的 position 切换（惯性运动期间就无效了）。
  • 参考美团技术文章

3.2.0 被运营商劫持和注入问题

  • 由于 WebView 加载的页面代码是从服务器动态获取的，这些代码将会很容易被中间环节所窃取或者修改，其中最主要的问题出自地方运营商和一些 WiFi。监测到的问题包括：

    • 无视通信规则强制缓存页面。
    • header 被篡改。
    • 页面被注入广告。
    • 页面被重定向。
    • 页面被重定向并重新 iframe 到新页面，框架嵌入广告。
    • HTTPS 请求被拦截。
    • DNS 劫持。

  • 针对页面注入的行为，有一些解决方案：

    • 1. 使用 CSP（Content Security Policy）

    • 2.HTTPS。

      • HTTPS 可以防止页面被劫持或者注入，然而其副作用也是明显的，网络传输的性能和成功率都会下降，而且 HTTPS 的页面会要求页面内所有引用的资源也是 HTTPS 的，对于大型网站其迁移成本并不算低。HTTPS 的一个问题在于：一旦底层想要篡改或者劫持，会导致整个链接失效，页面无法展示。这会带来一个问题：本来页面只是会被注入广告，而且广告会被 CSP 拦截，而采用了 HTTPS 后，整个网页由于受到劫持完全无法展示。
      • 对于安全要求不高的静态页面，就需要权衡 HTTPS 带来的利与弊了。

    • 3.App 使用 Socket 代理请求

      • 如果 HTTP 请求容易被拦截，那么让 App 将其转换为一个 Socket 请求，并代理 WebView 的访问也是一个办法。
      • 通常不法运营商或者 WiFi 都只能拦截 HTTP（S）请求，对于自定义的包内容则无法拦截，因此可以基本解决注入和劫持的问题。
      • Socket 代理请求也存在问题：
      • 首先，使用客户端代理的页面 HTML 请求将丧失边下载边解析的能力；根据前面所述，浏览器在 HTML 收到部分内容后就立刻开始解析，并加载解析出来的外链、图片等，执行内联的脚本……而目前 WebView 对外并没有暴露这种流式的 HTML 接口，只能由客户端完全下载好 HTML 后，注入到 WebView 中。因此其性能将会受到影响。
      • 其次，其技术问题也是较多的，例如对跳转的处理，对缓存的处理，对 CDN 的处理等等……稍不留神就会埋下若干大坑。
      • 此外还有一些其他的办法，例如页面的 MD5 检测，页面静态页打包下载等等方式，具体如何选择还要根据具体的场景抉择。

3.2.1 解决资源加载缓慢问题

  • 在资源预加载方面，其实也有很多种方式，下面主要列举了一些：

    • 第一种方式是使用 WebView 自身的缓存机制：如果我们在 APP 里面访问一个页面，短时间内再次访问这个页面的时候，就会感觉到第二次打开的时候顺畅很多，加载速度比第一次的时间要短，这个就是因为 WebView 自身内部会做一些缓存，只要打开过的资源，他都会试着缓存到本地，第二次需要访问的时候他直接从本地读取，但是这个读取其实是不太稳定的东西，关掉之后，或者说这种缓存失效之后，系统会自动把它清除，我们没办法进行控制。基于这个 WebView 自身的缓存，有一种资源预加载的方案就是，我们在应用启动的时候可以开一个像素的 WebView，事先去访问一下我们常用的资源，后续打开页面的时候如果再用到这些资源他就可以从本地获取到，页面加载的时间会短一些。
    • 第二种方案是，自己去构建和管理缓存：把这些需要预加载的资源放在 APP 里面，可能是预先放进去的，也可能是后续下载的，问题在于前端这些页面怎么去缓存，两个方案，第一种是前端可以在 H5 打包的时候把里面的资源 URL 进行替换，这样可以直接访问本地的地址；第二种是客户端可以拦截这些网页发出的所有请求做替换。
    • 具体可以看美团的技术文章：美团大众点评 Hybrid 化建设

3.2.2 判断是否已经滚动到页面底端

  • getScrollY()方法返回的是当前可见区域的顶端距整个页面顶端的距离, 也就是当前内容滚动的距离.
  • getHeight()或者 getBottom()方法都返回当前 WebView 这个容器的高度

  • getContentHeight 返回的是整个 html 的高度, 但并不等同于当前整个页面的高度, 因为 WebView 有缩放功能，所以当前整个页面的高度实际上应该是原始 html 的高度再乘上缩放比例. 因此, 更正后的结果, 准确的判断方法应该是：

    if(WebView.getContentHeight*WebView.getScale() == (webview.getHeight()+WebView.getScrollY())){// 已经处于底端}

3.2.3 使用 loadData 加载 html 乱码

  • 可以通过使用 WebView.loadData(String data, String mimeType, String encoding)) 方法来加载一整个 HTML 页面的一小段内容，第一个就是我们需要 WebView 展示的内容，第二个是我们告诉 WebView 我们展示内容的类型，一般，第三个是字节码，但是使用的时候，这里会有一些坑

    • 明明已经指定了编码格式为 UTF-8，加载却还会出现乱码……
    String html = new String("<h3> 我是 loadData() 的标题 </h3><p>&nbsp&nbsp 我是他的内容 </p>");
webView.loadData(html, "text/html", "UTF-8");

  • 使用 loadData()或 loadDataWithBaseURL()加载一段 HTML 代码片段

    • data: 是要加载的数据类型，但在数据里面不能出现英文字符：’#’, ‘%’, ” , ‘?’ 这四个字符，如果有的话可以用 %23, %25, %27, %3f，这些字符来替换，在平时测试时，你的数据时，你的数据里含有这些字符，但不会出问题，当出问题时，你可以替换下。

      • %，会报找不到页面错误，页面全是乱码。乱码样式见符件。

      • ，会让你的 goBack 失效，但 canGoBAck 是可以使用的。于是就会产生返回按钮生效，但不能返回的情况。

      • 和? 我在转换时，会报错，因为它会把当作转义符来使用，如果用两级转义，也不生效，我是对它无语了。
    • 我们在使用 loadData 时，就意味着需要把所有的非法字符全部转换掉，这样就会给运行速度带来很大的影响，因为在使用时，在页面 stytle 中会使用很多 % 号。页面的数据越多，运行的速度就会越慢。
    • data 中，有人会遇到中文乱码问题，解决办法：参数传 ”utf-8″，页面的编码格式也必须是 utf-8，这样编码统一就不会乱了。别的编码我也没有试过。

  • 解决办法

    String html = new String("<h3> 我是 loadData() 的标题 </h3><p>&nbsp&nbsp 我是他的内容 </p>");
webView.loadData(html, "text/html;charset=UTF-8", "null");

3.2.4 WebView 下载进度无法监听

  • https://www.jianshu.com/p/6e3…

3.2.5 webView 出现 302/303 重定向

  • 专业叙述

    • 302 重定向又称之为 302 代表暂时性转移

  • 网络解释

    • 重定向是网页制作中的一个知识，几个例子跟你说明，假设你现在所处的位置是一个论坛的登录页面，你填写了帐号，密码，点击登陆，如果你的帐号密码正确，就自动跳转到论坛的首页，不正确就返回登录页；这里的自动跳转，就是重定向的意思。或者可以说，重定向就是，在网页上设置一个约束条件，条件满足，就自动转入到其它网页、网址。比如，你输入一个网站链接，一般可以直接进入网站，如果出现错误，则又跳转到另外一个网页。

  • 举个例子

    • 叙述下这种问题的情况，就是 WebView 首先加载 A 链接，然后在 WebView 上点击一个 B 链接进行加载，B 链接会自动跳转到 C 链接，这个时候调用 WebView 的 goback 方法，会返回到加载 B 链接，但是 B 链接又会跳转到 C 链接，从而导致没法返回到 A 链接界面（当然也有朋友说快速的按两次返回键-也就是连续触发了两次 goback 可以返回到 A 链接，但并不是所有用户都懂这个，而且操作上也很恶心。），这就是重定向问题。

  • 实现 WebView 的滑动监听和优雅处理回退栈问题

    • WebView 能否知道某个 url 是不是 301/302 呢？当然知道，WebView 能够拿到 url 的请求信息和响应信息，根据 header 里的 code 很轻松就可以实现，事实正是如此，交给 WebView 来处理重定向(return false)，这时候按返回键，是可以正常地回到重定向之前的那个页面的。（PS：从上面的章节可知，WebView 在 5.0 以后是一个独立的 apk，可以单独升级，新版本的 WebView 实现肯定处理了重定向问题）
    • 但是，业务对 url 拦截有需求，肯定不能把所有的情况都交给系统 WebView 处理。为了解决 url 拦截问题，本文引入了另一种思想——通过用户的 touch 事件来判断重定向。具体可以看项目 lib 中的 ScrollWebView！

04. 关于参考

  • 感谢开源库

    • x5 官方开发文档
    • JsBridge 开源库
    • WebViewStudy 开源库

  • 参考博客

    • WebView 性能、体验分析与优化
    • WebView 详解，常见漏洞详解和安全源码

05. 关于 x5 开源库 YCWebView

5.0.1 前沿说明

  • 基于腾讯 x5 封源库，提高 webView 开发效率，大概要节约你百分之六十的时间成本。该案例支持处理 js 的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常 error 状态、支持视频播放并且可以全频、支持加载 word，xls，ppt，pdf，txt 等文件文档、发短信、打电话、发邮件、打开文件操作上传图片、唤起原生 App、x5 库为最新版本，功能强大。

5.0.2 该库功能和优势

  • 提高 webView 开发效率，大概要节约你百分之六十的时间成本，一键初始化操作；
  • 支持处理 js 的交互逻辑，方便快捷，并且无耦合，操作十分简单；
  • 暴露进度条加载进度，结束，以及异常状态(分多种状态：无网络，404，onReceivedError，sslError 异常等)listener 给开发者；
  • 支持视频播放，可以切换成全频播放视频，可旋转屏幕，暴露视频操作监听 listener 给开发者；
  • 集成了腾讯 x5 的 WebView，最新版本，功能强大；
  • 支持打开文件的操作，比如打开相册，然后选中图片上传，兼容版本(5.0)；
  • 支持加载 word，xls，ppt，pdf，txt 等文件文档，使用方法十分简单；
  • 支持设置仿微信加载 H5 页面进度条，完全无耦合，操作简单，极大提高用户体验；

5.0.3 项目地址

  • https://github.com/yangchong2…
正文完
发表至： java
2019-11-04
 0
关于java:动手写Amazon-SQS客户端
关于java:关于多线程中抛异常的这个面试题我再说最后一次
关于java:第四阶段day19
关于java:JAVA并发编程思维导图

站内搜索

-「」