问题描述
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注册的事件完成逻辑。