iOS中UIWebView使用JS交互

時間 2019-11-12

標籤 ios uiwebview 使用交互欄目 iOS 简体版

原文原文鏈接

iOS中偶爾也會用到webview來顯示一些內容，好比新聞，或者一段介紹。可是用的很少，如今來教你們怎麼使用js跟webview進行交互。javascript

這裏就拿點擊圖片獲取圖片路徑爲例：html

1.測試頁面htmljava

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

2.而後咱們在controller中加載這一段htmlweb

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

3.能夠看到，這裏只顯示一張圖片ruby

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下面說。app

5.在controller中加載這一段js代碼測試

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

你還能夠直接把js代碼放到html中，效果是同樣的。lua

6.在webview的代理方法中，咱們用去調用第一個js方法url

-(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

能夠看到控制檯打印了圖片路徑出來。由於這裏用的是本地圖片，網絡圖片也是一樣的道理。這樣就能夠實現點擊圖片獲取到他的路徑了。