使用
pod ‘WebViewJavaScriptBridge’
目录结构
WebViewJavaScriptBridgeBase:bridge的核心类,用来初始化以及消息的处理;
WKWebViewJavaScriptBridge:判断WkWebView的类型,并通过不同的类型进行分发。针对WkWebView和WkWebView做的一层封装,主要从来执行JS代码,以及实现WkWebView和WkWebView的代理方法,并通过拦截URL来通知WebViewJavaScriptBridgeBase做的相应操作
WebViewJavaScriptBridge:判断WebView的类型,并通过不同的类型进行分发。针对UIWebView和WebView做的一层封装,主要从来执行JS代码,以及实现UIWebView和WebView的代理方法,并通过拦截URL来通知WebViewJavaScriptBridgeBase做的相应操作;
WebViewJavaScriptBridge_JS:里面主要写了一些JS的方法,JS端与Native”互动“的JS端的方法
主要流程
初始化
Native端的初始化
_bridge = [WKWebViewJavascriptBridge bridgeForWebView:_webView];
[_bridge setWebViewDelegate:self];
[self.bridge disableJavscriptAlertBoxSafetyTimeout];
web端的初始化
当我们通过loadRequest加载URL之后,网页一加载就会执行网页JS中的bridge的初始化方法setupWebViewJavascriptBridge函数
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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
JS调用Native
JS中调用callHandler()方法,发消息data给原生
bridge.callHandler('handlerName',data, function(response) {
})
这就需要Native中向JS注册一个方法, js调用oc,data:传递的数据:
[_bridge registerHandler:@"handlerName" handler:^(id data, WVJBResponseCallback responseCallback) {
responseCallback(@"Response from handlerName");
}];
Native调用JS
Native 中调用callHandler:data:responseCallback方法,发消息data给js
[_bridge callHandler:@"handlerName" data:data responseCallback:^(id response) {
NSLog(@"handlerName responded: %@", response);
}];
这就需要JS事先注册一个方法, oc调用jk,data:传递的数据:
bridge.registerHandler('handlerName', function(data, responseCallback) {
var responseData = { 'Javascript Says':'Right back atcha!'
responseCallback(responseData)
})