iOS webView 与 JS 的交互
2016-08-29 本文已影响870人
TotoroLee
iOS 的webView分为两类, 一类是 UIKit框架下的 UIWebView , 另一类是 WebKit框架下的 WKWebView. UIWebView 与JS 的交互是依赖于JavaScriptCore(iOS7.0),而WKWebView则是iOS8.0发布的.so 如果项目不需要兼容iOS8.0以下的版本则使用WKWebView即可.本文将介绍UIWebView WKWebView 与JS的交互.
一.UIWebView
对于UIWebView大家都不陌生,网页或富文本加载都能用到,这里对于UIWebView基本的用法就不进行介绍了.UIWebView与JS的交互方面主要是依赖于JavaScriptCore类库,下面简单的介绍下这个类库.
<JavaScriptCore/JavaScriptCore.h> Command+左键 进入
JavaScriptCore的类和协议.png
- JSContext 为JavaScript提供运行环境
- JSValue 是JavaScript和Object-C之间互换的桥梁
- JSManagedValue 为开发人员提供对象内存管理
- JSVirtualMachine 为JavaScript的运行提供了底层资源
- JSExport 作为JavaScript和Objective-C两种语言的互通协议。
在UIWebView中,native与JS的交互其实就是通过拦截request的方式实现的. 主要有两种方法, 协议 和 Blcok.
协议(JSExport)
JSExport中没有约定任何的方法，连可选的(@optional)都没有，但是所有继承了该协议(@protocol)的协议（注意不是Objective-C的类(@interface)）中定义的方法，都可以在JSContext中被使用。JSExport协议详细讲解
Native中的代码
/**
* 制定协议(遵循 JSExport协议)
*/
@protocol JSObjcProtocol <JSExport>
/**
* 商品详情页面返回按钮
*/
- (void)goBack;
/**
* 购物车界面编辑按钮
*/
- (void)edit;
/**
* 支付订单界面确认支付按钮 以及三种传值方式
*/
//javascript:App.pay(payInfo);
- (void)pay:(NSString *)payInfo;
//App.payInfoUserIDWithUserName("用户ID","用户名字");
- (void)payInfoUserID:(NSString *)userid withUserName:(NSString *)userName;
//App.payInfoOrder("订单号","支付方式");
JSExportAs(payInfoOrder, - (void)payInfoOrder:(NSString *)order withPayType:(NSString *)type);
@nd
//控制器遵守协议之后, 协议中的方法都需要实现.
@interface UIWebViewController ()<UIWebViewDelegate,JSObjcProtocol>
@property (strong, nonatomic) IBOutlet UIWebView *webView;
//为JavaScript提供运行环境
@property (strong ,nonatomic) JSContext *jsContext;
@end
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//获取当前加载完成网页的上下文环境
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//将设置的标识符注入 由控制器接收
self.jsContext[@"App"] = self;
//异常处理
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
这里解释下 self.jsContext[@"App"] = self;
对应JS中的代码
<body class="by">
<div class="ftop">
<a class="back" onClick="javascript:history.back(-1);">返回</a>
<h2>购物车</h2>
<a class="showde">编辑</a>
</div>
<script>
$(function(){
$(".showde").click(function(){
App.edit();
})
})
</script>
</body>
这是UIWebView与JS交互的关键所在, JavaScriptCore框架会通过class_copyProtocolList方法找到类所遵循的协议，然后再对每个协议通过protocol_copyProtocolList检查它是否遵循JSExport协议进而将方法反映到JavaScript之中。直白的说就是 调用本地方法之后从协议中取出相对应的方法在JavaScript中调用.
关于异常处理:在JSContext中执行的JavaScript如果出现异常，只会被JSContext捕获并存储在exception属性上，而不会向外抛出。时时刻刻检查JSContext对象的exception是否不为nil显然是不合适，更合理的方式是给JSContext对象设置exceptionHandler，它接受的是^(JSContext *context, JSValue *exceptionValue)形式的Block。其默认值就是将传入的exceptionValue赋给传入的context的exception属性.
iOS7新JavaScriptCore框架入门介绍
Block
可以从一定程度上解决JSContext引用环境变量与控制器self的循环引用问题
Native中的代码
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//获取网页上下文环境
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
__weak typeof(self) weakSelf = self;
//Block可以传入JSContext中当做JavaScript的方法使用
self.context[@"goBack"] = ^() {
NSLog(@"点击返回按钮");
dispatch_async(dispatch_get_main_queue(), ^{
[weakSelf.navigationController popViewControllerAnimated:YES];
});
};
self.context[@"goShopping"] = ^() {
NSLog(@"点击购物车按钮");
//获取参数列表
NSArray *args = [JSContext currentArguments];
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal);
}
//获取当前调用该方法的对象
JSValue *this = [JSContext currentThis];
NSLog(@"this: %@",this);
[weakSelf goTo];
};
}
- (void)goTo{
//将参数传进去来调用JS的方法
[self.context evaluateScript:@"go('商品3')"];
}
JS中的代码
<body>
<div class="ftop">
<a class="back" onclick="goBack()">返回</a>
<h2>商品详情</h2>
<a class="comea" onclick="goShopping(['商品1','商品2'])">购物车</a>
</div>
<script>
function go(info){
alert(info);
}
</script>
</body>
二.WKWebView
适配iOS8.0,相较于UIWebView,性能功能方面都有了很大的提升,如果项目不需要适配iOS7的话可以直接使用WKWebView.
简单介绍一下代理协议:
- WKNavigationDelegate: UIWebViewDelegate的功能都有,而且添加了页面导航和网页加载进度的监听
- WKUIDelegate: 监听JS方法中的alert、confirm、prompt
- WKScriptMessageHandler: JS交互相关
@interface WKWebViewController ()<WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler>
@property (strong ,nonatomic) WKWebView *webView;
@end
- (void)viewDidLoad {
[super viewDidLoad];
//初始化
//_webView = [[WKWebView alloc]initWithFrame:self.view.bounds];
//带有设置选项的初始化
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
_webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];
//设置代理
_webView.navigationDelegate = self;
_webView.UIDelegate = self;
//加载本地的HTML
NSURL *url = [[NSBundle mainBundle] URLForResource:@"shopsDetail_WKWebView" withExtension:@"html"];
[_webView loadRequest:[NSURLRequest requestWithURL:url]];
[self.view addSubview:_webView];
//添加一个名称,可以在JS中通过这个名称发送消息
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"goBackApp"];
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"goShoppingApp"];
}
/**
* WKScriptMessageHandler协议中必须要实现的方法
用来接收JS端通过window.webkit.messageHandlers.{Name}.postMessage()方法发送的消息并做相应处理
*/
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"方法名 %@，传回参数 %@",message.name,message.body);
//根据方法名来区分
if ([message.name isEqual:@"goBackApp"]) {
[self.navigationController popViewControllerAnimated:YES];
}else if ([message.name isEqual:@"goShoppingApp"]){
//调用JS中的方法并将参数传递到JS中
[self.webView evaluateJavaScript:@"altertFromOC('商品1,商品2')" completionHandler:nil];
}
}
JS中代码
<body>
<div class="ftop">
<a class="back" onclick="goBack()">返回</a>
<h2>商品详情</h2>
<a onclick = "goShopping()">购物车</a>
</div>
<script>
//接收Native发来的消息
function altertFromOC(shops){
alert(shops);
}
function goBack() {
将goBackApp发送Native
window.webkit.messageHandlers.goBackApp.postMessage(null);
}
function goShopping(){
将goBackApp发送Native中,并携带参数{shopsName:'商品名',shopsID:'商品ID'}
window.webkit.messageHandlers.goShoppingApp.postMessage({shopsName:'商品名',shopsID:'商品ID'})
}
</script>
</body>
在WKWebView中,网页自身的alert、confirm、prompt等方法是被拦截的,不论是否有WKUIDelegate.为了能将传递至JS的参数显示出来,这里调用WKUIDelegate的代理方法.
/**
* WKUIDelegate 代理方法
用来监听webView中的alert方法
*
*/
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
//调用原生的alert方法
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alert animated:YES completion:NULL];
}
//用来监听webView中的confirm方法
//- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
//用来监听webView中的prompt方法
//- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
Ok,交互方面大致就这些内容,关于WKWebView的代理方法还有很多,用起来也很方便,这里就没有写了,毕竟主题是关于交互的.
代码在这里
References:
