iOS与JS交互

下文中的Demo地址: iOS与JS交互

1.UIWebview与JavaScriptCore

JavaScriptCore中常用的类型：

  • JSContext ：JSContext代表JS的执行环境，它的对象通过-evaluateScipt: 方法就可以执行JS代码。可以通过
JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

来从webview上获取相应的JSContext。

  • JSValue ：JSValue中封装了JS与ObjC中对应的类型，实现相互间的转换，以及调用JS的API等。
  • JSExport ：JSExport是一个协议，一个协议A，只有当协议A继承自JSExport协议时，A中的方法才能被JS调用。

Objective-C与JS交互

通过JSContext，有两种方式与JS交互：

  1. 通过-evaluateScipt: 方法直接调用JS代码
    JSContext *context = [[JSContext alloc]init];
    [context evaluateScript:@"function add(a){return a + 10;}"]; // 定义函数
    [context evaluateScript:@"var num = 5;"]; // 定义变量
    JSValue *addFunc = context[@"add"]; // 获取add函数
    JSValue *numVar = context[@"num"]; // 获取变量num
    JSValue *result = [addFunc callWithArguments:@[numVar]];
    NSLog(@"%@",result); // 输出 15
  1. 向JSContext中注入对象模型，然后调用模型的方法
    HTML，在body标签中写如下代码： 
    <script>
        function callback(something){
            var target = document.getElementById('result');
            target.innerHTML = something;
        }
        function alertCallback(aString,bString){
            alert(aString+bString);
        }
    </script>
    <br/>
    <br/>
    <div>
        <input type="button" value="调用一个参数或无参数OC方法" onclick="OC.showMessage('are you Objective-C?')">
            <input type="button" value="调用多参数的OC方法" onclick="OC.mixAAndB('hellow','world')">
    </div>
    <br/>
    <br/>
    <div>
        <input type="button" value="调用OC方法并回调" onclick="OC.doSomethingThenCallBack('make it happen')">
    </div>
    <br/>
    <br/>
    <div>
        <h4>回调结果:</h4>
        <span id="result"></span>
    </div>

首先，在script标签中声明了两个回调方法，供iOS端来调用；
之后声明了三个button来调用不同的iOS的方法，第一个是一个参数或无参数的方法showMessage ,第二个是多参数的方法- mixAAndB 。
之所以要区分单个参数和多参数的情况，是因为当多个参数时，如iOS端的方法声明是- (void)mixA:(NSString *)a andB:(NSString *)b; 在JS调用时应该将方法名连起来，调整大小写，mixAAndB(a,b) 。
三个方法都是通过一个名为 OC 的对象调用，这个对象是要在iOS端注入的对象。
最后，callback方法中，将回调结果展示在一个span标签当中。

在协议中声明方法时，可以使用JSExport 中的JSExportAs 宏来缩短JS端调用时使用的方法名，这样JS端调用时只需要testArgumentTypes(i,d,b,s,n,a,o) 即可。

@protocol SomeProtocol <JSExport>
JSExportAs(testArgumentTypes,
           - (NSString *)testArgumentTypesWithInt:(int)i double:(double)d 
                    boolean:(BOOL)b string:(NSString *)s number:(NSNumber *)n 
                    array:(NSArray *)a dictionary:(NSDictionary *)o
           );
 
@end

在iOS的viewController的代码（仅做测试，不考虑代码是否合理）:
首先，声明一个协议JSInteract 并让它遵守JSExport 协议，在协议中声明需要让JS调用的方法：

#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSInteract <JSExport>

- (void)showMessage:(NSString *)message;
- (void)doSomethingThenCallBack:(NSString *)message;
- (void)mixA:(NSString *)aString andB:(NSString*)bString;
@end

让ViewController遵守JSInteract并实现协议中的方法

@interface ViewController ()<UIWebViewDelegate,JSInteract>
@property (nonatomic, strong) JSContext *context;
@property (nonatomic, strong)IBOutlet UIWebView *webview;
@end

接下来，在webview完成加载时，获取JSContext，并注入 OC 对象（即为vc本身），在vc中实现协议中声明的方法：

@implementation ViewController
 - (void)viewDidLoad {
    [super viewDidLoad];
    self.webview.delegate = self;
    NSURL *htmlUrl = [[NSBundle mainBundle]URLForResource:@"interact" withExtension:@"html"];
    [self.webview loadRequest:[NSURLRequest requestWithURL:htmlUrl]];
}

 - (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.context[@"OC"] = self; // 注入JS需要的“OC”对象
}

 - (void)showMessage:(NSString *)message
{
    NSLog(@"current:%@",[NSThread currentThread]);// 子线程
    dispatch_async(dispatch_get_main_queue(), ^{
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"JS 调用了 OC" message:message preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
        [alert addAction:cancel];
        [self presentViewController:alert animated:YES completion:nil];
    });
}

 - (void)doSomethingThenCallBack:(NSString *)message
{
    NSString *result = [message stringByAppendingString:@"<br/>OC get message from JS then call back."];
    JSValue *callback = self.context[@"callback"];
    [callback callWithArguments:@[result]];
}

 - (void)mixA:(NSString *)aString andB:(NSString *)bString
{
    NSLog(@"A:%@ and B:%@",aString,bString);
    JSValue *alertCallback = self.context[@"alertCallback"];
    [alertCallback callWithArguments:@[aString,bString]];
}

