webView 与 JS 的交互

来源：互联网发布：股票交易软件源码编辑：程序博客网时间：2024/05/21 10:51

前提：导入一个第三方的类库（WebViewJavascriptBridge）

//这个框架定义了两种OC和JS之间通信的方式，一种是send，发送一条消息，另一种是通过一个key调用callHandler，注意上方红色的方法，这两个方法接收js返回回来的data并显示，之后调用那个了responseCallback方法，给js回发一条消息，也就是回调。

在.h文件中声明属性

@property (nonatomic,strong) WebViewJavascriptBridge *bridge;

- (void)viewWillAppear:(BOOL)animated {

if (_bridge) { return; }

UIWebView* webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320,400)];

[self.view addSubview:webView];

[WebViewJavascriptBridge enableLogging];

//将此webview与WebViewJavascriptBridge关联点击(webView 可以回调这个方法 js 传值给oc )

_bridge = [WebViewJavascriptBridge bridgeForWebView:webViewwebViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {

NSLog(@"ObjC received message from JS: %@", data);

responseCallback(@"Response for message from ObjC");

}];

// js调oc方法（可以通过data给oc方法传值，使用responseCallback将值再返回给js）

[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {

NSLog(@"testObjcCallback called: %@", data);

responseCallback(@"Response from testObjcCallback");

}];

//oc 向js传值

[_bridge send:@"402880475113383c0151133ff3da0003" responseCallback:^(idresponseData) {

NSLog(@"objc got response! %@", responseData);

}];

[self renderButtons:webView];

[self loadExamplePage:webView];

// [_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];

// [_bridge send:@"A string sent from ObjC after Webview has loaded."];

}

- (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 *messageButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

[messageButton setTitle:@"Send message" forState:UIControlStateNormal];

[messageButton addTarget:self action:@selector(sendMessage:)forControlEvents:UIControlEventTouchUpInside];

[self.view insertSubview:messageButton aboveSubview:webView];

messageButton.frame = CGRectMake(10, 414, 100, 35);

messageButton.titleLabel.font = font;

messageButton.backgroundColor = [UIColor colorWithWhite:1 alpha:0.75];

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(110, 414, 100, 35);

callbackButton.titleLabel.font = font;

UIButton* reloaon = [UIButton buttonWithType:UIButtonTypeRoundedRect];

[reloaon setTitle:@"Reload webview" forState:UIControlStateNormal];

[reloaon addTarget:webView action:@selector(reload)forControlEvents:UIControlEventTouchUpInside];

[self.view insertSubview:reloaon aboveSubview:webView];

reloaon.frame = CGRectMake(210, 414, 100, 35);

reloaon.titleLabel.font = font;

}

- (void)sendMessage:(id)sender {

[_bridge send:@"A string sent from ObjC to JS" responseCallback:^(idresponse) {

NSLog(@"sendMessage got response: %@", response);

}];

}

- (void)callHandler:(id)sender {

id data = @{ @"greetingFromObjC": @"Hi there, JS!" };

[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(idresponse) {

NSLog(@"testJavascriptHandler responded: %@", response);

}];

}

- (void)loadExamplePage:(UIWebView*)webView {

//加载本地的html

// 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];

//链接

NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"你的网址"]];

[webView loadRequest:request];

}

／／－－－－－本地html（新建一个文件复制命名 ExampleApp.html 代码即可）－－－－－－－－－－－

name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">

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

WebViewJavascriptBridge Demo

window.onerror = function(err) {

log('window.onerror: ' + err)

}

function connectWebViewJavascriptBridge(callback) {

if (window.WebViewJavascriptBridge) {

callback(WebViewJavascriptBridge)

} else {

document.addEventListener('WebViewJavascriptBridgeReady', function() {

callback(WebViewJavascriptBridge)

}, false)

}

connectWebViewJavascriptBridge(function(bridge) {

var uniqueId = 1

function log(message, data) {

var log = document.getElementByIdx_x('log')

var el = document.createElement_x('div')

el.className = 'logLine'

el.innerHTML = uniqueId++ + '. ' + message + ':
' + JSON.stringify(data)

if (log.children.length) { log.insertBefore(el, log.children[0]) }

else { log.appendChild(el) }

}

bridge.init(function(message, responseCallback) {

log('JS got a message', message)

var data = { 'Javascript Responds':'Wee!' }

log('JS responding with', data)

responseCallback(data)

})

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)

})

var button = document.getElementByIdx_x('buttons').appendChild(document.createElement_x('button'))

button.innerHTML = 'Send message to ObjC'

button.onclick = function(e) {

e.preventDefault()

var data = 'Hello from JS button'

log('JS sending message', data)

bridge.send(data, function(responseData) {

log('JS got response', responseData)

})

}

document.body.appendChild(document.createElement_x('br'))

var callbackButton = document.getElementByIdx_x('buttons').appendChild(document.createElement_x('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)

})

}

})

id='buttons'>

id='log'>

0 0