WKWebView中的js与原生App的交互

由于业务需要，最近开发并总结了关于JavaScript和原生app的交互的一些实现方式。

通常情况下，我们加载一个网页，然后使用WKWebView展示它。WKWebView自开发以来就提供了丰富的js和原生的交互能力，比如为了能够获取网页中的一些内容，我们可以使用原生方法执行JavaScript代码来实现信息抓取，然后再将结果回传到原生环境。

至于js如何主动调用原生方法，并携带上原生app需要的结果，这里总结了以下几种方式：

  • 通过截获js的跳转请求，进入原生回调
  • 通过执行js函数得到返回结果，回到原生方法
  • 通过js脚本注入
    • 官方支持：直接注入带有消息发送机制的js脚本
    • 间接注入带有脚本URL的标签，方便js代码的动态修改


<br />

方法一:截获js的跳转请求

比如点击网页中一个链接，该链接会导致新页面的加载。而WKWebView响应加载之前，会首先截获这个行为，然后调用下面这个WKNavigationDelegate代理方法，让开发者来决定是允许还是取消该行为。

-[WKWebView webView:decidePolicyForNavigationAction:decisionHandler:]

比如这段js代码：window.location.href = "https://www.google.com"，表示当前的webview将要跳转到新的网址，如果实现了上面的代理，该行为就会首先被WKWebView拦截下来，只有经过了开发者允许后，才会执行新的跳转请求。

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    // 比如只允许加载https:
    NSString *href = navigationAction.request.URL.absoluteString;
    if ([href hasPrefix:@"https://"]) {
        decisionHandler(WKNavigationActionPolicyAllow);
    } else if ([href hasPrefix:@"http://"]) {
        decisionHandler(WKNavigationActionPolicyCancel);
    }
    // ...
}

而这种机制也提供了一个js调用原生app的机会。比如将js代码改成:
window.location.href = 'myapp://get_info_' + json.toString()
并且传递一个json在链接中，那么objc就有机会截取到整个链接的信息，然后解析并取出其中的参数，顺便取消WKWebView对该链接的加载行为，这样就达到了从js传递给原生app信息的目的。

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    NSString *href = navigationAction.request.URL.absoluteString;
    if ([href hasPrefix:@"myapp://get_info_"]) {
        // parse and get json, then ...
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

注意如果从js传递的信息中带有中文字符，那么这些字符首先会被转义成为URL编码后的格式，才能进行跳转请求。例如myapp://get_info_苹果就成了myapp://get_info_%e8%8b%b9%e6%9e%9c这样的信息。而原生应用为了得到并且还原这些字符串，可以使用NSString的UTF8的解码方式进行中文的还原。

<br />

方法二:通过执行js函数得到返回结果

WKWebView本身自带了执行js的方法：
-[WKWebView evaluateJavaScript:completionHandler:]

该方法不会阻塞用户在主线程的网页交互，且保证回调block一定在主线程中。如果js代码有返回值的话，那么返回值就可以在block里面获取到。这就要求js的代码以函数的形式，在该作用域中返回一个结果。

比如执行以下代码：

NSString *js = @"function greeting() { return 'hello'; }; greeting();";

[webView evaluateJavaScript:js completionHandler:^(id _Nullable callback, NSError * _Nullable error) {
    NSLog(@"%@", callback); // 输入hello
}];

可以通过这种方式，用js抓取网页的信息，将结果通过函数返回的形式，告诉原生app。

<br />

方法三:官方提供的js脚本注入和原生回调

这里提到的向WKWebView进行js脚本注入和回调，其实是苹果提供的自家支持，允许webView在展示一个网页前，先运行指定的js脚本，完成特殊的需求。然后在js的脚本中，可以通过发送消息(Post Message)的方法给原生app传递结果，而原生app只需要注册一个消息处理机制(Message Handler)即能接收到来自js发送的消息。举个例子，我需要加载google.com的时候，通过js代码来获取google的标题信息，把结果传递给app。

首先写好js代码：获取网页标题，接着命名一个didFindTitle消息，这里的didFindTitle是自定义的，可以根据不同需求来定义成不同名字，最后发送消息给app。

var title = document.getElementsByTagName("title")[0].textContent;
window.webkit.messageHandlers.didFindTitle.postMessage(title)

建议把js代码单独保存为文件形式，这里保存为get_title.js文件，加入到Xcode项目中，避免与原生代码过度混淆；然后需要创建一个WKUserScript脚本对象，作为配置信息添加到WKWebView中去。

// 读取js脚本
NSString *filePath = [NSBundle.mainBundle pathForResource:@"get_title" ofType:@"js"];
NSString *javaScript = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];

