OC与JS的相互交互

最新推荐文章于 2021-07-22 13:18:43 发布

定格---

最新推荐文章于 2021-07-22 13:18:43 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： IOS 文章标签： iOS objective-c OC与JS交互 JS与OC交互

本文链接：https://blog.youkuaiyun.com/haoxindasoft/article/details/50808013

IOS 专栏收录该内容

18 篇文章

订阅专栏

在Objective-C中提供了一个JavaScriptCore.frame类库来进行OC与JS之间的交互，在OC中可通过此类库来进行与JS的交互，在以下操作中文件中需导入文件头(#import <JavaScriptCore/JavaScriptCore.h>)

步骤：

一、首先，准备一个html文件与一个js文件，例：

testForm.js文件：

function exchange(){
    var str = Contacts.openContacts();
	alert(str);
}<pre name="code" class="javascript">function showAlert2() {
    alert('zhangfan');
}<pre name="code" class="javascript">function showAlert(name) {
    alert('your name is '+name);
    return name;
}

form.html文件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS与OC交互测试</title>
<script src="testForm.js"></script>
</head>

<body>
	<input type="button" value="登陆" onclick="exchange()">
</body>
</html>

二、将此js文件与html文件放入工程；

三、交互准备（OC调用JS）：

1、首先在Controller中创建一个UIWebView，此Controller需实现UIWebView的代理协议UIWebViewDelegate，代码如下：

#pragma mark - JS交互准备
- (void)JSInteractiveReady
{
    CGSize size = self.view.frame.size;
    /// @brief 创建要打开的html文件的完整路径
    NSBundle *bundle = [NSBundle mainBundle];
    NSString *resPath = [bundle resourcePath];
    NSString *filePath = [resPath stringByAppendingPathComponent:@"test.html"];
    /// @brief 初始化一个UIWebView实例
    self.myWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 100, size.width, size.height - 100.0)];
    /// @brief 加载指定的html文件
    [self.myWebView loadRequest:[[NSURLRequest alloc] initWithURL:[[NSURL alloc] initFileURLWithPath:filePath]]];
    self.myWebView.delegate = self;
    [self.view addSubview:self.myWebView];
}

2、创建OC与JS的交互按钮并实现OC调用JS方法（OC调用JS）：

#pragma mark - 准备JS交互按钮
- (void)JSInteractiveButton
{
    CGSize size = self.view.frame.size;
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(20, 30, size.width - 40.0, 40)];
    [button setTitle:@"OC与JS交互" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor orangeColor]];
    [button addTarget:self action:@selector(interactive:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    
}<pre name="code" class="objc">#pragma mark - 按钮事件
- (void)interactive:(id)sender
{
    /// @brief OC调用JS的方法，showAlert2()为JS方法名，在调用JS方法之前需HTML完成加载
    [self.myWebView stringByEvaluatingJavaScriptFromString:@"showAlert2()"];
    
}

四、交互准备（JS调用OC）：

1、首先建立一个TestJSObject类，此类继承NSObject，在此类中需要创建一个协议，协议中包含供JS调用的方法，此类需要实现此协议，具体代码如下：

TestJSObject.h文件

/**
 *  @file
 *  @author 张凡
 *  @date 2016/3/4
 */
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
/**
 *  @class TestJSObjectProtocol
 *  @brief 此类存放供JS调用的方法
 *  @author 张凡
 *  @date 2016/3/4
 */
@protocol TestJSObjectProtocol <JSExport>

-(NSString *)TestNOParameter;
-(void)TestOneParameter:(NSString *)message;
-(void)TestTowParameter:(NSString *)message1 SecondParameter:(NSString *)message2;

@end

@interface TestJSObject : NSObject<TestJSObjectProtocol>



@end

TestJSObject.m文件

#import "TestJSObject.h"

@implementation TestJSObject

//以下方法都是只是打了个log 等会看log 以及参数能对上就说明js调用了此处的iOS 原生方法
-(NSString *)TestNOParameter
{
    NSLog(@"this is ios TestNOParameter");
    
    return @"zhangsan";
}
-(void)TestOneParameter:(NSString *)message
{
    NSLog(@"this is ios TestOneParameter=%@",message);
}
-(void)TestTowParameter:(NSString *)message1 SecondParameter:(NSString *)message2
{
    NSLog(@"this is ios TestTowParameter=%@  Second=%@",message1,message2);
}

@end

2、Controller实现UIWebViewDelegate协议后需要在Controller中写入-webViewDidFinishLoad此WebView代理方法，此方法在WebView加载完成时会被调用，在此方法中定义URL拦截器

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    /// @brief 创建JSContext对象(此处通过webview的键获取到JSContext)
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    /// @brief OC调用JS
//    NSString *javascript = @"alert('test js OC')";
    JSValue *str = [context evaluateScript:@"showAlert('张三')"];
    NSString *str3 = [NSString stringWithFormat:@"012-%@",str];
    NSLog(@"%@",str3);
    
    /// @brief JS调用OC(方法一)
    /// @brief test1为就是js的方法名称，赋值给一个block 里面是oc代码
    /// @brief 此方法最终将打印出所有接收到的参数,js参数是不固定的
//    context[@"test1"] = ^(){
//        NSArray *args = [JSContext currentArguments];
//        for (id obj in args) {
//            NSLog(@"%@",obj);
//        }
//    };
    
//    /// @brief 用OC调JS模拟JS调用OC
//    NSString *jsFunctStr = @"test2('参数1')";
//    [context evaluateScript:jsFunctStr];
    
    
    
    /// @brief JS调用OC(方法二)
    TestJSObject *testJO = [[TestJSObject alloc] init];
    context[@"testobject"] = testJO;
    
    /// @brief 通过OC调用JS模拟JS调用OC
    NSString *jsStr1 = @"testobject.TestNOParameter()";
    JSValue *backValue = [context evaluateScript:jsStr1];
    NSLog(@"返回值：%@",backValue);
    NSString *jsStr2 = @"testobject.TestOneParameter('参数1')";
    [context evaluateScript:jsStr2];
    NSString *jsStr3 = @"testobject.TestTowParameterSecondParameter('参数2','参数3')";
    ///  @"testobject.TestTowParameterSecondParameter('参数A','参数B')";  
    [context evaluateScript:jsStr3];
}

OC与JS的交互大致就是这样，写的不够详细，如有不明白的地方欢迎咨询：

QQ：294491256

Telephone：13390517636

完整代码下载：Demo1 Demo2