UIWebView之JS与OC交互（一）

前言

本篇文章基于UIWebView进行介绍，详细demo在这里。
在开发过程中避免不了使用网页进行数据展示和操作，JS与OC的交互就起到了很大的作用。WKWebView是在ios8.0以后出现的，在下一篇文章，会介绍关于WKWebView中JS与OC之间的交互。

---

正文

JS与OC的交互是双向的。

第一步，OC调用JS

NSString *js_str = [NSString stringWithFormat:@"alert('%@')", @"oc调用js"]; //准备执行的js代码    
[webPageView stringByEvaluatingJavaScriptFromString:js_str];

image.png

第二步，JS调用OC方法

本篇文章通过声明代理并遵循JSExport协议来完成调用。注：代理声明的方法与调用的方法名保持一致。

H5代码（调用方法）：

window.test.showAlert('弹窗');

注意：test为h5与移动端约定的上下文id。

代理类
JSObject.h

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjcDelegate <JSExport>
/**
 *  调起弹窗
 *  tip  描述文案
 */
- (void)showAlert:(NSString *)tip;
@end
NS_ASSUME_NONNULL_BEGIN

@interface JSObject : NSObject

@property(nonatomic, weak)id<JSObjcDelegate> delegate;
@end
NS_ASSUME_NONNULL_END

JSObject.m

#import "JSObject.h"

@implementation JSObject
//调起弹窗
- (void)showAlert:(NSString *)tip
{
    [self.delegate showAlert:tip];
}
@end

方法的实现放到控制器的.m中，如果需要放到base类中实现，也可以放到baseVC中，如下：
ViewController.m

//本地方法的具体实现
- (void)showAlert:(NSString *)tip
{
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"测试" delegate:nil cancelButtonTitle:tip otherButtonTitles:@"OK", nil];
    [alert show];
}

---

以上是本地方法代理的声明以及方法的实现，然而，如何调用呢？
接下来是方法的调用：
ViewController.m
初始化UIWebView：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    webPageView = [UIWebView new];
    webPageView.delegate = self;
    webPageView.scalesPageToFit = YES;
    webPageView.frame = CGRectMake(0, 0, KScreenWidth, KScreenHeight - 50);
    [self.view addSubview:webPageView];
//    [webPageView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
    NSString *path = [[NSBundle mainBundle] pathForResource:@"myHtml" ofType:@"html"];
    [webPageView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
}

通过JSContext实现本地方法与JS的连接:

//js调用oc本地方法
- (void)js_ocMethod
{
    //方法类
    JSObject *jsObject = [JSObject new];
    jsObject.delegate = self;
    //js执行环境，包含了js执行时所需要的所有函数和对象
    JSContext *jsContext = [webPageView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //test：H5与移动端约定的id
    jsContext[@"test"] = jsObject;
    jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息：%@", exceptionValue);
    };
}

并在- (void)webViewDidFinishLoad:(UIWebView )webView代理方法中调用- (void)js_ocMethod*即可。