js(javascript)与ios(Objective-C)相互通讯交互

时间  2019-11-30
标签 javascript ios objective 相互 通讯 交互 栏目 JavaScript 繁體版
原文   原文链接

随着苹果SDK的不断升级，愈来愈多的新特性增长了进来，本文主要讲述从iOS6至今，Native与JavaScript的交互方法javascript

1、UIWebview && iframe && JavaScript  <=iOS6

iOS6原生没有提供js直接调用Objective-C的方式，只能经过UIWebView的UIWebViewDelegate协议html

 
1
(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

方法来作拦截，并在这个方法中，根据url来调用Objective-C方法java

1.javascript调用Objective-C

动态添加个iframe改变其地址 最后删除,这种方法不会使当前页面跳转 效果更佳git

javascript代码:github

 
1
2
3
4
5
6
7
8
9
10
11
12
13
function callOC2(func,param){
        var iframe = document.createElement("iframe");
        var url= "myapp:" + "&func=" + func;
        for(var i in param)
        {
            url = url + "&" + i + "=" + param[i];
        }
        iframe.src = url;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
        iframe.parentNode.removeChild(iFrame);
        iframe = null;
}

 

 
1
2
使用方法
<input type="button" value="传个字典2" onclick="callOC2('testFunc',{'param1':76,'param2':155,'param3':76})" />

Objective-C代码:web

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
 
    NSString *requestString = [[[request URL]  absoluteString] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding ];
    
    if ([requestString hasPrefix:@"myapp:"]) {
        NSLog(@"requestString:%@",requestString);
        //若是是本身定义的协议, 再截取协议中的方法和参数, 判断无误后在这里手动调用oc方法
        NSMutableDictionary *param = [self queryStringToDictionary:requestString];
        NSLog(@"get param:%@",[param description]);
        NSString *func = [param objectForKey:@"func"];
        if([func isEqualToString:@"callFunc"])
        {
            [self testFunc:[param objectForKey:@"first"] withParam2:[param objectForKey:@"second"]  andParam3:[param objectForKey:@"third"] ];
        }
/*
* 方法的返回值是BOOL值。
* 返回YES：表示让浏览器执行默认操做，好比某个a连接跳转
* 返回NO：表示不执行浏览器的默认操做，这里由于经过url协议来判断js执行native的操做，确定不是浏览器默认操做，故返回NO
*
*/
        return NO;
    }
    return YES;
}

 

 
1
2
3
4
5
6
7
8
9
- (NSMutableDictionary*)queryStringToDictionary:(NSString*)string {
    NSMutableArray *elements = (NSMutableArray*)[string componentsSeparatedByString:@"&"];
    NSMutableDictionary *retval = [NSMutableDictionary dictionaryWithCapacity:[elements count]];
    for(NSString *e in elements) {
        NSArray *pair = [e componentsSeparatedByString:@"="];
        [retval setObject:[pair objectAtIndex:1]?:@"" forKey:[pair objectAtIndex:0]?@:"nokey"];
    }
    return retval;
}

 

2.Objective-C调用javascript

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//插入js 而且执行传值
- (IBAction)insertJSTouched:(id)sender {
    NSString *insertString = [NSString stringWithFormat:
                              @"var script = document.createElement('script');"
                              "script.type = 'text/javascript';"
                              "script.text = \"function jsFunc() { "
                              "var a=document.getElementsByTagName('body')[0];"
                              "alert('%@');"
                              "}\";"
                              "document.getElementsByTagName('head')[0].appendChild(script);", self.someString];
    NSLog(@"insert string %@",insertString);
    [self.myWeb stringByEvaluatingJavaScriptFromString:insertString];
    [self.myWeb stringByEvaluatingJavaScriptFromString:@"jsFunc();"];
}

 

 
1
2
3
4
//提交form表单
- (IBAction)submitTouched:(id)sender {
    [self.myWeb stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];
}

 

 
1
2
3
4
5
//修改标签属性
- (IBAction)fontTouched:(id)sender {
    NSString *tempString2 = [NSString stringWithFormat:@"document.getElementsByTagName('p')[0].style.fontSize='%@';",@"19px"];
    [self.myWeb stringByEvaluatingJavaScriptFromString:tempString2];
}

 