// 生成WKUserScript对象
WKUserScript *script = [[WKUserScript alloc] initWithSource:javaScript
                                              injectionTime:WKUserScriptInjectionTimeAtDocumentStart
                                           forMainFrameOnly:YES];

// 生成WKWebViewConfiguration配置信息
WKWebViewConfiguration *configuration = [WKWebViewConfiguration new];
[configuration.userContentController addUserScript:script]; // 添加脚本
[configuration.userContentController addScriptMessageHandler:self name:@"didGetTitle"]; // 注册消息处理器

// 生成带有自定义配制的WKWebView
self.webView = [[WKWebView alloc] initWithFrame:frame configuration:configuration];

接下来需要实现WKScriptMessageHandler协议的一个方法：

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    // 匹配消息名称，这里需要匹配的是didFindTitle
    if ([message.name isEqualToString:@"didFindTitle"]) {
        NSString *title = message.body; // 获取发送的消息内容
        // ...
    }
}

运行后，在网页显示之前，就能获得网页的标题了。

脚本注入时机

关于脚本注入的时机，只有WKUserScriptInjectionTimeAtDocumentStart和WKUserScriptInjectionTimeAtDocumentEnd可以选择，以下是文档解释：

  • Start: Inject the script after the document element has been created, but before any other content has been loaded. 意思是网页中的元素标签创建刚出来的时候，但是还没有内容。该时机适合通过注入脚本来添加元素标签等操作。（注意：此时<head>和<body>等标签都还没有出现）
  • End: Inject the script after the document has finished loading, but before any subresources may have finished loading. 意思是网页中的元素标签已经加载好了内容，但是网页还没有渲染出来。该时机适合通过注入脚本来获取元素标签内容等操作。（如果注入的js代码跟修改元素标签有关的话，这就是合适的时机）

在demo中，我试图在两个时机分别在DOM树中各插入一个元素，结果如下：

dom-tree.jpg

使用消息处理的注意事项

  1. 注意copy关键字

从文档中可以看到，创建WKWebView的时候，会传入一个WKWebViewConfiguration对象作为网页的配置信息（没有传的话就是默认的配置），该配置对象在加入到webView以后会被其拷贝，意味着之后修改配置信息的话将会被webView无视。

即便如此，WKWebViewConfiguration自己的属性对象并没有实现NSCopying，比如WKUserContentController，这就意味着它们的属性是可以修改，并且改完还是奏效的:

// 获取WKWebView的配置，这里得到一个copy的对象
WKWebViewConfiguration *configuration = self.webView.configuration;
// 从copy来的配置中，得到userContentController，这里的引用和copy前的配置引用的是同一个对象
WKUserContentController *userContentController = configuration.userContentController;
// 添加脚本等
[userContentController addUserScript:script];
[userContentController addScriptMessageHandler:self name:@"didFindTitle"];

这个例子说明WKUserContentController对象可以在WKWebView创建好以后再次添加新配置，不过官方还是建议使用WKWebView的时候，最好是先配置好了再使用，而不是使用的时候修改配置。

  1. 注意addScriptMessageHandler:导致的引用循环

addScriptMessageHandler:方法会将作为参数的消息处理目标对象建立强引用关系，就像使用NSTimer一样，很容易陷入引用循环。

[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"xxx"]

当然解决方案也很容易，就像NSTimer使用过后调用[timer invalidate]一样，调用相应的移除方法，即可打破循环引用。

[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"xxx"];

<br />

动态修改js脚本

