WebView 与 JS交互

一、简介

iOS 在开发中用到了网页, 网页方法和OC 方法相互调用.

二、目的以及注意事项(优缺点)

目的(优点):

iOS 加入 H5 可以实现嵌入别的功能入口, 可以使随时更改, 不用更新版本就可以上线,这是最大的优点.

注意事项(缺点):

iOS 加入 H5 响应比原生的要慢很多, 体验不是很好.

步骤

• 导入 JavaScriptCore 的头文件

#import 
@property (nonatomic, strong) JSContext *context;

• 用 webView 加载 HTML 文件, 这里用的是本地 HTML

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    NSString *path = [[[NSBundle mainBundle] bundlePath]  stringByAppendingPathComponent:@"JSCallOC.html"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL requestWithURL:网址]];
    [self.webView loadRequest:request];
}

• 在 JS 交互中, 很多事情都是在 webView 的 delegate 方法中完成的, 通过 JS Content 创建的一个使用 JS 的环境, 所以这里, 我们先将 self.content 在这里面初始化

- (void)webViewDidFinishLoad:(UIWebView *)webView {

     //初始化content
     self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    // 打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息,
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"%@", exceptionValue);
    };
}

通过block的形式关联 javaScript function 调用 JS 方法

context[@"callback"] = ^ {
        dispatch_async(dispatch_get_main_queue(), ^{
            [self.navigationController pushViewController:homeBanner animated:YES];
        });
    };