iOS下OC与JS的交互(WKWebview-MessageHandler实现)

在开发过程中，iOS 中实现加载 web 页面主要有两种控件，UIWebView 和 WKWebview，两种控件对应具体的实现方法不同。WKWebView是苹果公司在iOS8系统推出的，这里我们主要概述WebKit中更新的WKWebView控件的新特性与使用方法。

一、 WKWebView的代理方法

WKNavigationDelegate
该代理提供的方法，可以用来追踪加载过程（页面开始加载、加载完成、加载失败）、决定是否执行跳转。

// 页面开始加载时调用
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;

// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;

// 页面加载完成之后调用
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;

// 页面加载失败时调用
 -(void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

页面跳转的代理方法有三种，分为（收到跳转与决定是否跳转两种）：

 // 接收到服务器跳转请求之后调用
 -(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;

 // 在收到响应后，决定是否跳转
 -(void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;

// 在发送请求之前，决定是否跳转
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

2.WKUIDelegate

   //创建一个新的webView
   -(WKWebView**)webView:(WKWebView***)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

下面代理方法全都是与界面弹出提示框相关的，针对于web界面的三种提示框（警告框、确认框、输入框）分别对应三种代理方法。下面只列举了警告框的方法。

-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;

3.WKScriptMessageHandler

   // 从web界面中接收到一个脚本时调用

   -(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

四、WKWebView加载JS

NSString *js = @"";

// 根据JS字符串初始化WKUserScript对象

WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

// 根据生成的WKUserScript对象，初始化WKWebViewConfiguration

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];

下面开始进入正题

1. 首先需要引入WebKit库

   #import <WebKit/WebKit.h>

2.MessageHandler
创建WKWebViewConfiguration，配置各个API对应的MessageHandler

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userContentController = [[WKUserContentController alloc] init];

[userContentController addScriptMessageHandler:self name:@"Share"];
[userContentController addScriptMessageHandler:self name:@"Camera"];
configuration.userContentController = userContentController;

WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
preferences.minimumFontSize = 40.0;
configuration.preferences = preferences;

3.创建WKWebView
//loadFileURL方法通常用于加载服务器的HTML页面或者JS，而loadHTMLString通常用于加载本地HTML或者JS

NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"WKWebViewMessageHandler" ofType:@"html"];
NSString *fileURL = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[self.webView loadHTMLString:fileURL baseURL:baseURL];
self.webView.UIDelegate = self;
[self.view addSubview:self.webView];

4.实现协议方法

#pragma mark -- WKScriptMessageHandler
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
//JS调用OC方法
//message.boby就是JS里传过来的参数
NSLog(@"body:%@",message.body);

if ([message.name isEqualToString:@"Share"]) {
    [self ShareWithInformation:message.body];
    
} else if ([message.name isEqualToString:@"Camera"]) {
    [self camera];
}
}

WKScriptMessage有两个关键属性name 和 body。因为我们给每一个OC方法取了一个name，所以就可以根据name 来区分执行不同的方法。body 中存着JS 要给OC 传的参数。

#pragma mark - Method
-(void)ShareWithInformation:(NSDictionary *)dic
{
if (![dic isKindOfClass:[NSDictionary class]]) {
    return;
}
NSString *title = [dic objectForKey:@"title"];
NSString *content = [dic objectForKey:@"content"];
NSString *url = [dic objectForKey:@"url"];

//在这里写分享操作的代码
NSLog(@"要分享了哦😯");

//OC反馈给JS分享结果
NSString *JSResult = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];

//OC调用JS
[self.webView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    NSLog(@"%@", error);
}];
}

-(void)camera
{
//在这里写调用打开相册的代码
[self selectImageFromPhotosAlbum];
}

4.HTML文件中JS调用代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <script language="javascript">

        //JS执行window.webkit.messageHandlers.Share.postMessage(<messageBody>)
        function shareClick() {
            window.webkit.messageHandlers.Share.postMessage({title:'测试分享的标题',content:'测试分享的内容',url:'https://github.com/maying1992'});
        }
        
        //分享回调结果显示
        function shareResult(channel_id,share_channel,share_url) {
            var content = channel_id+","+share_channel+","+share_url;
            alert(content);
            document.getElementById("returnValue").value = content;
        }
        
        //JS执行window.webkit.messageHandlers.Camera.postMessage(<messageBody>)
        function cameraClick() {
            window.webkit.messageHandlers.Camera.postMessage(null);
        }
        
        //调用相册回调结果显示
        function cameraResult(result) {
            alert(result);
            document.getElementById("returnValue").value = result;
        }
            </script>
        </head>

<body>
    <h1>这是按钮调用</h1>
    <input type="button" value="分享" onclick="shareClick()" />
    <input type="button" value="相机" onclick="cameraClick()" />

    <h1>回调展示区</h1>
    <textarea id ="returnValue" type="value" rows="5" cols="40">
        
    </textarea>
</body>
</html>

代码解释：

 在中JS 执行window.webkit.messageHandlers.<name>.postMessage(<messageBody>)时，OC端被添加的ScriptMessageHandler就会执行实现的WKScriptMessageHandler协议的方法 即

-(void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message
{
}

这样在代理方法里面实现相应本地原生方法的代码，就完成了JS调用OC本地的过程。

5.OC调用JS

NSString *JSResult = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    NSLog(@"%@", error);
}];

代码解释：
通过 -evaluateJavaScript:completionHandler:实现OC调用JS，跟JavaScriptCore中的evaluateScript方法类似。

效果图：
点击分享按钮

屏幕快照 2016-10-13 下午2.56.37.png

点击相机按钮

屏幕快照 2016-10-13 下午2.57.20.png

屏幕快照 2016-10-13 下午2.57.35.png

总结：
WKWebView新特性

1.在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存，模拟器加载百度与开源中国网站时，WKWebView占用23M，而UIWebView占用85M）；
2.允许JavaScript的Nitro库加载并使用（UIWebView中限制）；
3.支持了更多的HTML5特性；
4.高达60fps的滚动刷新率以及内置手势；
5.将UIWebViewDelegate与UIWebView重构成了14类与3个协议。

WKWebview-MessageHandler 、WebViewJavaScriptBridge、JavaScriptCore优缺点

1.WebViewJavaScriptBridge缺点就是要固定的加入相关代码，JS端代码要在固定的函数内添加，使用拦截协议URL的方式传递参数需要把参数拼接在后面，遇到要传递的参数有特殊字符，例如& 、= 、？等解析容易出问题;
bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992&content=每天都是好心情&img=图片'}, function(response) {
         log('JS端 得到 response', response)
2.WKWebview-MessageHandler在JS中写起来更简单一点，JS传递参数更方便，减少参数中特殊字符引起的错误,WKWebView在性能、稳定性方面更加强大；
3.JavaScriptCore使用起来比较简单，方便web端和移动端的统一。

源码
喜欢的亲们随手给个星星

最后编辑于：2020.07.27 18:05:37

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,847评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,208评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,587评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,942评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,332评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,587评论 1赞 218
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,853评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,568评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,273评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,542评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,033评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,373评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,031评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,073评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,830评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,628评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,537评论 2赞 269

iOS下OC与JS的交互(WKWebview-MessageHandler实现)

推荐阅读更多精彩内容