WKWebView捕获JS Error

最新推荐文章于 2021-09-24 16:20:30 发布

原创最新推荐文章于 2021-09-24 16:20:30 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

软件测试同时被 2 个专栏收录

80 篇文章

订阅专栏

ios

20 篇文章

订阅专栏

本文探讨了WebView中JavaScript错误的捕获与处理方法，包括try-catch、window.onerror监听，以及如何将异常信息从JS传递给原生代码，介绍了两种主要的WebView和JS通信方式。

WebView里面会经常发生JSError，但是很多开发者却并未考虑过收集 JavaScript 出错时抛出的异常信息。因为只要 JavaScript 异常后 App 不会崩溃，当没有发生过就好了。
或许，在浏览器时代，让用户刷新下页面，可以解决异常问题。但是在移动 App 的 H5 页面，一但出现异常将导致程序无法正常运行，用户也不是那么容易可以通过刷新来解决问题的。

try-catch 主动 catch 异常处理或上报

try {   
    function();
} catch(e) {   
    console.log(e); 
    // report error maybe
}

window.onerror 监听错误事件捕获未处理的异常：

window.onerror = function (errorMsg, url, lineNumber) {  
    console.log('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber);   
    // report error maybe
}

通过window.onerror捕获到异常后，js需要将信息传递到oc，那怎么传递呢？

WebView和JS通信一般有两种方式

第一种就是 WebViewJavascriptBridge 实现的方式，是通过在 js 新建一个 iframe，iframe 指定一个自定义 scheme 的 url，将该 frame 添加到当前 dom 中。那么就可以分别通过 WKWebView 的

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)

以及UIWebView的

func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebView.NavigationType) -> Bool

拦截到该 iframe 的 url，根据 url 的 scheme 再做具体操作，这样就可以进行通信了，具体实现可以看 WebViewJavascriptBridge 的源码。这种方式的好处就是同时适用 UIWebView、WKWebView，项目中若是想要同时兼容这两个 WebView，使用这种方式比较方便。