OC调用JS
- 首先我们创建一个
WebView,加载一个本地的HTML文件
//加载web 本地的一个html文件
NSURL * url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
NSURLRequest * request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
- 在
webview加载完成时-(void)webViewDidFinishLoad:(UIWebView *)webView，我们调用html文件中的头部标题设置为导航控制器的title
NSString * title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.title = title;
-
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;这个方法就是我们在OC中调用JS的核心方法，我们只需要把写好的js以字符串的形式传入webview就可以执行document.title这段语法，这段语法返回的标题就会通过这个方法的返回值返回给我们
- 一个简单的小例子，
html文件中有一个test的js方法，同样在webview加载完成时我们以同样的方法将test()传入给webview，webview就会执行这个test方法
-
html中的代码
<script>
function test(){
alert("ceshi");
}
</script>
[webView stringByEvaluatingJavaScriptFromString:@"test();"];
- 效果就是在加载完成时弹出一个我们前端开发最常见的
alert弹框
JS调用OC
- 在JS中调用OC中的方法比较蛋疼，在
webView中我们可以通过代理方法捕捉网页的去向，也就是a标签的href属性，或者网页的location.href.
- 我们自定义一个我们自己的协议，例如
location.href = 'heihei://ceshi';当我们点击js中的一个按钮时onclick="ceshi();"执行location.href的跳转，这样我们在OC中就可以捕捉到request.URL.absoluteString;这个跳转的url
- 当我们捕捉到这个
url只需要判断下是否是我们自定的协议，如果是我们这个heihei://协议，就根据url执行OC中相应的方法，即我们获得到了heihei://ceshi,我们就应该执行OC中名字为ceshi的方法，我们可以根据字符串截取到ceshi，然后利用方法响应器- (id)performSelector:(SEL)aSelector;来调用-(void)ceshi{}
- 在来说一下传参数的调用，在OC中的方法名带有参数是以
：的方式拼接的，然而在js中:是无法存在于方法名中的，在这里，我们用_来代替，并且通过?拼接参数，参数与参数之间以&隔开，例如一个参数就是这样heihei://ceshi_?100，两个参数就是这样heihei://ceshi_number2_?100&200,依次类推。
- 这样我们开始在OC中对捕捉到
url进行处理，首先截掉前面我们自定义的协议，然后以?分割，第一部分就是ceshi_number2_。
- 然后我们用
:替换_就变成了ceshi:number2:这就获得到了OC中- (void)ceshi:(NSString *)number1 number2:(NSString *)number2{的方法名，仔细比对下哦，看看有没有问题哦！
- 下一步我们处理参数，刚才以
？分割的字符串的后半部分为100&200这就是我们需要的参数，我们将这个字符串以&分割成数组，就获取到了我们的参数数组
- 最后通过同样的方式,方法选择器通过方法名来调用方法
-(id)performSelector:(SEL)aSelector withObject:(id)object;
-(id)performSelector:(SEL)aSelector withObject:(id)object1 withObject:(id)object2;
- 但是我们找遍了苹果
performSelector方法也就只找到了上面三种，那么现在问题来了，如果传三个参数，或者四个参数，我们应该如何处理呢。显然，这样是有局限性的。
- 所以我们要模仿苹果自己写一个
performSelector方法，写一个比较通用的，可以多传参数的方法，这里我们就用到了NSInvocation这个类，这是一个利用一个NSInvocation对象包装一次方法调用（方法调用者、方法名、方法参数、方法返回值）
- 我们自己封装了一个
- (id)performSelect:(SEL)selector withObjects:(NSArray *)objects通过传参数的方法选择器和参数数组调用方法的方式，代码如下
-(id)performSelect:(SEL)selector withObjects:(NSArray *)objects{
//方法签名（方法描述）
NSMethodSignature * signature = [self methodSignatureForSelector:selector];
if (signature == nil) {
//找不到该方法抛出异常
@throw [NSException exceptionWithName:@"牛逼的错误" reason:@"方法找不到" userInfo:nil];
}
// NSInvocation : 利用一个NSInvocation对象包装一次方法调用（方法调用者、方法名、方法参数、方法返回值）
NSInvocation * invocation = [NSInvocation invocationWithMethodSignature:signature];
//设置响应者
invocation.target = self;
//设置方法选择器
invocation.selector = selector;
//通过循环设置参数
NSInteger paramsCount = signature.numberOfArguments;
paramsCount = MIN(paramsCount, objects.count);
for (NSInteger i = 0; i<paramsCount; i++) {
id object = objects[i];
if ([object isKindOfClass:[NSNull class]]) {
continue;
}
[invocation setArgument:&object atIndex:i+2];
}
//调用方法
[invocation invoke];
//获取返回值
id returnValue = nil;
//当返回值不是空的时候
if (signature.methodReturnLength) {
[invocation getReturnValue:&returnValue];
}
return returnValue;
}
- 我们捕捉
href跳转时webview的拦截代理方法就可以写成下面的样子
//捕获location.href的跳转信息
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//获取跳转的URL
NSString * url = request.URL.absoluteString;
//自定义的协议
NSString * scheme = @"heihei://";
//如果url中是我们自定义的协议，实现OC中的方法
if ([url containsString:scheme]) {
//截取自定义协议后面的字符串
NSString * path = [url substringFromIndex:scheme.length];
NSString * method = nil;
NSArray * params = nil;
//字符串是否包含？，判断是否有参数
if ([path containsString:@"?"]) {
//有参数
//通过？分割，
NSArray * info = [path componentsSeparatedByString:@"?"];
//数组第一个元素就是方法名,将js中的_替换为：转换为OC中的方法名
method = [[info firstObject] stringByReplacingOccurrencesOfString:@"_" withString:@":"];
//数组第二个元素就为参数字符串
NSString * param = [info lastObject];
//将参数以&分割变为参数数组
params = [param componentsSeparatedByString:@"&"];
}else{
//无参数
//方法名
method = path;
//参数数组
params = @[];
}
NSLog(@"method:%@------params:%@",method,params);
//通过方法签名来调用方法，因为参数的个数未知，所以我们封装一个比较通用的方法
[self performSelect:NSSelectorFromString(method) withObjects:params];
return NO;
}
return YES;
}
<script>
function ceshi()
{
location.href = 'heihei://ceshi';
}
function ceshi1()
{
location.href = 'heihei://ceshi_?100';
}
function ceshi2()
{
location.href = 'heihei://ceshi_number2_?100&200';
}
function ceshi3()
{
location.href = 'heihei://ceshi_number2_number3_?100&200&300';
}
</script>
Demo全部代码
<html>
<!-- 网页的描述信息 -->
<head>
<meta charset="UTF-8">
<title>HeiheiJSWithOC</title>
<script>
function ceshi()
{
//没有参数时
location.href = 'heihei://ceshi';
}
function ceshi1()
{
//一个参数时
location.href = 'heihei://ceshi_?100';
}
function ceshi2()
{
//二个参数时
location.href = 'heihei://ceshi_number2_?100&200';
}
function ceshi3()
{
//三个参数时
location.href = 'heihei://ceshi_number2_number3_?100&200&300';
}
function test(){
alert("ceshi");
}
</script>
</head>
<!-- 网页的具体内容 -->
<body>
<div>电话：10086</div>
<br>
<button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi();">测试无参数</button>
<br>
<button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi1();">测试1个参数</button>
<br>
<button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi2();">测试2个参数</button>
<br>
<button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi3();">测试3个参数</button>
<br>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
//
// ViewController.m
// OCWithJS
//
// Created by zzh on 2017/2/17.
// Copyright © 2017年 zzh. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
-(void)viewDidLoad {
[super viewDidLoad];
//加载web 本地的一个html文件
NSURL * url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
NSURLRequest * request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
#pragma mark - 不同参数的测试方法
-(void)ceshi{
NSLog(@"%s----无参数", __func__);
}
-(void)ceshi:(NSString *)number1{
NSLog(@"%s----%@---", __func__,number1);
}
-(void)ceshi:(NSString *)number1 number2:(NSString *)number2{
NSLog(@"%s----%@---%@--", __func__,number1,number2);
}
-(void)ceshi:(NSString *)number1 number2:(NSString *)number2 number3:(NSString *)number3{
NSLog(@"%s----%@---%@---%@---", __func__,number1,number2,number3);
}
#pragma mark - UIWebViewDelegate
//捕获location.href的跳转信息
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//获取跳转的URL
NSString * url = request.URL.absoluteString;
//自定义的协议
NSString * scheme = @"heihei://";
//如果url中是我们自定义的协议，实现OC中的方法
if ([url containsString:scheme]) {
//截取自定义协议后面的字符串
NSString * path = [url substringFromIndex:scheme.length];
NSString * method = nil;
NSArray * params = nil;
//字符串是否包含？，判断是否有参数
if ([path containsString:@"?"]) {
//有参数
//通过？分割，
NSArray * info = [path componentsSeparatedByString:@"?"];
//数组第一个元素就是方法名,将js中的_替换为：转换为OC中的方法名
method = [[info firstObject] stringByReplacingOccurrencesOfString:@"_" withString:@":"];
//数组第二个元素就为参数字符串
NSString * param = [info lastObject];
//将参数以&分割变为参数数组
params = [param componentsSeparatedByString:@"&"];
}else{
//无参数
//方法名
method = path;
//参数数组
params = @[];
}
NSLog(@"method:%@------params:%@",method,params);
//通过方法签名来调用方法，因为参数的个数未知，所以我们封装一个比较通用的方法
[self performSelect:NSSelectorFromString(method) withObjects:params];
return NO;
}
return YES;
}
-(void)webViewDidFinishLoad:(UIWebView *)webView{
//oc调用js
NSString * title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.title = title;
[webView stringByEvaluatingJavaScriptFromString:@"test();"];
}
#pragma mark - 根据方法签名调用方法
-(id)performSelect:(SEL)selector withObjects:(NSArray *)objects{
//方法签名（方法描述）
NSMethodSignature * signature = [self methodSignatureForSelector:selector];
if (signature == nil) {
//找不到该方法抛出异常
@throw [NSException exceptionWithName:@"牛逼的错误" reason:@"方法找不到" userInfo:nil];
}
// NSInvocation : 利用一个NSInvocation对象包装一次方法调用（方法调用者、方法名、方法参数、方法返回值）
NSInvocation * invocation = [NSInvocation invocationWithMethodSignature:signature];
//设置响应者
invocation.target = self;
//设置方法选择器
invocation.selector = selector;
//通过循环设置参数
NSInteger paramsCount = signature.numberOfArguments;
paramsCount = MIN(paramsCount, objects.count);
for (NSInteger i = 0; i<paramsCount; i++) {
id object = objects[i];
if ([object isKindOfClass:[NSNull class]]) {
continue;
}
[invocation setArgument:&object atIndex:i+2];
}
//调用方法
[invocation invoke];
//获取返回值
id returnValue = nil;
//当返回值不是空的时候
if (signature.methodReturnLength) {
[invocation getReturnValue:&returnValue];
}
return returnValue;
}
@end
