使用WebViewJavascriptBridge与UIWebView交互
https://github.com/marcuswestin/WebViewJavascriptBridge
核心的地方:
UIWebView在加载完网页之后,通过方法stringByEvaluatingJavaScriptFromString:来让这个webView执行js脚本,之后想干啥干啥.
注意:必须是加载完之后!
使用
下载源码拖入工程.
使用一个本地的html文件.
<!doctype html>
<html><head>
<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 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.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + (data ? ':<br/>' + 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.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = 'Send message to ObjC'
button.onclick = function(e) {
e.preventDefault()
<!--此处是你传参数的地方-->
var data = 'YouXianMing'
log('JS sending message', data)
bridge.send(data, function(responseData) {
log('JS got response', responseData)
})
}
document.body.appendChild(document.createElement('br'))
})
<!--脚本结束的地方-->
</script>
<div id='buttons'></div> <div id='log'></div>
</body></html>RootViewController代码如下:
//
// RootViewController.m
// WebViewJavascriptBridge
//
// Copyright (c) 2014年 Y.X. All rights reserved.
//
#import "RootViewController.h"
#import "WebViewJavascriptBridge.h"
@interface RootViewController ()<UIWebViewDelegate>
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
@end
#define BUNDLE_FILE(fileName) [[NSBundle mainBundle] pathForResource:fileName ofType:nil];
#define HTML_STRING(htmlPath) [NSString stringWithContentsOfFile:htmlPath \
encoding:NSUTF8StringEncoding error:nil]
#define FILE_URL(path) [NSURL fileURLWithPath:path]
@implementation RootViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 获取本地html文件
NSString *htmlPath = BUNDLE_FILE(@"demo.html");
// 初始化UIWebView并添加进view中
_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[_webView loadHTMLString:HTML_STRING(htmlPath)
baseURL:FILE_URL(htmlPath)];
[self.view addSubview:_webView];
// 让UIWebView执行脚本并监听回调
_bridge = [WebViewJavascriptBridge bridgeForWebView:_webView handler:^(id data, WVJBResponseCallback responseCallback) {
// 监听回调
NSLog(@"%@", data);
}];
}
@end执行效果如下:
分析
WebViewJavascriptBridge.m 的源码里面有写着让webView执行js脚本的地方哦.
其实,我们只需要能够从UIWebView获取到值就行了,我们才不需要把值传递给UIwebView呢,有了这个UIWebView给iOS传值的功能,基本上能满足我们大部分的需求了哦.
最后,我将html页面进行修改,精简到大家能看懂为止:).
demo.html
<!doctype html>
<html><head>
<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>UIWebView与iOS直接交互</h1>
<!--脚本开始的地方-->
<script>
<!--申明方法-->
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
}
<!--激活方法-->
connectWebViewJavascriptBridge(function(bridge) {
<!--创建一个按钮-->
var button = document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = '给iOS发送信息'
<!--按钮点击事件的实现-->
button.onclick = function(e) {
e.preventDefault()
<!--此处是你传参数的地方-->
var data = 'YouXianMing - Just so easy :)'
<!--使用bridge中的send发送数据-->
bridge.send(data, function(responseData) {
})
}
document.body.appendChild(document.createElement('br'))
})
<!--脚本结束的地方-->
</script>
<div id='buttons'></div> <div id='log'></div>
</body></html>
以下是修改后的执行效果:
附录:
WebViewJavascriptBridge与UIWebView交互原理
