iOS OC与JS的交互(WebViewJavascriptBridge实现)

最新推荐文章于 2022-04-01 15:49:01 发布

伍骁辛

最新推荐文章于 2022-04-01 15:49:01 发布

阅读量517

点赞数

分类专栏： HTML5 Web前端 iOS开发文章标签： iOS开发 HTML5 iOS与H5交互原生开发

本文链接：https://blog.csdn.net/u013134119/article/details/53523241

版权

iOS开发同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML5

6 篇文章 0 订阅

订阅专栏

Web前端

6 篇文章 0 订阅

订阅专栏

在开发的过程中，我们会遇到原生app与web的交互，除了用WebView加载HTML5文件显示外，还可能需要和WebView进行交互，例如点击WebView上面的按钮调用原生OC的函数方法，上一章总结了JavaScriptCore的用法，这一章我们来学习另一种方法WebViewJavascriptBridge这个开源项目。

WebViewJavascriptBridge是一个轻量的用于OC与JS交互的第三方库。WebViewJavascriptBridge是支持到iOS6之前的版本的，用于支持Native的iOS与JavaScript交互。如果需要支持到iOS6之前的app，使用它是很不错的。本篇讲讲WebViewJavascriptBridge的基本原理及详细讲讲如何去使用，包括iOS端的使用和JS端的使用。

##基本原理
WebViewJavascriptBridge的本质也是通过Webview代理拦截

代码：

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType   {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
__strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
if ([_base isCorrectProcotocolScheme:url]) {
if ([_base isBridgeLoadedURL:url]) {
    [_base injectJavascriptFile];
} else if ([_base isQueueMessageURL:url]) {
    NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
    [_base flushMessageQueue:messageQueueString];
} else {
    [_base logUnkownMessage:url];
}
return NO;
} else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
} else {
return YES;
}
}

代码解释:

通过webView代理拦截后，首先通过isBridgeLoadedURL方法判断是否是bridge即需要桥接的URL，如果是，则通过injectJavascriptFile方法注入JS;否则判断URL是否是队列消息，如果是，那么执行查询命令JS并刷新队列消息；否则URL被识别为未知的消息。

使用步骤

使用它可以用CocoaPods导入：
pod ‘WebViewJavascriptBridge’, ‘~> 5.0.5’

引入WebViewJavascriptBridge

// 开启日志
[WebViewJavascriptBridge enableLogging];
// 给webview建立JS与OjbC的沟通桥梁
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[self.bridge setWebViewDelegate:self];

###JS调用OC

本章节demo的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 来自html中的jsCallOC标题</title>
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:steelblue; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:12px; }
.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
</style>
</head>
<body>
<h2>WebViewJavascriptBridge</h2>
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
}

/*这段代码是固定的，必须要放到js中*/
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)
}
/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
 setupWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1
function log(message, data) {
  var log = document.getElementById('log')
  var el = document.createElement('div')
  el.className = 'logLine'
  el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
  if (log.children.length) {
      log.insertBefore(el, log.children[0])
  } else {
  log.appendChild(el)
  }
}
 /* Initialize your app here */             
   /*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/
  document.getElementById('callmeId').onclick = function (e) {
  log('JS端 call OC端: callme')
  bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992'}, function(response) {
     log('JS端 得到 response', response)
  })
}

document.getElementById('callAlertId').onclick = function (e) {
  log('JS端 call OC端: callAlert')
  bridge.callHandler('callAlert', {'title': '来自JS的message'}, function(response) {
     log('JS端 得到 response', response)
  })
}

/*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC*/
bridge.registerHandler('factorial', function(data, responseCallback) {

  log("Get user information from ObjC: ", data)
  //JS反馈给OC
  responseCallback({'result': factorial(data)})
})

/*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS*/
bridge.registerHandler('openWebviewBridge', function() {
  log("openWebviewBridge was called with by ObjC")
})

var factorial = function(n) { 
    if (n < 0)            
    return;               
    if (n === 0)      
    return 1;              
    return n * factorial(n - 1)

};                     
})

</script>

<div id='buttons'></div> <div id='log'></div>
<div>
<input type="button" value="JS调用OC传值"  id="callmeId"/>
</div>
<div>
<input type="button" value="调用原生Alert" id="callAlertId">
</div>
</body>
</html>

1.JS调用原生callme方法，首先需要在OC端注册此方法。如果JS端需要返回值的话我们可以通过responseCallback将返回值传过去。

[self.bridge registerHandler:@"callme" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"执行任务了, data from js is %@", data);
if (responseCallback) {
    //OC反馈给JS
    responseCallback(@"这是OC给JS的反馈哦~");
}
}];

2.同时JS端调用OC方法，通过bridge.callHandler来调用：

bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992'}, function(response) {
     log('JS端 得到 response', response)
  })

这样双方建立了通道，实现了JS调用OC原生方法。

参数说明：callme是OC端注册的方法，在OC端注册后，JS可以通过这个方法名与OC交互。比如点击JS调用OC传值这个按钮时，就会执行callHandle方法，JS端将参数传给了iOS端，当iOS端收到参数时，通过responseCallback回调反馈给JS端，JS端收到返回值。

效果图如下：

这里写图片描述

打印日志

这里写图片描述

打印日志

这里写图片描述

###OC调用JS
1.OC调用JS端factorial函数，首先在JS端注册factorial方法

/*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC*/
bridge.registerHandler('factorial', function(data, responseCallback) {     
  log("Get user information from ObjC: ", data)
  //JS反馈给OC
  responseCallback({'result': factorial(data)})
})

2.同时OC调用JS方法,通过[self.bridge callHandler:@“factorial” data:responseCallback:^(id responseData) {}]调用：

// OC调用JS方法
//OC给JS提供公开的API，JS端通过注册，就可以在OC端调用此API并传入参数时，得到回调。
NSLog(@"OC端 call JS端");
[self.bridge callHandler:@"factorial" data:   [NSNumber numberWithInteger:[textField.text integerValue]] responseCallback:^(id responseData) {
resultL.text = [NSString stringWithFormat:@"结果%@",    [responseData objectForKey:@"result"]];
NSLog(@"OC端得到回调responseData: %@",responseData);
}];

通过以上代码实现了OC调用JS。

效果图如下：

这里写图片描述

打印日志

这里写图片描述

接下来是OC调用JS方法（无参）

JS端注册

/*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS*/
bridge.registerHandler('openWebviewBridge', function() {
  log("openWebviewBridge was called with by ObjC")
})

###OC端调用

//OC给JS提供公开的API，JS端通过注册，就可以在OC端调用此API，没有参数传入和回调。
[self.bridge callHandler:@"openWebviewBridge" data:nil];
NSLog(@"OC端 call JS端: openWebviewBridge");

Demo下载
喜欢的亲们随手给个星星

##总结
在写这个demo的过程中遇到不少问题，尤其是JS端，需要注意的是JS端一定要写log，否则没有回调。总的来说相对于JavaScriptCore更复杂一点，缺点就是要固定的加入相关代码，JS端代码要在固定的函数内添加，本文只是简单的介绍了交互的基本原理和几个常用的方法，仅供交流学习，如果有理解错误的地方还请大家多多指教。

伍骁辛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS OC与JS的交互(WebViewJavascriptBridge实现)

在开发的过程中，我们会遇到原生app与web的交互，除了用WebView加载HTML5文件显示外，还可能需要和WebView进行交互，例如点击WebView上面的按钮调用原生OC的函数方法，上一章总结了JavaScriptCore的用法，这一章我们来学习另一种方法WebViewJavascriptBridge这个开源项目。
复制链接

扫一扫

专栏目录