UIWebView-Objective-C 与 JavaScript交互

移动开发 来源:FlyElephant 1231℃ 0评论

如果项目中设计Html页面的,都少不了Objective-C与JavaScript的交互,如果你的项目比较新,那应该是Swift与JavaScript交互,差别不大.交互有两个形式,一种是Html页面JavaScript对方或方法调用Objective-C代码,另外一种是Objective-C调用JavaScript代码.

JavaScript 调用 Objective-C

JavaScript对方或方法调用Objective-C代码有三种方式:
1.URL拦截,通过自定义的scheme实现.
2.JavaScriptCore新增或替换JavaScript方法.
3.通过实现JSExport协议生成对象,实现JavaScript对象调用OC对象方法.

第一种方式比较常见,实现UIWebViewDelegate的可选方法:
<pre><code>`__TVOS_PROHIBITED @protocol UIWebViewDelegate <NSObject>

@optional

  • (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
  • (void)webViewDidStartLoad:(UIWebView *)webView;
  • (void)webViewDidFinishLoad:(UIWebView *)webView;
  • (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

@end`</code></pre>

以访问百度网页为例:
<pre><code>`#pragma mark - UIWebviewDelegate

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

    NSString *requestStr = [request.URL absoluteString];
    NSLog(@"网络请求地址:%@",requestStr);
    if ( [[requestStr lowercaseString] containsString:@"news"]) {
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"FlyElephant---新闻" message:@"" preferredStyle:(UIAlertControllerStyleAlert)];
    UIAlertAction *sureAlertAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {

      }];
      [alert addAction:sureAlertAction];
      [self presentViewController:alert animated:YES completion:^{
          
      }];
      return NO;
    

    }

    return YES;
    }

  • (void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"开始---webViewDidStartLoad");
    }

  • (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"加载结束---webViewDidFinishLoad");
    }

  • (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    NSLog(@"加载出错---didFailLoadWithError");
    }

  • (void)setUp {
    UIWebView *webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    webView.delegate = self;
    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com/"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];
    [self.view addSubview:webView];
    }`</code></pre>

新闻.png
新闻.png

2.第二种方式需要一个简单的Html页面配合,代码如下:
<pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript页面</title> <script type="text/javascript"> function jsClick2() { alert('FlyElephant---本地的实现'); } </script> </head> <body> <p>测试</p> <button onclick="jsClick()">测试按钮</button> <button onclick="jsClick2()">测试按钮2</button> </body> </html></code></pre>

导入JavaScriptCore头文件之后,在代理中设置JSContext.
<pre><code>- (void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"加载结束---webViewDidFinishLoad"); self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; [self setUpJavaScriptCallBack]; }</code></pre>

第一个按钮点击时候JavaScript没有对应的方法实现,第二个Objective-C对响应方法进行了重写:

<pre><code>` __weak typeof(self) weakSelf = self;
self.jsContext[@"jsClick"] = ^ {
NSArray *args = [JSContext currentArguments];
NSMutableArray *messages = [NSMutableArray array];
for (JSValue *obj in args) {
[messages addObject:[obj toObject]];
}
[weakSelf.jsContext evaluateScript:@"alert('FlyElephant---本地的实现')"];
};

self.jsContext[@"jsClick2"] = ^ {
    [weakSelf.jsContext evaluateScript:@"alert('替换原有jsClick2方法')"];
};`</code></pre>
交互.png
交互.png

3.JSContext并不能实现OC对象和JS对象之间的直接转换,两者面向对象的设计方式是不一样的,OC是基于类继承的,JS是基于原型的,但是所有的对象都可以视为键值对集合.

JavaScript可以脱离原型直接用JSON表示对象,但是OC不能脱离继承来表示对象,JavaScriptCore提供了JSExport作为两种语言的互通协议.

JSExport没有定义任何可选方法,需要首先定义一个实现JSExport的协议,然后在自定义协议中定义JavaScript调用方法,有点绕,看代码吧.
<pre><code>`@protocol UserExportProtocol <JSExport>

  • (void)buy:(NSString *)name;

@end

@interface User : NSObject<UserExportProtocol>

@end`</code></pre>

<pre><code>`@implementation User

  • (void)buy:(NSString *)name {
    NSLog(@"FlyElephant买了---%@",name);
    }

@end`</code></pre>

OC端调用:
<pre><code>User *tempUser = [[User alloc] init]; self.jsContext[@"user"] = tempUser; NSString *buyStr = @"user.buy('书籍')"; [self.jsContext evaluateScript:buyStr];</code></pre>

打印的Log信息如下:
<pre><code>FlyElephant买了---书籍</code></pre>

可以通过对已有的类添加JSExport协议,定义一个UIButton的扩展协议.

<pre><code>`@protocol UIButtonExportProtocol <JSExport>

  • (void)setTitle:(NSString *)title forState:(UIControlState)state;

@end</code></pre> <pre><code> class_addProtocol([UIButton class], @protocol(UIButtonExportProtocol));

self.jsContext[@"button"] = self.testButton;
[self.jsContext evaluateScript:@"button.setTitleForState('FlyElephant 改变', 0)"];`</code></pre>
按钮.png
按钮.png

Objective-C 调用 JavaScript

Objective-C调用JavaScript的方式有两种:
1.stringByEvaluatingJavaScriptFromString
2.evaluateScript

第一种方式是webView中的方法不能确定调用之后是否出错,调用的结果都是以字符串的形式方式,比较局限.
<pre><code>self.navigationItem.title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];</code></pre>

第二种方式比较简单,需要先获取JSContext:
<pre><code>` self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JSValue *value = [self.jsContext evaluateScript:@"document.title"];
self.navigationItem.title = value.toString;

[self.jsContext setExceptionHandler:^(JSContext *context, JSValue *exception){
    NSLog(@"%@", exception);
}];`</code></pre>

如果你觉得以上方式比较复杂,那么请选用WebViewJavascriptBridge吧,接下来会对WebViewJavascriptBridge进行源码分析,欢迎关注.

参考资料:

iOS7新JavaScriptCore框架入门介绍
JavaScriptCore框架在iOS7中的对象交互和管理

关闭

IT问道推荐

银行贷款频频被拒?
“Dr信用牛牛”让你远离信用污点 国内首家信用健康管理平台免费为你提供信用修复方案