【iOS开发】网页JS与OC交互(JavaScriptCore)
目标
本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互。我们想要达到的目标是:
- OC调用网页上的js方法
- 网页js调用APP中的OC方法
JavaSciptCore.framework框架介绍
JavaScriptCore是webkit的一个重要组成部分,主要是对js进行解析和提供执行环境。具体介绍请看这篇简书的文章:JavaScriptCore 使用
准备环境
- 创建一个名为
JS与OC交互Demo
的iOS工程。然后在storyboard添加一个UIWebVeiw,并设置上下左右约束为0,背景设为白色。 - 刚才创建的webView作为ViewController的属性。用webView加载百度界面
- 编写html文件由于没有现成的网页能够符合我们这篇文章的需求,所以楼主自己做了一个本地的html文件。作为我们的素材。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS与OC交互</title> <!-- 定义js函数 --> <script type="text/javascript"> function test1() { alert("我是被OC调用的js方法") } </script> </head> <body> <br /><br /><br /><br /> <!-- 创建一个按钮,点击就调用 printHelloWorld() 方法 --> <button onclick="printHelloWorld()">在Xcode控制台打印HelloWold</button> </body> </html>
html的代码很简单首先是在head里面定义了一个js函数test1()
。调用这个函数会弹出一个alert窗口。
<!-- 定义js函数 --> <script type="text/javascript"> function test1() { alert("我是被OC调用的js方法") } </script>
body里面创建了一个按钮,点击按钮会调用printHelloWorld()
方法。这里没有定义这个方法的实现,等下我们会在OC代码中定义
<!-- 创建一个按钮,点击就调用 printHelloWorld() 函数 --> <button onclick=" printHelloWorld() ">在Xcode控制台打印HelloWold</button>
好了,现在我们可以加载这个本地html文件了。
#import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> //webView @property (weak, nonatomic) IBOutlet UIWebView *webView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //设置webView代理 self.webView.delegate = self; //获取本地html路径 NSString *path = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil]; //中文路径要转码 path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; //加载html NSURL *url = [NSURL URLWithString:path]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; [self.webView loadRequest:request]; } -(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"网页加载完成"); } @end环境准备完成,开工
OC调用网页上的JS方法
我们的html文件定义了一个js方法test1()
,现在我们就来调用这个方法
先导入JavaScriptCore.framework。
工程->Build Phases->Link Binary With Libraries->点击“+”->输入“JavaScriptCore”->Add
在ViewController.m导入头文件
#import <JavaScriptCore/JavaScriptCore.h>
。写代码
- (void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"网页加载完成"); [self demo1]; } - (void)demo1 { //创建JSContext对象,(此处通过当前webView的键获取到jscontext) JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //OC调用JS方法 [context evaluateScript:@"test1()"]; }
运行之后会弹出一个alert窗口,证明html上的js方法
test1
被调用了上面的代码都是无参的,加入是有参数的呢?我们在html文件中加一个js方法
test3(a,b)
。方法有两个参数。
<!-- 定义js函数 --> <script type="text/javascript"> function test3(a,b) { alert("我是被OC调用的js方法" + a + b) } </script>
然后在ViewController.m里面调用
-(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"网页加载完成"); // [self demo1]; [self demo2]; } //OC调用有多个参数的JS方法 - (void)demo2 { //创建JSContext对象 JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; [context evaluateScript:@"test1(\"我是参数a\",\"我是参数b\")"]; }
运行结果为:
- 上面是OC调用html中定义的JS方法。我们还可以在iOS程序里面写一段JS代码来调用。
-(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"网页加载完成"); // [self demo1]; // [self demo2]; [self demo3]; } //OC调用OC代码写出来的js方法 - (void)demo3 { //创建JSContext对象 JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //JS代码 NSString *jsCode = [NSString stringWithFormat:@"alert(\"我是OC里面的js方法\")"]; //OC调用JS方法 [context evaluateScript:jsCode]; }
运行结果如下:
网页JS调用APP中的OC方法
既然OC可以调用JS的方法,那JS也能调用OC的方法。
js调用OC方法分两种情况
js里面直接调用方法
js里面通过对象调用方法我们这里只讨论第一次比较简单的情况。
js方法没有参数的情况
<!-- 创建一个按钮,点击就调用 printHelloWorld() 函数 --> <button onclick="printHelloWorld()">在Xcode控制台打印HelloWold</button>
-(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"网页加载完成"); // [self demo1]; // [self demo2]; // [self demo3]; [self demo4]; } js调用OC方法(无参数) - (void)demo4 { //创建JSContext对象 JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //注册printHelloWorld方法 context[@"printHelloWorld"] = ^() { NSLog(@"Hello World !"); }; }
根据当前的webView获取到JSContext对象之后,printHelloWorld这个方法“注册”一个实现。实现的代码在block里面。block里面就可以用OC写你想要写的东西了。也就是说,点击了网页上的在Xcode控制台打印HelloWold
这个button之后,网页会调用printHelloWorld()
方法,printHelloWorld()
方法的实现就在block内。这样,我们就实现了js调用OC的方法了。
运行结果为:
- js方法有参数如果js方法有参数,只要在block的参数里面写上参数,就可以使用这些参数了。为了测试,我们在htm里面加一个button
<body> <br /><br /><br /><br /> <!-- 创建一个按钮,点击就调用 printHelloWorld() 函数 --> <button onclick="printHelloWorld()">在Xcode控制台打印HelloWold</button> <br/> <!-- 创建一个按钮,点击就调用printAandB()方法 --> <button onclick="printAandB('我是A','我是B')">打印参数A和参数B</button> </body>
然后写方法
-(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"网页加载完成"); // [self demo1]; // [self demo2]; // [self demo3]; // [self demo4]; [self demo5]; } //js调用OC方法(多参数) - (void)demo5 { //创建JSContext对象 JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //注册printAandB方法 context[@"printAandB"] = ^(NSString *A ,NSString *B) { NSLog(@"%@,%@",A,B); }; }
运行结果为:
参考
本章Demo地址:github.com/shixueqian/…
更多内容请参考这位大神的文章。iOS js oc相互调用(JavaScriptCore)(二)
谦言万语
从简书搬过来的,想必都知道为什么。