上面提到的js脚本，如果放在app的bundle中随着发布版本来更新的话，自然是可行的。但是哪个产品经理不希望js脚本能即改即用（其实互联网产品经理希望任何东西都能支持动态配置～），为了实现这个需求，可以有两个方案：

  1. 每次检查js的脚本更新，如有更新，将更新后的js脚本下载到app，确保使用最新的脚本
  2. 在网页中注入包含脚本URL的标签，让网页自己去加载最新的js脚本

第一种方案的实现，就是下载文件到设备的文件目录，使用新文件替代旧文件。
下面主要介绍第二种方案，通常网页元素中会包含这样的标签：
<script type="text/javascript" src="xxx.js"></script>

意思是网页会通过这里提供的URL路径来加载脚本文件。这样的话，就可以不用直接注入实际的js代码，而是注入一个包含脚本URL的script标签，让网页通过URL的方式来获取脚本，于是脚本的代码就可以随时动态修改了，改完部署到服务器上，也无需改动URL地址。当然了，如果载入自家前端做的网页，那么这个标签完全可以写在网页中，但如果是加载任何一个网页的话，就只能通过注入的方式来进行统一处理。

举例：比如前端写好一个js文件，用于抓取网页的标题，如下：

function grabTitle() {
    return document.getElementsByTagName("title")[0].textContent;
}

把该文件命名为grab_title.js，然后上传至服务器上，假设访问路径定为https://your_host/grab_title.js。至于为什么推荐https而不是http，因为浏览器会阻止向https的网页中运行来自不安全的js，从而导致即使注入成功也不会执行js代码的窘境。

接下来实现iOS端，这里给WKUserScript添加一个插入script标签和属性的扩展方法，即创建和向网页中插入script标签。

typedef NS_ENUM(NSInteger, HTMLScriptTagPosition) {
    HTMLScriptTagPositionHead, // 将节点插入在<head>中
    HTMLScriptTagPositionBody, // 将节点插入在<body>中
};

@interface WKUserScript (ScriptURL)

// 通过传入一个或者多个脚本URL，来生成一个WKUserScript对象
- (instancetype)initWithScriptURLs:(NSArray <NSString *> *)scriptURLs toPosition:(HTMLScriptTagPosition)position forMainFrameOnly:(BOOL)forMainFrameOnly;

@end

@implementation WKUserScript (ScriptURL)

- (instancetype)initWithScriptURLs:(NSArray <NSString *> *)scriptURLs toPosition:(HTMLScriptTagPosition)position forMainFrameOnly:(BOOL)forMainFrameOnly {
    
    NSMutableString *javaScript = [NSMutableString string];
    
    NSString *targetElement = nil;
    switch (position) {
        case HTMLScriptTagPositionHead: targetElement = @"head"; break;
        case HTMLScriptTagPositionBody: targetElement = @"body"; break;
    }
    
    for (NSUInteger i = 0; i < scriptURLs.count; i++) {
        NSString *scriptURL = scriptURLs[i];
        
        // 创建<script>标签
        [javaScript appendFormat:@"var scriptElement%@ = document.createElement('script');", @(i)];
        [javaScript appendFormat:@"scriptElement%@.setAttribute(\"type\", \"text/javascript\");", @(i)];
        [javaScript appendFormat:@"scriptElement%@.setAttribute(\"src\", \"%@\");", @(i), scriptURL];
        
        // 将<script>插入到<head>或者<body>中去
        [javaScript appendFormat:@"var targetElement = document.getElementsByTagName('%@')[0];", targetElement];
        [javaScript appendFormat:@"targetElement.appendChild(scriptElement%@);", @(i)];
    }
    
    return [self initWithSource:javaScript.copy
                  injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
               forMainFrameOnly:forMainFrameOnly];
}

@end

使用扩展方法创建WKUserScript对象，将其注入到网页中即可：

NSString *scriptURL = @"https://your_host/grab_title.js";
NSString *requestURL = [scriptURL stringByAppendingFormat:@"?%@", @(arc4random() % 999)];
WKUserScript *script = [[WKUserScript alloc] initWithScriptURLs:@[requestURL] toPosition:HTMLScriptTagPositionBody forMainFrameOnly:YES];