需要注意的是，JS调用iOS方法时，该方法会在子线程执行，如果需要刷新UI要切换到主线程，而回调JS方法时，保持在子线程即可。
效果：

[图片上传失败...(image-b9daf6-1523266142150)]

参考文章：
iOS与JS交互实战篇（Objc版）

另可参考
从零收拾一个hybrid框架（一）-- 从选择JS通信方案开始

更多关于JavaScriptCore：
iOS7新JavaScriptCore框架入门介绍
JavaScriptCore框架在iOS7中的对象交互和管理

使用Safari对webview进行调试：
怎么使用Safari对webview进行调试
模拟器或真机，在设置--Safari--高级 中打开Web检查器(web Inspector)
Mac Safari 浏览器，偏好设置--高级--打开'开发'菜单
在开发菜单中即可连接当前机器正在打开的webview页面

2. WKWebview

在WKWebview中，不能使用JavascriptCore进行交互，而是使用messageHandlers，相关的方法在WebKit的WKScriptMessageHandler中：

/*! A class conforming to the WKScriptMessageHandler protocol provides a
 method for receiving messages from JavaScript running in a webpage.
 */
@protocol WKScriptMessageHandler <NSObject>

@required

/*! @abstract Invoked when a script message is received from a webpage.
 @param userContentController The user content controller invoking the
 delegate method.
 @param message The script message received.
 */
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

@end

除此之外，在WKUIDelegate也有一些与JS的Alert相关的方法

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

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

在WKWebview中，JS似乎不能直接 弹出alert，只能通过上面几个方法，将消息和回调作为参数传入，由iOS端来展示Alert。这也算交互的一小部分吧。

回到正题，我们一般想要的交互是JS调用iOS的函数，或者iOS调用JS的函数。

iOS 调用 JS中的函数

直接通过WKWebview的evaluateJavaScript:completionHandler:实例方法

// 调用JS中的callbackForiOS方法，参数为'Yes im'
[wkWebviewObj evaluateJavaScript:@"callbackForiOS(\"Yes Im\")" completionHandler:^(_Nullable id obj, NSError * _Nullable error) {
            NSLog(@"finish callback");
        }];

JS 调用iOS中的函数

以调用某个UIViewController的方法为例，让其遵守WKScriptMessageHandler：

#import <WebKit/WebKit.h>
@interface MKViewController ()<WKScriptMessageHandler>
@property (nonatomic, strong) WKWebView *webview;
@end

初始化:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 偏好设置
    WKPreferences *prefs = [[WKPreferences alloc]init];
    prefs.minimumFontSize = 20;
    prefs.javaScriptEnabled = YES;
    
    WKWebViewConfiguration *cfg = [WKWebViewConfiguration new];
    cfg.preferences = prefs;
    cfg.processPool = [WKProcessPool new];
    
    // UserContentController, 与JS交互发生的地方
    cfg.userContentController = [WKUserContentController new];
    // 只有注册了的name，js使用这个name发送消息才会进入回调
    [cfg.userContentController addScriptMessageHandler:self name:@"iOSShowMessage"];
    
    self.webview = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:cfg];
    [self.view addSubview:self.webview];
    
    NSString *paht = [[NSBundle mainBundle] pathForResource:@"WKInteract" ofType:@"html"];
    NSString *content = [[NSString alloc] initWithContentsOfFile:paht encoding:NSUTF8StringEncoding error:nil];
    [self.webview loadHTMLString:content baseURL:nil];
    // 如果需要WKWebview创建、关闭webview的回调或者与AlertPanel相关的回调，使用UIDelegate
    // self.webview.UIDelegate = self;
}

在初始化代码中，为cfg创建了userContentController， 并注册了一个名为iOSShowMessage的MessageHandler.在JS中，对应地使用下面代码调用MessageHandler的方法：

// iOSShowMessage为上面WKWebview初始化时注册的name
window.webkit.messageHandlers.iOSShowMessage.postMessage("Are u iOS?")

如果JS执行了上面的代码，iOS中会在WKScriptMessageHandler协议的方法中得到回调：

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
    // message.name即注册时使用的name，message.body为参数
    if ([message.name isEqualToString:@"iOSShowMessage"]) {
        // code to execute when receive JS message
    }
    
}

效果图:

[图片上传失败...(image-d01a43-1523266142150)]

示例的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>interact with ios</title>
    <meta charset="UTF-8"/>
</head>
<body>
<script>
    function callbackForiOS(something){
        var target = document.getElementById('result');
        var content = target.innerHTML
        content = "iOS回应: " + something
        target.innerHTML = content;
    }
    function iOSShowMessage(msg) {
        var target = document.getElementById('input');
        var content = target.innerHTML
        content = "给iOS发送消息:'Are u iOS'"
        target.innerHTML = content;
        window.webkit.messageHandlers.iOSShowMessage.postMessage("Are u iOS?")
    }
</script>

<br/>
<br/>

<div>
    <input type="button" value="调用iOS方法" onclick="iOSShowMessage('are you Objective-C?')">
    
</div>

<br/>
<br/>

<div>
    <h4>回调结果:</h4>
    <span id="input"></span>
    <br/>
    <span id="result"></span>
</div>

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

推荐阅读更多精彩内容