第三方库WebViewJavascriptBridge使用介绍

最新推荐文章于 2024-08-08 08:30:48 发布

风流少年

最新推荐文章于 2024-08-08 08:30:48 发布

阅读量8.8k

点赞数 2

本文链接：https://blog.csdn.net/vbirdbest/article/details/50835445

版权

第三方库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 = 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) }
		}

		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!";
}

效果如图：