美文网首页iOS开发笔记
webView网页中JS调原生OC方法与JS注入

webView网页中JS调原生OC方法与JS注入

作者: 祥子_HelloWorld | 来源:发表于2019-08-06 01:17 被阅读0次

    在iOS开发中用到webView的话,经常会有和JS打交道的时候,下面介绍一下OC和JS的一种简单沟通的方式。

    比如我们有一个下面这样的网页:

    <html>  
    <head>  
        <meta xmlns="http://www.w3.org/1999/xhtml" http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>这是一个示例html文件</title>  
        <script Type='text/javascript'>  
            function clickme() {  
                alert('点击按钮了!');  
            }  
        </script>  
    </head>  
    <body>  
        <h1>OC与JS互动</h1>  
        <h2>blog.csdn.net/xn4545945</h2>  
        <!-- 自定义协议与OC进行交互 -->  
        <a href="neng://loadUrl/blog.csdn.net">点击一下, 链接调用OC函数</a>  
        <br/>  
        <br/>  
        <a href="http://m.baidu.com">js注入, 到baidu页面上实验</a>  
    </body>  
    </html>  
    

    一、在OC中调用JS

    最重要的方法:stringByEvaluatingJavaScriptFromString

    直接上代码,说明见注释:

    /**===========================OC 中调用 JS====================================*/  
    - (void)webViewDidFinishLoad:(UIWebView *)webView {  
        //1.OC中调用JS的文档对象. (先拼出文档对象的属性) 可以在浏览器控制台输入来进行测试  
        NSLog(@"%@", [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]);  
      
        //2.OC中调用JS的方法  
        [self.webView stringByEvaluatingJavaScriptFromString:@"clickme()"];  
    }  
    

    二、用超链接来调用OC中方法

    步骤:

    1. 设置webView的代理<UIWebViewDelegate>
    2. 在代理的方法shouldStartLoadWithRequest:中调用.(该方法与网页的加载有关)

    方法:就是在网页链接中写好自定义协议。然后在OC方法中检查点击的链接中是否有该协议,有则做相关操作;
    代码如下:

    /**=========================== webView链接 中调用 OC===============================*/  
    /**webView的代理方法:加载页面有关. 当直接返回为NO时,会调用JS方法 
       其中request参数与发送请求有关*/  
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {  
        NSLog(@"%@", request.URL.absoluteString); //可以直接拿到发送请求的网址  
        NSString *urlStr = request.URL.absoluteString;  
      
        // 格式 neng://loadUrl/blog.csdn.net  协议/方法/网址  
        //判断链接中的协议头,如果是neng://, 则进行相关操作  
        if ([urlStr hasPrefix:@"neng://"]) {  
            //拿到除去协议头的后部  
            NSString *urlContent = [urlStr substringFromIndex:[@"neng://" length]];  
            NSLog(@"%@", urlContent);  
      
            //用/来拆分字符串  
            NSArray *urls = [urlContent componentsSeparatedByString:@"/"];  
            NSLog(@"拆分的结果为:%@", urls);  
      
            //取出方法名  
            if (urls.count != 2) {  
                return NO;  
            }  
            NSString *funName = [NSString stringWithFormat:@"%@:", urls[0]]; //带参数的方法,加冒号  
      
            SEL callFun = NSSelectorFromString(funName);  
    //取消警告  
    # pragma clang diagnostic push  
    # pragma clang diagnostic ignored "-Warc-performSelector-leaks"  
            [self performSelector:callFun withObject:urls[1]]; //将blog.csdn.net作为参数传入  
    # pragma clang diagnostic pop  
            NSLog(@"方法名为%@, 传入参数为%@", funName, urls[1]);  
      
            return NO;  
        }  
      
        return YES;  
    }  
      
    - (void)loadUrl:(NSString *)urlStr {  
        NSLog(@"接收到参数: %@", urlStr);  
      
        //跳转到指定的URL--->urlStr  
        NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@", urlStr]];  
        NSURLRequest *request = [NSURLRequest requestWithURL:url];  
      
        [self.webView loadRequest:request];  
    }  
    

    三、JS实现注入

    JS是操作网页的利器,利用好JS才能真正在应用中随心所欲的操作网页。
    核心方法:stringByEvaluatingJavaScriptFromString(与第一个相同,这个是在iOS中操作JS最重要方法)

    代码如下:

    /**===========================JS  注入====================================*/  
    - (void)jsClick {  
        [self.webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"  
         "script.type = 'text/javascript';"  
         "script.text = \"function myFunction() { "   //定义myFunction方法  
         "var field = document.getElementsByName('word')[0];"  
         "field.value='WWDC2014';"  
         "document.forms[0].submit();"  
         "}\";"  
         "document.getElementsByTagName('head')[0].appendChild(script);"];  //添加到head标签中  
      
        [self.webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];  
    }  
    

    附上例子源码:http://download.csdn.net/detail/xn4545945/7584575
    参考:http://www.cnblogs.com/wanghuaijun/p/5460983.html

    相关文章

      网友评论

        本文标题:webView网页中JS调原生OC方法与JS注入

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