如果注入成功，那么在网页的<body>最后会出现一个新的节点<script type="text/javascript" src="https://your_host/grab_title.js?123"></script>，这里特别在URL后面添加了一个随机数，本意是为了防止下一次请求相同URL的时候，浏览器会默认使用上次的缓存结果。当然你可以通过代码将webview设为“无痕迹浏览”，或者手动清理缓存文件来实现每次都能下载并使用最新的grab_title.js，但是我感觉做法都不如直接用随机数方案解决起来的方便。

当网页加载完成后，会正常下载了定义好的grabTitle()函数，这时候就可以通过webview执行js方法

[webView evaluateJavaScript:@"grabTitle();" completionHandler:^(NSString *title, NSError * _Nullable error) {
    NSLog(@"title = %@", title);
}];

以后前端更新了js文件，只要保持调用函数的名称和返回值格式一致，那么iOS端就不用做升级维护，并且无需担心因为缓存问题而无法使用最新的js脚本。当然这样的脚本还是越轻量越好。

注入脚本URL的注意事项

  • 脚本中的js向原生app的回调方案可以是多样化的，只需要事先约定好一个策略：可以是发送消息和消息处理；也可以是函数定义；还可以让原生app截获js跳转请求等等。定好以后就统一规范，在未来的脚本更新中依然保持一致的回调方式
  • script标签位置通常在<head>或者<body>中，否则会有bug。放在<head>中会优先下载脚本，同时阻塞后面的HTML元素解析，影响网页加载速度；而放在<body>中则会等到页面元素解析完成以后，才会加载脚本；这里有文档列出了script其他的属性可供参考
  • 及时用浏览器的网页检查器来调试，查看注入后的网页元素是否符合预期，注入后的js是否正常工作。方法是：
    1. 使用iPhone真机或模拟器运行app，加载网页，完成注入工作
    2. 保持该网页在屏幕中的展示，不要退出；如果是真机，确保设备与Mac连接
    3. 在Mac上运行Safari，在菜单中选择“开发” -> "xxx's iPhone"（真机） / "Simulator"（模拟器）-> 选择该页面（鼠标移动到该选项的时候，页面会显示高亮状态）
    4. 在网页检查器中，选择“元素”可以查看网页标签和内容，在“控制台”可以调试js代码
  • 如果注入标签成功，但是网页却没有加载脚本代码，看看是不是浏览器会阻止在https的网页中加载不安全的http的URL。我本人就是在前端同事的帮助下，使用Safari网络检查到了以下的警告：[blocked] The page at https://en.m.wikipedia.org/wiki/Main_Page was not allowed to run insecure content from http://ougg9cexh.bkt.clouddn.com/grab_title.js.，所以建议使用https的脚本URL

<br />

通过脚本注入来修改网页

举个例子，我加载一篇网页文章，文章默认是Helvetica字体，排版比较规范，但是我希望实际显示成menlo字体，看起来更符合程序员的喜好，那么可以通过js脚本注入的方法，在网页载入前，改变CSS的样式。脚本的格式如下：

var styleElement = document.createElement('style');
document.documentElement.appendChild(styleElement);
styleElement.textContent = 'body { font-family : menlo !important; };';

意思是通过js添加一个style标签，来设置body的字体为menlo，并且设置了高优先级。如果执行的话，下面这段结构就会加入到网页元素中去。

<style> 
body {
    font-family : menlo !important;
};
</style>

有了脚本以后，创建WKUserScript等来实现注入，这里就不重复了，但是需要注意：既然是修改元素内容，那么注入时机就得等到所有元素标签加载完成后，即WKUserScriptInjectionTimeAtDocumentEnd

运行后，不出别的问题的话，网页上的字体就被修改了。

总结

以上分享了一些js向原生app交互的方式，总结起来可以这么说：

  • js脚本可以保存在app中，还可以通过远程下载，或URL链接的形式获取
  • js脚本可以通过evaluate方法执行，也可以首先被注入在页面中，等需要的时候在执行
  • js脚本带着参数调用原生app时，可以等着跳转请求时被app截获，可以通过函数返回值直接给到结果，也可以通过发送消息机制；根据不同的需求制定出不同方案就好
  • js脚本在服务器端更新后，如果app使用URL的方式读取脚本，需要避免读取本地的缓存结果

最后贴个demo地址。

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

推荐阅读更多精彩内容