美文网首页
iOS通过UIWebView实现与JS的交互

iOS通过UIWebView实现与JS的交互

作者: Z了个Y | 来源:发表于2016-09-18 16:21 被阅读135次

    最近的一个项目中需要实现OC与JS的交互,在iOS中实现方法有三种,本文主要介绍下UIWebView如何与JS交互。

    一、UIWebView的基本用法

    1、加载网页

    //加载本地文件
    NSString *path = [[NSBundle mainBundle] bundlePath]; 
    NSURL *baseURL = [NSURL fileURLWithPath:path]; 
    NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; 
    NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    [self.webView loadHTMLString:htmlCont baseURL:baseURL];
    //直接加载网页
    NSURL *url = [[NSURL alloc] initWithString:@"http://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    

    注意:将网页作为本地文件加载的好处是能更好的与本地文件进行交互,如果你想把手机图片传给js,只需要把图片保存的路径传入即可。直接加载网页的情况下需要将图片进行base64编码。具体参考这篇文章http://www.cnblogs.com/HwangKop/p/5010275.html
    2、代理方法

    //每当webView加载一个请求都会来到这个方法,返回YES允许加载,然后StartLoad、FinishLoad,返回NO则不加载这个请求
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
    //开始加载网页的回调
    - (void)webViewDidStartLoad:(UIWebView *)webView;
    //网页加载完毕的回调
    - (void)webViewDidFinishLoad:(UIWebView *)webView;
    //网页加载失败的回调
    - (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;
    

    二、UIWebView与JS交互

    1、OC调用JS
    OC调用JS主要通过使用- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;这个方法来实现。传入你要执行的JS代码块,如果有返回值,可以接收NSString类型作为返回值。下面是获取网页Title并给导航控制器Title赋值的代码。

    - (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        //获取网页的title
        self.navigationItem.title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    }
    

    注意:调用web页面中的需要传参的函数时,参数需要带单引号,或者双引号(双引号需要进行转义在转义字符前加\),并且OC与JS交互只能传字符串类型,所以在调用前需转换成NSString类型。

    - (void)webViewDidFinishLoad:(UIWebView *)webView
    {
      NSString *loginStr = [NSString stringWithFormat:@"loggedIn('%@','%@','%@')",[USER_DEFAULT objectForKey:KUID],[USER_DEFAULT objectForKey:KPhoneNumber],[USER_DEFAULT objectForKey:KNICKNAME]];
      ZYLog(@"%@",loginStr);
      [self.webView stringByEvaluatingJavaScriptFromString:loginStr];
    }
    

    2、JS调用OC
    JS调用OC主要通过使用 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;这个方法。这种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理。

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
    {
        // 获取请求路径
        NSString *url = request.URL.absoluteString;
        // 定义的协议
        NSString *scheme = @"ios://";
        if ([url hasPrefix:scheme]) {
            // 获得协议后面的路径  path == sendMessage:message2:?200&300
            NSString *path = [url substringFromIndex:scheme.length];
            // 利用?切割路径 分割方法与参数
            NSArray *subpaths = [path componentsSeparatedByString:@"?"];
            // 方法名 methodName == sendMessage:number2:
            NSString *methodName = [subpaths firstObject];
            // 参数  200&300
            NSArray *params = nil;
            if (subpaths.count == 2) {
                params = [[subpaths lastObject] componentsSeparatedByString:@"&"];
            }
            // 调用本地函数
            [self performSelector:NSSelectorFromString(methodName) withObjects:params];
            return NO;
        }
        NSLog(@"想加载其他请求,不是想调用OC的方法");
        return YES;
    }
    

    注意:系统提供的performSelector函数至多只能传两个参数,如果想实现多个参数传递,参考这篇文章http://www.jianshu.com/p/c2415b064e20

    相关文章

      网友评论

          本文标题:iOS通过UIWebView实现与JS的交互

          本文链接:https://www.haomeiwen.com/subject/kblpettx.html