https://github.com/marcuswestin/WebViewJavascriptBridge
1.庫文件 (WKWebView是ios8才支持的,可以替換UIWebView,大家可以暫時不管)
Paste_Image.png
2.使用如下
// WebViewController.h
@interface WebViewController : UIViewController
@end
// WebViewController.m
#import "WebViewController.h"
#import "WebViewJavascriptBridge.h"
@interface WebViewController ()<UIWebViewDelegate>
@property (strong, nonatomic) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge * bridge;
@end
@implementation WebViewController
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
if (_bridge) { return; }
[self bindWebViewBridge];
[self injectJSMonitoringFuction];
[self loadExamplePage:webView];
}
- (void)bindWebViewBridge
{
//1.啟動標志
[WebViewJavascriptBridge enableLogging];
//2.創(chuàng)建綁定webView WebViewJavascriptBridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
// NSLog(@"ObjC received message from JS: %@", data);
responseCallback(@"Response for message from ObjC");
}];
}
- (void)injectJSMonitoringFuction
{
//3.js調用oc的方法 (注意html里也要有對應的jsFinishWebView函數(shù)刹衫,data是js返回給oc,responseCallback可以將值返回給html)
WS(weakSelf)
[_bridge registerHandler:@"jsFinishWebView" handler:^(id data, WVJBResponseCallback responseCallback) {
NSDictionary * dic = data;
[weakSelf handleWithJSONString:dic[@"action"] withData:dic[@"data"] callBack:responseCallback];
}];
}
//4.oc調用js的方法
- (void)OCProvideDatatoJS
{
//4.0 oc調用js的方法 (什么都不傳)
[_bridge send:@"A string sent from ObjC after Webview has loaded."];
//4.1 oc調用js的方法 (帶參數(shù))
[_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];
//4.2 oc調用js的方法 (帶參數(shù),同時接收js返回的值response)
id data = @{ @"greetingFromObjC": @"Hi there, JS!" };
[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
NSLog(@"testJavascriptHandler responded: %@", response);
}];
}
- (void)handleWithJSONString:(NSString *)string withData:(id)info callBack:(WVJBResponseCallback)responseCallback
{
//改變navigation上的title
if ([string isEqualToString:@"title"]) {
if (self.navigationController) {
// self.navigationItem.title = info;
}
if (self.webViewType == TypeFromBanner) {
responseCallback(@"進入到了app里棵红,不需要再顯示返回按鈕");
}
}
}
- (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];
}
#pragma mark - LazyLoading
- (UIWebView *)webView
{
if (!_webView) {
if (self.webViewType == TypeFromLanuch) {
_webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, HHBWIDTH, HHBHEIGHT)];
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault];
}
if (self.webViewType == TypeFromBanner) {
_webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, HHBWIDTH, HHBHEIGHT - 15)];
}
_webView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_webView];
}
return _webView;
}
@end
js調用native代碼:
h5頁面一般這樣寫就可以(ios需要轉換下)
Paste_Image.png
如果您發(fā)現(xiàn)本文對你有所幫助仅政,如果您認為其他人也可能受益,請把它分享出去壕探。