iOS UIWebView原生与JS交互

在iOS的开发中用webView加载网页是一种很常见的逻辑，有时候我们会在webView中对js的方法进行拦截从而进行自己的逻辑判断，有时候还会需要我们提供一些原生的方法供js进行调用，或者在网页加载完毕后调用一些js的方法来修改页面的逻辑。

首先加载webView

self.webView = [[UIWebView alloc]init];
    [self.view addSubview:self.webView];
    self.webView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
    // 自动对页面进行缩放以适应屏幕
    self.webView.scalesPageToFit = YES;
    // 需要在代理方法中与js进行交互
    self.webView.delegate = self;
    // 取消webView的弹簧效果
    [(UIScrollView *)[[self.webView subviews] objectAtIndex:0] setBounces:NO];
    NSString *urlStr = @"http://www.baidu.com/";
    NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:urlStr]];

然后我们看一下UIWebView的四个代理方法

// 当点击页面进行加载数据的时候调用
- (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;

从这四个代理方法中我们可以看出来每次我们点击页面进行数据加载的时候都会调用shouldStartLoadWithRequest方法，所以我们可以在这个方法中对js的方法进行拦截，然后替换为自己的方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    // 获取点击页面加载的url
    NSString *url = request.URL.absoluteString;

    if ([url rangeOfString:@"此处写想拦截的url字符串"].location != NSNotFound) {
        // 通过获取当前点击页面加载的url与指定url进行比较，拦截页面请求，进行自己的逻辑处理
        // 进行移动端的逻辑处理
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:@"拦截页面方法" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];
        [alert show];

        return NO;
    }

    return YES;
}

还有一种方法是在页面加载完毕之后注入或者调用js的方法来修改原有的界面逻辑，或者定义一个原生的方法让js直接调用。注意下边的逻辑必须是要在页面加载完毕之后调用。

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 获取当前网页的标题
    NSString *titleStr = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    NSLog(@"%@",titleStr);

    // 还可以直接调用js定义的方法
    // 比如getShareUrl()为js端定义好的方法，返回值为分享的url
    // 我们就可以通过调用这个方法在returnStr中拿到js返回的分享地址
    NSString *returnStr = [webView stringByEvaluatingJavaScriptFromString:@"getShareUrl()"];
    NSLog(@"%@",returnStr);

    // 还可以为js端提供完整的原生方法供其调用（记得导入#import <JavaScriptCore/JavaScriptCore.h>）
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    // 可以定义供js调用的方法, testMethod为js调用的方法名
    context[@"testMethod"] = ^() {
        dispatch_async(dispatch_get_main_queue(), ^{
            UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:@"js调用方法" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];
            [alert show];
        });
    };
}

通过以上几种途径就可以实现我们开发中遇到的几乎所有的与js进行交互的逻辑

iOS UIWebView原生与JS交互

猜你喜欢