(PS)若是你想去掉webview弹出的alert 中的来自XXX网页sublime-text

 
1
2
3
4
5
- (void)webViewDidFinishLoad: (UIWebView *) webView
{
    //重定义web的alert方法,捕获webview弹出的原生alert  能够修改标题和内容等等
    [webView stringByEvaluatingJavaScriptFromString:@"window.alert = function(message) { window.location = \"myapp:&func=alert&message=\" + message; }"];
}

 

 
1
2
3
4
if([func isEqualToString:@"alert"])
{
   [self showMessage:@"来自网页的提示" message:[param objectForKey:@"message"]];  
}

 

2、JavaScriptCore && UIWebview >=iOS7

iOS7中加入了JavaScriptCore.framework框架。把 WebKit 的 JavaScript 引擎用 Objective-C 封装。该框架让Objective-C和JavaScript代码直接的交互变得更加的简单方便。api

合适时机注入交互对象

何时UIWebView会建立JSContext环境?

分两种方式数组

第一在渲染网页时遇到<script标签时，就会建立JSContext环境去运行JavaScript代码。浏览器

第二就是使用方法[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]去获取JSContext环境时，这时不管是否遇到<script标签，都会去创造出来一个JSContext环境，并且和遇到<script标签再创造环境是同一个。

何时注入JSContext问题

我一般都会在 - (void)webViewDidFinishLoad:(UIWebView *)webView中去注入交互对象，可是这时候网页还没加载完，JavaScript那边已经调用交互方法，这样就会调不到原生应用的方法而出现问题。

改为在- (void)viewDidLoad中去注入交互对象，这样却是解决了上面的问题，可是同时又引发了一个新的问题就是在一个网页内部点击连接跳转到另外一个网页的时候，第二个页面须要交互，这时JSContext环境已经变化，可是- (void)viewDidLoad仅仅加载一次，跳转的时候，没有再次注入交互对象，这样就会致使第二个页面无法进行交互。固然你能够在- (void)viewDidLoad和- (void)webViewDidFinishLoad:(UIWebView *)webView都注入一次，可是必定会有更优雅的办法去解决此问题。

若是上边的方案能知足需求,建议实在无可奈何再用这个方法,  就是在每次建立JSContext环境的时候，咱们都去注入此交互对象这样就解决了上面的问题。具体解决办法参考了此开源库UIWebView-TS_JavaScriptContext。

多个iFrame中的JSContext问题

 

 
1
2
3
4
5
6
7
NSArray *frames = [webView valueForKeyPath:@"documentView.webView.mainFrame.childFrames"];
[frames enumerateObjectsUsingBlock:^(id frame, NSUInteger idx, BOOL *stop) {
    JSContext *context = [frame valueForKeyPath:@"javaScriptContext"];
    context[@"Window"][@"prototype"][@"alert"] = ^(NSString *message) {
            NSLog(@"%@", message);
    };
}];

 

1. JavaScriptCore调用Objective-C

html中的JS代码

 
1
<input type="button" value="多参数调用" onclick="mutiParams('参数1','参数2','参数3');" />

iOS中的代码  UIWebview的delegate

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 以 html title 设置 导航栏 title
    self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    // Undocumented access to UIWebView's JSContext
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    // 打印异常
    self.context.exceptionHandler =
    ^(JSContext *context, JSValue *exceptionValue)
    {
        context.exception = exceptionValue;
        NSLog(@"%@", exceptionValue);
    };
    
    // 以 JSExport 协议关联 native 的方法
    self.context[@"app"] = self;
    
    // 以 block 形式关联 JavaScript function
    self.context[@"log"] =
    ^(NSString *str)
    {
        NSLog(@"%@", str);
    };
    //多参数
    self.context[@"mutiParams"] =
    ^(NSString *a,NSString *b,NSString *c)
    {
        NSLog(@"%@ %@ %@",a,b,c);
    };
    
}

