iOS的JS和OC代码互相调用

最新推荐文章于 2021-09-24 11:35:38 发布

M.François

最新推荐文章于 2021-09-24 11:35:38 发布

阅读量2.3k

点赞数

分类专栏： IOS 文章标签：函数 html javascript uiwebview

本文链接：https://blog.csdn.net/u013538542/article/details/51030696

版权

IOS 专栏收录该内容

90 篇文章 1 订阅

订阅专栏

1.JS调用OC代码

步骤1：以下是html页面，test1函数，并没有在页面中声明，而是在OC的UIWebView中绑定的

<html>
<head>
    <script>
        //test2(p)函数是准备 OC调用JS函数用的
        function test2(p){
            alert(p);
        }
    </script>
</head>
<body>
    <input type="button" value="点击-> test1()" οnclick="test1()" />
</body>
</html>

步骤2：控制器中的OC代码

#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>

@interface ViewController ()<UIWebViewDelegate>
@property (nonatomic, strong) UIWebView *webView;
@end

@implementation ViewController

- (UIWebView *)webView
{
    if (!_webView) {
        CGRect rect = self.view.bounds;
        rect.size.height = rect.size.height * 0.8;
        rect.origin.y = rect.size.height;
        _webView = [[UIWebView alloc] initWithFrame:rect];
        _webView.delegate = self;
        [self.view addSubview:_webView];
    }
    return _webView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
 
    NSString *path = [[NSBundle mainBundle] pathForResource:@"static" ofType:@".html"];
    NSString *htmlString = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    [self.webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:path]];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    //JS调用OC代码
    context[@"test1"] = ^{
        //由于JS参数是不固定的，所以取出来的就是个数组
        
        NSLog(@"JS已经成功调用OC的block了");
        NSArray *a = [JSContext currentArguments];
        for (NSString *s in a) {
            NSLog(@"s = %@", s);
        }
    };
    
    
    
    
    //OC调用JS函数
    [context evaluateScript:@"test2(\"OC调用JS函数\");"];
    
    
}

@end

在UIWebView加载完页面后的事件中，加入了JS的方法，使得当页面点击按钮事件时，OC的context[@"test1"]方法被调用了

通过evaluateScript:方法可以调用页面中的JS函数

2.使用一种特殊的方式来调用，遵守JSExport协议

例如：定义一个协议，有三个方法，由遵守类去实现，并且通过JS调用

新建一个类

头文件

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>

@protocol ZRContextExportProtocol <JSExport>

//无参数方法
- (void)testNoParameter;

//有一个参数的方法
- (void)testOneParameter:(NSString *)params;

//有两个参数的方法
- (void)testTwo:(NSString *)params WithAddress:(NSString *)addr;

@end


@interface ZRContextExport : NSObject<ZRContextExportProtocol>

@end

源文件

#import "ZRContextExport.h"

@implementation ZRContextExport

- (void)testNoParameter
{
    NSLog(@"无参数，无返回值的OC函数");
}

- (void)testOneParameter:(NSString *)params
{
    NSLog(@"一个参数，无返回值得OC函数， params=%@", params);
}

- (void)testTwo:(NSString *)params WithAddress:(NSString *)addr 
{
    NSLog(@"有参，有返回值的的OC函数， params=%@, addr=%@", params, addr); 
}

@end

OC调用

#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
#import "ZRContextExport.h"

@interface ViewController ()<UIWebViewDelegate>
@property (nonatomic, strong) UIWebView *webView;
@end

@implementation ViewController

- (UIWebView *)webView
{
    if (!_webView) {
        CGRect rect = self.view.bounds;
        rect.size.height = rect.size.height * 0.8;
        rect.origin.y = rect.size.height;
        _webView = [[UIWebView alloc] initWithFrame:rect];
        _webView.delegate = self;
        [self.view addSubview:_webView];
    }
    return _webView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
 
    NSString *path = [[NSBundle mainBundle] pathForResource:@"static" ofType:@".html"];
    NSString *htmlString = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    [self.webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:path]];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    
    //实例化ZRContextExport类，将该对象注入到JS中
    ZRContextExport *contextExport = [[ZRContextExport alloc] init];
    context[@"ZRContextObject"] = contextExport;
    
    //调用一个函数
    [context evaluateScript:@"ZRContextObject.testNoParameter()"];
    
    //注意这的OC函数名问题
    [context evaluateScript:@"ZRContextObject.testTwoWithAddress('第三个函数测试','北京市');"];
}

@end

JS调用

<html>
<head>
    <script>
         //调用的第二个函数
         function test1(){
             ZRContextObject.testOneParameter("第二个函数");
             ZRContextObject.testTwoWithAddress("第三个函数", "北京市");
         }
    </script>
</head>
<body>
    <input type="button" value="点击-> test1()" οnclick="test1()" />
</body>
</html>

好了，以上就是两种JS和OC的互相调用具体代码的实现，有问题的小伙伴儿可以在下面的额评论框提问，LZ一上线，就会回答的

M.François

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS的JS和OC代码互相调用

1.JS调用OC代码步骤1：以下是html页面，test1函数，并没有在页面中声明，而是在OC的UIWebView中绑定的 //test2(p)函数是准备 OC调用JS函数用的 function test2(p){ alert(p); } test1()" onc
复制链接

扫一扫