为了账号安全,请及时绑定邮箱和手机立即绑定

js调用ios的方法

标签:
JavaScript iOS

摘要

在做h5应用的时,有时有些功能js并不能实现的特别完美。比如下载进度条或上传文件进度等。如果能调用ios或者android的方法,实现进度,以及文件上传或者下载列表更好一些。如果使用第三方的js插件。又要考虑到ios和android的版本问题,支持上并不是特别完美。

WebViewJavascriptBridge

WebViewJavascriptBridge是一个开源的ios项目,通过桥的方式obc调用js或者js调用obc方法。项目地址:WebViewJavascriptBridge。

用法

1.Import the header file and declare an ivar property:

#import "WebViewJavascriptBridge.h"
....
@property WebViewJavascriptBridge* bridge;

2.Instantiate WebViewJavascriptBridge with a UIWebView (iOS) or WebView (OSX):

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

3.Register a handler in ObjC, and call a JS handler:


[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
   NSLog(@"ObjC Echo called with: %@", data);
   responseCallback(data);
}];
[self.bridge callHandler:@"JS Echo" responseCallback:^(id responseData) {
   NSLog(@"ObjC received response: %@", responseData);
}];


4.Copy and paste setupWebViewJavascriptBridge into your 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)
}


5.Finally, call setupWebViewJavascriptBridge and then use the bridge to register handlers and call ObjC handlers:

setupWebViewJavascriptBridge(function(bridge) {    /* Initialize your app here */

   bridge.registerHandler('JS Echo', function(data, responseCallback) {
       console.log("JS Echo called with:", data)
       responseCallback(data)
   })
   bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
       console.log("JS received response:", responseData)
   })
})

通过第4和5步骤,js就可以调用objc的方法了。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消