利用Javascript去操作UIWebView的內(nèi)容

Web背景知識

web 時代三劍客 html + css + javascript

html : 就像是我們創(chuàng)建一個UIView,只是規(guī)定我們創(chuàng)建的是一個長方形的框架,還有我們創(chuàng)建一個UIImageView只是去創(chuàng)建一個可以放圖片的控件,html只是規(guī)定了一些控件的類別,其中web 1.0時代以table控件為主要控件,web 2.0 時代,主要就是div控件了.這個div控件其實我們的UIView 是一樣的東西.

css : 我們在創(chuàng)建UIView之后是不是要給這個UIView設(shè)置frame,backgroundcolor等等一些屬性, 其實這些屬性就是對應(yīng)這web 中的css, css就是給用html控件添加樣式用的.

Javascript: 這是一個神奇的語言!因為他現(xiàn)在不僅可以做web端了,還可以用來做后臺服務(wù)端了(node.js),而且還可以用來做移動端了(React Native).但是,在web端中,javascript一般用來處理html中的控件的動作啊,動畫啊,改變屬性啊.其實和iOS中的手勢和按鈕事件還有view動畫,和layer動畫是差不多的.

實例: 利用javascript 去屏蔽網(wǎng)頁中廣告

一般情況下我們使用一些網(wǎng)頁中,都會帶一些廣告.我們要把這些廣告去掉.

在chrome 中打開http://m.haodou.com/topic-327282.html?id=327282,并且設(shè)為手機模式.調(diào)整方法見圖

圖一(調(diào)整瀏覽器)

瀏覽器設(shè)置 -> 更多工具 -> 開發(fā)者工具 -> 手機模式(左下角 手機按鈕)

這時頁面就變成手機版網(wǎng)頁了.

圖二(選擇你要隱藏的控件)

點擊手機圖標左邊那個搜索框-> 然后點擊你要隱藏的控件

圖三(獲取到你要隱藏的代碼)

選擇到你要選擇到的控件 -> 然后左下角代碼就被選中了.

其中右下角中是這個控件對應(yīng)的css代碼,在其中添加一行display:none,這時這個選中的控件就被隱藏起來了.但是我們主要通過javascript去操作這個控件

圖四(用js代碼區(qū)獲取到要隱藏的控件)

點擊console -> 在命令行中輸入要執(zhí)行的代碼 -> 返回執(zhí)行結(jié)果

document.getElementsByClassName('adpic')

上面一行代碼是獲取到html 中class 是’adpic’的控件. 但是可以看見返回值是被[]包圍的,這其實是一個數(shù)據(jù).

圖五(獲取到要隱藏的元素)

圖六(獲取到要隱藏的元素)

document.getElementsByClassName('adpic')[0]

通過下標訪問法去訪問數(shù)組的第0個元素.

圖七(設(shè)置獲取到控件的display屬性)

document.getElementsByClassName('adpic')[0].style.display ='none'

上面一行代碼就是去改變要隱藏的控件的display屬性,將這個css屬性改為none,就是不讓這個控件顯示,這時,我們要隱藏的數(shù)據(jù)就會自動消失了.

到處為止,我們的js代碼就寫好了.在這個html頁面中執(zhí)行行代碼就可以隱藏廣告.但是我們的最終目的是在UIWebView中執(zhí)行這行代碼就行了.

UIWebView的使用

創(chuàng)建UIWebView

設(shè)置代理

加載網(wǎng)絡(luò)請求

//創(chuàng)建webview

self.webview= [[UIWebViewalloc] initWithFrame:self.view.frame];

[self.viewaddSubview:_webview];

//設(shè)置代理

self.webview.delegate=self;

//發(fā)送請求

[_webview loadRequest:[NSURLRequestrequestWithURL:[NSURLURLWithString:@"http://m.haodou.com/topic-327282.html?id=327282"]]];

運行后情況如下圖

我們現(xiàn)在加載的網(wǎng)易的圖片是有圖片的,現(xiàn)在我們只需要往這個webview 中運行我們上面測試出來的一條js代碼就會屏蔽這個廣告圖.

但是怎么運行呢?

還記得我們給webview添加了代理了么?他有一個回調(diào)方法.

見代碼!!!

#pragmamark-UIWebViewDelegate

?-(void)webViewDidFinishLoad:(UIWebView *)webView{

[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.getElementsByClassName('adpic')[0].style.display = 'none'"];

}

這行代碼是在webview 中執(zhí)行參數(shù)中的那一行代碼,還記得這行代碼有什么作用么?

這個回調(diào)函數(shù)會在webview 請求網(wǎng)頁成功會執(zhí)行這個方法,當執(zhí)行這個方法時,我們就用webview去執(zhí)行屏蔽廣告的js代碼.

效果如下圖

當廣告消失后,是不是我們的目的達到了.但是這個js代碼要自己去分析.因為每一個網(wǎng)頁中廣告的控件都不一樣.但是學(xué)會了去網(wǎng)頁中通過js找到一個控件元素,那就離成功不遠了.