WKWebView使用WebViewJavascriptBridge需要注意的地方

摘要： H5和原生端互動，用WebViewJavascriptBridge其實挺簡單的。只要參照 github 上的Demo即可。 注意點一：如果註冊了bridge後，與H5的呼叫無法成功，檢查一下H5小夥伴程式碼裡有沒有以下片段。這一段JS程式碼是不能改的，必須原樣copy。 ...

H5和原生端互動，用WebViewJavascriptBridge其實挺簡單的。只要參照 ofollow,noindex">github 上的Demo即可。

• 注意點一：如果註冊了bridge後，與H5的呼叫無法成功，檢查一下H5小夥伴程式碼裡有沒有以下片段。這一段JS程式碼是不能改的，必須原樣copy。

function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

如果沒有這段js程式碼，紅框裡的程式碼就不會執行。

這句程式碼 [_base injectJavascriptFile] 是注入js檔案，也是互動的關鍵。在執行這行程式碼之前，有這麼一個判斷 [_base isBridgeLoadedURL:url] 。點進去檢視，具體方法如下：

-(BOOL)isBridgeLoadedURL:(NSURL*)url {
return ([[url scheme] isEqualToString:kCustomProtocolScheme] && [[url host] isEqualToString:kBridgeLoaded]);
}
/*
#define kCustomProtocolScheme @"wvjbscheme"
#define kQueueHasMessage@"__WVJB_QUEUE_MESSAGE__"
#define kBridgeLoaded@"__BRIDGE_LOADED__"
*/

如果H5程式碼不加上述規定的js程式碼，那麼這個if語句裡傳入的url永遠都是最原始傳入html的地址， return NO ，因此也就不會執行 [_base injectJavascriptFile] 。

• 注意點二：Run以後發現Crash了，在官網的Demo裡也同樣會Crash。原因是某個回撥呼叫了多次。這個Crash只有在WKWebView會發生，用UIWebView是好的。

解決方法如下，加一行程式碼即可。參考 issue 。不知為何，作者始終沒有合併這個issue也沒有修復這個bug，所以通過cocoapods整合的同學別忘記改原始碼。