JSExport 协议关联 native 的方法

Objective-C

 
1
@interface JSCallOCViewController : UIViewController<UIWebViewDelegate,TestJSExport>

 

 
1
2
3
4
5
6
7
- (void)pushViewController:(NSString *)view title:(NSString *)title
{
    Class second = NSClassFromString(view);
    id secondVC = [[second alloc]init];
    ((UIViewController*)secondVC).title = title;
    [self.navigationController pushViewController:secondVC animated:YES];
}

JavaScript

 
1
<a id="push" href="#" onclick="app.pushViewControllerTitle('SecondViewController','secondPushedFromJS');">

 

2.Objective-C 调用 JavaScriptCore

Objective-C

调用js的showResult方法，这里是一个参数 result，多个就依次写到数组中

 
1
[self.context[@"showResult"] callWithArguments:@[result]];

JavaScript

 
1
2
3
4
function showResult(resultNumber)
{
   document.getElementById("result").innerText = resultNumber;
}

 

3、WKWebView && JavaScript >=iOS8

iOS 8引入了一个新的框架——WebKit，以后变得好起来了。在WebKit框架中，有WKWebView能够替换UIKit的UIWebView和AppKit的WebView，并且提供了在两个平台能够一导致用的接口。WebKit框架使得开发者能够在原生App中使用Nitro来提升网页的性能和表现，Nitro就是Safari的JavaScript引擎 WKWebView 不支持JavaScriptCore的方式但提供message handler的方式为JavaScript 与Native通讯.

1.Objective-C  调用JavaScript

 
1
2
3
4
5
6
//执行html 已经存在的js方法
- (IBAction)exeFuncTouched:(id)sender {
    [self.myWebView evaluateJavaScript:@"showAlert('hahahha')"  completionHandler:^(id item, NSError * _Nullable error) {
        
    }];
}

 

2. JavaScript 调用 Objective-C

JavaScript，简单的封装一下，‘Native’为事先在Objective-C注册注入的js对象

 
1
2
3
4
5
6
7
8
function callOC(func,param){
        var url= "func=" + func;
        for(var i in param)
        {
         url = url + "&" + i + "=" + param[i];
        }
        window.webkit.messageHandlers.Native.postMessage(url);
}

JavaScript调用

 
1
<input type="button" value="打个招呼" onclick="callOC('alert',{'message':'你好么'})" />

Objective-C实现

 
1
2
3
4
5
6
7
8
9
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = [[WKUserContentController alloc] init];
// 注入JS对象Native，
// 声明WKScriptMessageHandler 协议
[config.userContentController addScriptMessageHandler:self name:@"Native"];
 
self.myWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
self.myWebView.UIDelegate = self;
[self.view addSubview:self.myWebView];

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"Native"]) {
        NSLog(@"message.body:%@", message.body);
        //若是是本身定义的协议, 再截取协议中的方法和参数, 判断无误后在这里手动调用oc方法
        NSMutableDictionary *param = [self queryStringToDictionary:message.body];
        NSLog(@"get param:%@",[param description]);
        
        NSString *func = [param objectForKey:@"func"];
        
        //调用本地函数
        if([func isEqualToString:@"alert"])
        {
            [self showMessage:@"来自网页的提示" message:[param objectForKey:@"message"]];
        }
    
    }
}

 

注：本文除了第三种方法以外，前两种JavaScript交互方法都和Android开发兼容，仅仅是api略不一样。

demo地址: https://github.com/shaojiankui/iOS-WebView-JavaScript

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程