码农的日常之iOS开发面试题iOS

【iOS开发】网页JS与OC交互(JavaScriptCore)

2016-07-11  本文已影响4038人  谦言忘语

目标

本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互。我们想要达到的目标是:

JavaSciptCore.framework框架介绍

JavaScriptCore是webkit的一个重要组成部分,主要是对js进行解析和提供执行环境。
具体介绍请看这篇简书的文章:JavaScriptCore 使用

准备环境

加载百度页面 加载百度页面
<!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文件了。

//
//  ViewController.m
//  JS与OC交互Demo
//
//  Created by 石学谦 on 16/7/9.
//  Copyright © 2016年 shixueqian. All rights reserved.
//

#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
加载本地html

环境准备完成,开工

OC调用网页上的JS方法

我们的html文件定义了一个js方法test1(),现在我们就来调用这个方法

- (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()"];
}
    <!--  定义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调用有多个参数的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];
}

运行结果如下:

OC调用OC代码写出来的js方法

网页JS调用APP中的OC方法

既然OC可以调用JS的方法,那JS也能调用OC的方法。

js调用OC方法分两种情况

    <!-- 创建一个按钮,点击就调用  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的方法了。

运行结果为:


<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);
    };
}

运行结果为:

js调用OC方法(多参数)

参考

本章Demo地址:https://github.com/shixueqian/JSandOC.git
更多内容请参考这位大神的文章。iOS js oc相互调用(JavaScriptCore)(二)

谦言万语

这篇文章写得好累。

上一篇下一篇

猜你喜欢

热点阅读