iOS中使用UIWebView與JS進行交互

時間 2019-12-10

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

原文原文鏈接

iOS中使用UIWebView與JS進行交互

前一段忙着面試和複習，這兩天終於考完試了，下學期的實習也有了着落，把最近學的東西更新一下，首先是使用UIWebView與JS進行交互javascript

在webView中我靜態獲取了一個有圖片的網頁，我想爲每張圖片添加點擊事件，就必須用到JS了css

首先建立JS文件，以下：html

 1 //給每張img添加點擊事件
 2 function setImageClickFunction(){
 3   var imgs = document.getElementsByTagName("img");
 4   for (var i=0;i<imgs.length;i++){
 5     var src = imgs[i].src;
 6     imgs[i].setAttribute("onClick","change_pic(src)");
 7   }
 8   document.location = imageurls;
 9 }
10 
11 //點擊圖片後返回給OC的回調函數
12 function change_pic(imagesrc){
13   var url = imagesrc;
14 //  window.open("www.baidu.com")
15   document.location = url;
16 }

以後在HTML中插入該JS文件，而且在<body>中調用setImageClickFunction函數java

在這裏由於調用的是返回JSON的API，其中包含靜態HTML和CSS連接，若是是動態網頁直接load的話，在webViewWillLoad:函數中調用你的JS函數便可web

1 //在加載靜態Web這種狀況下
2 NSString *js = [NSString stringWithFormat:@"<script type=\"text/javascript\">%@</script>", [NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"ClickImage" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil]];
3 NSString *html = [NSString stringWithFormat:@"<html><head>%@<link rel=\"stylesheet\" href=%@></head><body>%@</body></html>", js, css, body];
4 [self.webView loadHTMLString:html baseURL:nil];
5 
6 //調用JS中的函數，爲圖片添加點擊事件
7 - (void)webViewDidFinishLoad:(UIWebView *)webView {
8   [self.webView stringByEvaluatingJavaScriptFromString:@"setImageClickFunction()"];
9 }

這樣就爲全部的圖片添加了點擊事件，在點擊圖片後，js回調給oc的下面方法面試

1 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
2   NSLog(@"%@", request.URL.absoluteStrting);
3 }

在上面的方法中能夠對回調的如這樣的"https://pic3.zhimg.com/b4f7acc26514fb634131b04a430e6cbf_b.jpg」String進行其餘處理cookie

在其餘狀況也能夠調用下面的方法插入JS語句，或調用JS函數

[self.webView stringByEvaluatingJavaScriptFromString:string];

最後附上document、location、body屬性方法JS對象

document：屬性網絡

document.title //設置文檔標題等價於HTML的<title>標籤函數

document.bgColor //設置頁面背景色lua

document.fgColor //設置前景色(文本顏色)

document.linkColor //未點擊過的連接顏色

document.alinkColor //激活連接(焦點在此連接上)的顏色

document.vlinkColor //已點擊過的連接顏色

document.URL //設置URL屬性從而在同一窗口打開另外一網頁