ios UIWebView使用和js交互

下面我们一起学习下UIWebView的使用
一、 定义webView 代码如下

#pragma 懒加载
- (UIWebView *)webView {
    if (!_webView) {
        _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 44, SCREENWIDTH, SCREENHEIGHT - 44)];
        _webView.delegate = self;
        _webView.opaque = NO;
        _webView.backgroundColor = [UIColor whiteColor];
        if (@available(ios 11.0,*)){ _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;}
    }
    return _webView;
}

二、加载html 带参数或不带参数

• 1、加载部署在后台的

  [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
  

• 2、加载项目中的

   NSString * path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
  //不带参数
  //        [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:path]]];
  //带参数
  NSURL * url = [NSURL URLWithString:@"?A=B" relativeToURL:[NSURL URLWithString:path]];
  [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
  

• 3、加载沙盒中的 将文件拷贝到沙盒 或者将文件解压到沙盒中

  NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
       NSString * pathS = [paths objectAtIndex:0];
       pathS = [pathS stringByAppendingString:[NSString stringWithFormat:@"/index.html"]];
  //不带参数
  //        NSURL * url = [NSURL URLWithString:@"" relativeToURL:[NSURL URLWithString:pathS]];
  //        [self.webView loadRequest:[NSURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:20.f]];
  //带参数
  NSURL * url = [NSURL URLWithString:@"?A=B" relativeToURL:[NSURL URLWithString:pathS]];
  [self.webView loadRequest:[NSURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:20.f]];
  

三、实现代理

#pragma webView delegate
//开始加载
- (void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"开始加载");
}
//加载成功
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"加载成功");
}
//来决定是否加载该网页中的链接
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSLog(@"url---%@",request.URL.absoluteString);
    return YES;
}

//加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    NSLog(@"加载失败");
}

四、js交互

• 1、js 调用原生的方法

  可以让js调用原生的方法 在- (void)webViewDidFinishLoad:(UIWebView *)webView ;代理方法中实现如下操作

  self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
  self.jsContext[@"console"][@"log"] = ^(JSValue * msg) {
    NSLog(@"H5  log : %@", msg);
  };
  

  上面就是打印js中的console的日志，如果想自定义方法，将[@“console”][@“log”]中替换成自己的方法名字如[@“call”]

• 2、拦截
  可以在- (BOOL)webView:(UIWebView *)webView
  shouldStartLoadWithRequest:(NSURLRequest *)request
  navigationType:(UIWebViewNavigationType)navigationType ;方法中拦截url 进行操作

  例如可以拦截 http

  NSURL *requestURL = request.URL;
   if ( [[requestURL scheme] isEqualToString:@"http"]) {
       // to do
       return NO;
   }
  

• 3、原生调用js

  首先导入JavaScriptCore库, 然后在OC中获取JS的上下文

  JSContext *context = [self.webView  valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];  
  

  再然后定义好JS需要调用的方法，

  JSValue *Callback = jsContext[@“方法名字”];
  [Callback callWithArguments:@[]];
  

  demo 下载