iOS开发：网页JS与OC交互（JavaScriptCore）
目标
本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互。咱们想要达到的目标是：javascript
- OC调用网页上的js方法
- 网页js调用APP中的OC方法
JavaSciptCore.framework框架介绍
JavaScriptCore是webkit的一个重要组成部分，主要是对js进行解析和提供执行环境。 具体介绍请看这篇简书的文章:JavaScriptCore 使用html
准备环境
- 建立一个名为
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窗口。java
<!-- 定义js函数 -->
<script type="text/javascript">
function test1()
{
alert("我是被OC调用的js方法")
}
</script>
复制代码
body里面建立了一个按钮，点击按钮会调用printHelloWorld()方法。这里没有定义这个方法的实现，等下咱们会在OC代码中定义git
<!-- 建立一个按钮，点击就调用 printHelloWorld() 函数 -->
<button onclick=" printHelloWorld() ">在Xcode控制台打印HelloWold</button>
复制代码
好了，如今咱们能够加载这个本地html文件了。github
#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()，如今咱们就来调用这个方法web
-
先导入JavaScriptCore.framework。
工程->Build Phases->Link Binary With Libraries->点击“+”->输入“JavaScriptCore”->Addbash
-
在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）（二）
谦言万语
从简书搬过来的，想必都知道为何。
相关文章
- 1. iOS OC与JS的交互(JavaScriptCore实现)
- 2. OC与JS交互(一) ~~~~~ JavaScriptCore
- 3. OC与JS交互之JavaScriptCore
- 4. iOS 开发中OC 与 JS的交互
- 5. iOS开发中OC与H5网页交互之OC传值给JS（WKWebView）
- 6. iOS OC与H5网页交互之OC传值给JS（WKWebView）
- 7. iOS js oc相互调用（JavaScriptCore）
- 8. iOS 与 JS 交互手册 - JavaScriptCore
- 9. iOS与JS交互之UIWebView-JavaScriptCore框架
- 10. iOS开发——JS网页交互——javaScript
- 更多相关文章...
- • Web 网页 验证 - 网站建设指南
- • ASP.NET Web Pages - 发布网站 - ASP.NET 教程
- • PHP开发工具
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. iOS OC与JS的交互(JavaScriptCore实现)
- 2. OC与JS交互(一) ~~~~~ JavaScriptCore
- 3. OC与JS交互之JavaScriptCore
- 4. iOS 开发中OC 与 JS的交互
- 5. iOS开发中OC与H5网页交互之OC传值给JS（WKWebView）
- 6. iOS OC与H5网页交互之OC传值给JS（WKWebView）
- 7. iOS js oc相互调用（JavaScriptCore）
- 8. iOS 与 JS 交互手册 - JavaScriptCore
- 9. iOS与JS交互之UIWebView-JavaScriptCore框架
- 10. iOS开发——JS网页交互——javaScript