前言
基于UIWebView的JS与OC交互（一）之JSExport
基于UIWebView的JS与OC交互（二）之拦截URL
基于UIWebView的JS与OC交互（三）之Block
基于WKWebView的JS与OC交互
本篇文章基于UIWebView进行介绍，详细demo在这里。
在开发过程中避免不了使用网页进行数据展示和操作，JS与OC的交互就起到了很大的作用。WKWebView是在ios8.0以后出现的，在下一篇文章，会介绍关于WKWebView中JS与OC之间的交互。
正文
JS与OC的交互是双向的。
第一步，OC调用JS
NSString *js_str = [NSString stringWithFormat:@"alert('%@')", @"h5弹窗"]; //准备执行的js代码
[webPageView stringByEvaluatingJavaScriptFromString:js_str];
image.png
第二步，JS调用OC方法
本篇文章通过声明代理并遵循JSExport协议来完成调用。注：代理声明的方法与调用的方法名保持一致。
H5代码（调用方法）：
window.test1.showAlert('js调用oc本地方法');
注意：test1为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<JSObjcDelegate>
@property(nonatomic, weak)id<JSObjcDelegate> delegate;
@end
NS_ASSUME_NONNULL_END
注意：在.h中声明代理的同时，要遵循代理协议，否则代理方法是无法调起的。
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:@"jsExport-oc原生弹窗" message:tip delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, 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"];
//test1：H5与移动端约定的id
jsContext[@"test1"] = jsObject;
jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
并在- (void)webViewDidFinishLoad:(UIWebView )webView代理方法中调用- (void)js_ocMethod*即可。
image.png
最后，这是html文件中的代码，该文件在也已经包含在Demo中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<div>
<p h3>JS与OC交互</p>
</div>
<div>
<!-- 初始化一个按钮，点击调用boc本地方法 -->
<input type="button" value="OC本地弹窗" onclick="show()">
</div>
<script type="text/javascript">
//show为按钮点击的响应事件
//showAlert为oc本地方法
//test1为q移动端与h5约定的id
function show(){
window.test1.showAlert('js调用oc本地方法');
}
</script>
</body>
</html>
iOS技术交流群：681732945
