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 下载

ios UIWebView使用和js交互

猜你喜欢