zoukankan      html  css  js  c++  java
  • iOS中UIWebView使用JS交互

    iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍。但是用的不多,现在来教大家怎么使用js跟webview进行交互。

    这里就拿点击图片获取图片路径为例:

    1.测试页面html

    <!doctype html>
    <html>
      <head>
        
      </head>
      <body>
        <div>
          
          <img src="test.png"/>
          
        </div>
      </body>
    </html>

    2.然后我们在controller中加载这一段html

    [_webview loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle]URLForResource:@"work" withExtension:@"html"]]];

    3.可以看到,这里只显示一张图片

    4.加载相关js文件,命名为test.js

    function setImageClickFunction(){
      var imgs = document.getElementsByTagName("img");
      for (var i=0;i<imgs.length;i++){
        var src = imgs[i].src;
        imgs[i].setAttribute("onClick","click(src)");
      }
      document.location = imageurls;
    }
    
    function click(imagesrc){
      var url="ClickImage:"+imagesrc;
      document.location = url;
    }

    这里说下两个方法的意思(对那些不熟悉js的有帮助):第一个是给你的webview里所有图片加上点击事件,第二个方法为点击后返回图片的URL,关于接收这个URL下面说。

    5.在controller中加载这一段js代码

    [_webview stringByEvaluatingJavaScriptFromString:[NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"test" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil]];

    你还可以直接把js代码放到html中,效果是一样的。

    6.在webview的代理方法中,我们用去调用第一个js方法

    -(void)webViewDidFinishLoad:(UIWebView *)webView
    {
         [_webview stringByEvaluatingJavaScriptFromString:@"setImageClickFunction()"];
    }

    ,这里也就是说在webview加载完后给他绑定上点击事件。好了,最后就是接收URL了

    7.接收js返回值,当点击图片的时候会实现这个代理方法(每次加载webview都会显示),然后我们输出他的返回值看看

    -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
    {
      
      NSString *path=[[request URL] absoluteString];
      
      NSLog(@"%@",path);
      return YES;
    }
    2014-10-03 19:39:37.099 webview[31153:60b] ClickImage:file:///Users/zhiwupei/Library/Application%20Support/iPhone%20Simulator/7.1-64/Applications/C4F814F6-088D-444F-A508-40AB5C775567/webview.app/test.png

    可以看到控制台打印了图片路径出来。因为这里用的是本地图片,网络图片也是同样的道理。这样就可以实现点击图片获取到他的路径了。

    转自:http://www.tuicool.com/articles/6nM3ym

  • 相关阅读:
    事件的截获
    页面嵌入dom与被嵌入iframe的攻防
    如何在windows下安装JDK
    Java and C# Comparison
    利用hadoop来解决“单表关联”的问题
    Oracle10GODP连接11G数据库,出现ORA
    sql 2005出现错误:数据库 'Twitter' 的事务日志已满。若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列。
    MapReduce 模式、算法和用例
    利用hadoop来解决“共同好友”的问题
    部署hadoop的开发环境
  • 原文地址:https://www.cnblogs.com/pretty-guy/p/4468931.html
Copyright © 2011-2022 走看看