第三方库WebViewJavascriptBridge使用介绍

来源：互联网发布：如何清理mac桌面图标编辑：程序博客网时间：2024/06/18 09:39

第三方库WebViewJavascriptBridge使用介绍

官网地址： https://github.com/marcuswestin/WebViewJavascriptBridge

1.框架说明

该库的主要作用用于： Objective-C 和 javascript 相互通信，即 oc和 js 方法的互相调用

用html写页面，用UIWebView去加载，对某些html无法调用的硬件，通过双方的交互来实现方法的互调和传值

2. 示例代码

#import <UIKit/UIKit.h>@interface ExampleUIWebViewController : UINavigationController <UIWebViewDelegate>@end

#import "ExampleUIWebViewController.h"#import "WebViewJavascriptBridge.h"@interface ExampleUIWebViewController ()@property WebViewJavascriptBridge* bridge;@end@implementation ExampleUIWebViewController- (void)viewWillAppear:(BOOL)animated {    if (_bridge) { return; }        UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];    [self.view addSubview:webView];        [WebViewJavascriptBridge enableLogging];        // 此时你的webview就与js搭上桥了    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];        // Javascript调用OC方法(注册处理器：方法名) 涉及到调用时传参(id data)，    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {        NSLog(@"testObjcCallback called: %@", data);// 将执行结果通过调用responseCallback方法返回给Javascript        responseCallback(@"Response from testObjcCallback");    }];        [_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];        [self renderButtons:webView];    [self loadExamplePage:webView];}- (void)webViewDidStartLoad:(UIWebView *)webView {    NSLog(@"webViewDidStartLoad");}- (void)webViewDidFinishLoad:(UIWebView *)webView {    NSLog(@"webViewDidFinishLoad");}- (void)renderButtons:(UIWebView*)webView {    UIFont* font = [UIFont fontWithName:@"HelveticaNeue" size:12.0];        UIButton *callbackButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];    [callbackButton setTitle:@"Call handler" forState:UIControlStateNormal];    [callbackButton addTarget:self action:@selector(callHandler:) forControlEvents:UIControlEventTouchUpInside];    [self.view insertSubview:callbackButton aboveSubview:webView];    callbackButton.frame = CGRectMake(10, 400, 100, 35);    callbackButton.titleLabel.font = font;        UIButton* reloadButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];    [reloadButton setTitle:@"Reload webview" forState:UIControlStateNormal];    [reloadButton addTarget:webView action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];    [self.view insertSubview:reloadButton aboveSubview:webView];    reloadButton.frame = CGRectMake(110, 400, 100, 35);    reloadButton.titleLabel.font = font;}- (void)callHandler:(id)sender {    // Objective-C 调用Javascript 方法(呼叫处理器(data))(调用时通过data传参，Javascript将执行结果通过 id response 返回)    id data = @{ @"greetingFromObjC": @"Hi there, JS!" };    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {        NSLog(@"testJavascriptHandler responded: %@", response);    }];}- (void)loadExamplePage:(UIWebView*)webView {    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];    [webView loadHTMLString:appHtml baseURL:baseURL];}@end

ExampleApp.html

<!doctype html><html><head>    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"><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><h1>WebViewJavascriptBridge Demo</h1><script>window.onerror = function(err) {log('window.onerror: ' + err)}    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)    }    setupWebViewJavascriptBridge(function(bridge) {var uniqueId = 1function 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) }}bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {log('ObjC called testJavascriptHandler with', data)var responseData = { 'Javascript Says':'Right back atcha!' }log('JS responding with', responseData)responseCallback(responseData)})document.body.appendChild(document.createElement('br'))var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))callbackButton.innerHTML = 'Fire testObjcCallback'callbackButton.onclick = function(e) {e.preventDefault()log('JS calling handler "testObjcCallback"')bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {log('JS got response', response)})}})</script><div id='buttons'></div> <div id='log'></div></body></html>

// 点击按钮：Fire testObjcCallBack,返回结果如下2016-03-09 15:10:15.549 ExampleApp-iOS[12512:1608960] WVJB RCVD: {  "callbackId" : "cb_1_1457507415542",  "handlerName" : "testObjcCallback",  "data" : {    "foo" : "bar"  }}2016-03-09 15:10:15.550 ExampleApp-iOS[12512:1608960] testObjcCallback called: {    foo = bar;}2016-03-09 15:10:15.551 ExampleApp-iOS[12512:1608960] WVJB SEND: {"responseId":"cb_1_1457507415542","responseData":"Response from testObjcCallback"}

// 点击按钮： Call handler 执行结果如下2016-03-09 15:12:31.977 ExampleApp-iOS[12512:1608960] WVJB SEND: {"callbackId":"objc_cb_3","data":{"greetingFromObjC":"Hi there, JS!"},"handlerName":"testJavascriptHandler"}2016-03-09 15:12:31.984 ExampleApp-iOS[12512:1608960] WVJB RCVD: {  "responseId" : "objc_cb_3",  "responseData" : {    "Javascript Says" : "Right back atcha!"  }}2016-03-09 15:12:31.984 ExampleApp-iOS[12512:1608960] testJavascriptHandler responded: {    "Javascript Says" = "Right back atcha!";}

效果如图：

0 1