• 网页中调用JS与JS注入


    很多应用为了节约成本,做出同时在Android与iOS上都能使用的界面,这时就要使用WebView来做。Android和IOS上都有WebView,做起来很省事。当然这时就要考虑如何在Android或iOS中实现与网页的交互。对iOS而言,包括如何在网页中调用OC,以及如何在OC中对网页进行操作。

    先将网页弄到iOS项目中:

    网页内容如下, 仅供测试:

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

    一、在OC中调用JS

    最重要的方法:stringByEvaluatingJavaScriptFromString

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

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


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

    步骤:

    *1.设置webView的代理<UIWebViewDelegate>
    *2.在代理的方法shouldStartLoadWithRequest:中调用.(该方法与网页的加载有关)
    *方法:就是在网页链接中写好自定义协议.然后在OC方法中检查点击的链接中是否有该协议,有则做相关操作.

    代码如下:

    1. /**=========================== webView链接 中调用 OC===============================*/  
    2. /**webView的代理方法:加载页面有关. 当直接返回为NO时,会调用JS方法 
    3.    其中request参数与发送请求有关*/  
    4. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {  
    5.     NSLog(@"%@", request.URL.absoluteString); //可以直接拿到发送请求的网址  
    6.     NSString *urlStr = request.URL.absoluteString;  
    7.   
    8.     // 格式 neng://loadUrl/blog.csdn.net  协议/方法/网址  
    9.     //判断链接中的协议头,如果是neng://, 则进行相关操作  
    10.     if ([urlStr hasPrefix:@"neng://"]) {  
    11.         //拿到除去协议头的后部  
    12.         NSString *urlContent = [urlStr substringFromIndex:[@"neng://" length]];  
    13.         NSLog(@"%@", urlContent);  
    14.   
    15.         //用/来拆分字符串  
    16.         NSArray *urls = [urlContent componentsSeparatedByString:@"/"];  
    17.         NSLog(@"拆分的结果为:%@", urls);  
    18.   
    19.         //取出方法名  
    20.         if (urls.count != 2) {  
    21.             return NO;  
    22.         }  
    23.         NSString *funName = [NSString stringWithFormat:@"%@:", urls[0]]; //带参数的方法,加冒号  
    24.   
    25.         SEL callFun = NSSelectorFromString(funName);  
    26. //取消警告  
    27. # pragma clang diagnostic push  
    28. # pragma clang diagnostic ignored "-Warc-performSelector-leaks"  
    29.         [self performSelector:callFun withObject:urls[1]]; //将blog.csdn.net作为参数传入  
    30. # pragma clang diagnostic pop  
    31.         NSLog(@"方法名为%@, 传入参数为%@", funName, urls[1]);  
    32.   
    33.         return NO;  
    34.     }  
    35.   
    36.     return YES;  
    37. }  
    38.   
    39. - (void)loadUrl:(NSString *)urlStr {  
    40.     NSLog(@"接收到参数: %@", urlStr);  
    41.   
    42.     //跳转到指定的URL--->urlStr  
    43.     NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@", urlStr]];  
    44.     NSURLRequest *request = [NSURLRequest requestWithURL:url];  
    45.   
    46.     [self.webView loadRequest:request];  
    47. }  


    三、JS实现注入

    JS是操作网页的利器,利用好JS才能真正在应用中随心所欲的操作网页。

    核心方法:stringByEvaluatingJavaScriptFromString(与第一个相同,这个是在iOS中操作JS最重要方法)

    代码如下:

    1. /**===========================JS  注入====================================*/  
    2. - (void)jsClick {  
    3.     [self.webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"  
    4.      "script.type = 'text/javascript';"  
    5.      "script.text = "function myFunction() { "   //定义myFunction方法  
    6.      "var field = document.getElementsByName('word')[0];"  
    7.      "field.value='WWDC2014';"  
    8.      "document.forms[0].submit();"  
    9.      "}";"  
    10.      "document.getElementsByTagName('head')[0].appendChild(script);"];  //添加到head标签中  
    11.   
    12.     [self.webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];  
    13. }  



    附上例子源码:http://download.csdn.net/detail/xn4545945/7584575

  • 相关阅读:
    初识jQuery(2)
    初识jQuery(1)
    document和javaScript内置对象
    location
    history
    window对象
    注释、语法约定、函数和作用域
    运算符和typeof
    string
    数据恢复
  • 原文地址:https://www.cnblogs.com/huangh/p/4865932.html
Copyright © 2020-2023  润新知