UIWebView替换WKWebView出现的WebViewJavascriptBridge code=4异常

问题描述

WebViewJavascriptBridge: 
WARNING: 
Error when trying to fetch data from WKWebView: 
Error Domain = WKErrorDomain
Code         = 4 "发生 JavaScript 异常" 
UserInfo     = {
WKJavaScriptExceptionLineNumber   = 1, 
WKJavaScriptExceptionMessage      = ReferenceError: Can't find variable: WebViewJavascriptBridge, 
WKJavaScriptExceptionColumnNumber = 24, 
WKJavaScriptExceptionSourceURL    = XXXXX,
NSLocalizedDescription            = 发生 JavaScript 异常
}

问题定位

有很多种情况会导致报code = 4的异常，本文只讨论使用WebViewJavascriptBridge来完成OC与JS交互，本来没问题但是从UIWebView替换成WKWebView后产生的该问题。
该问题主要出现在WKWebView进行跨域跳转的同时web页面内JS调用OC方法这种边界情况。
比如web页面有个返回按钮，点击按钮会回传事件back给OC端执行对应返回操作，同时web页面又执行了history.go(-1)这种页面跳转操作（并且跳转的页面会导致跨域而新的页面下未注册WebViewJavascriptBridge相关内容）。

问题原因

核心原因

UIWebView不会出现问题而替换成WKWebView会出现问题的核心原因如下。
UIWebView调用JS函数获取数据的方法是一个同步的方法，会立即获取数据

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

WKWebView调用JS函数获取数据的方法是一个异步的方法，不会立即获取数据

- (void)evaluateJavaScript:(NSString *)javaScriptString 
         completionHandler:(void (^ )(id, NSError *error))completionHandler;

原因分析

web页面想要通过JS调用OC方法需要通过以下步骤（简易说明,非完整步骤，省略了OC向JS注入Bridge对象的步骤，对WebViewJavascriptBridge原理感兴趣的可以自行研究源码推荐:WebViewJavascriptBridge原理解析）
1.JS通过WebViewJavascriptBridge发起调用

    setupWebViewJavascriptBridge(function(bridge) {

    bridge.callHandler('back', "");

    })

2.发起https://__wvjb_queue_message__/跳转
该跳转是由OC端WebViewJavascriptBridge注入web页面的JS发起的

3.OC端拦截https://__wvjb_queue_message__/跳转
OC端WebViewJavascriptBridge会拦截该请求并禁止web控件跳转

4.获取想要OC执行的方法名
拦截请求后WebViewJavascriptBridge会根据注册的webView类型调用上面提到的两个获取web页面内容的方法执行以下JS函数。

WebViewJavascriptBridge._fetchQueue();

该JS函数会返回当前JS需要OC调用的方法的名称。

5.执行OC注册好的对应方法名回调

[self.bridge registerHandler:@"back" handler:^(id data, WVJBResponseCallback responseCallback) {
        
        [self.navigationController popViewControllerAnimated:YES];
        responseCallback(@"");
 }];

问题就出现在第四步（获取想要OC执行的方法名）上。
因为UIWebView是同步返回，所以在history.go(-1)这种页面跳转操作执行之前就可以获取到方法名，进而执行OC注册的代码即第五步的回调。
而WKWebView是异步返回，大概率会在history.go(-1)这种页面跳转操作执行之后才调用WebViewJavascriptBridge._fetchQueue();这个JS函数，而页面跳转之后已经跨域，WebViewJavascriptBridge这个对象已经没有了，所以会报文章一开始说的异常。获取不到对象内部存储的应当调用的OC方法名，也就无法正常调用OC方法即无法执行到第五步，也就造成了web页面与OC交互失效的现象。

解决方案

1.使用UIWebView而不使用WKWebView。
2.如果要使用WKWebView应当避免跨域的边界情况，即如果返回上一个页面会跨域就不要调用web页面的history.go(-1)，而是通过OC注册的事件完成逻辑。

最后编辑于：2019.03.19 16:29:24