iOS 9 更新之Safari廣告攔截器(Content Blocker)開發(fā)教程
下面通過圖文并茂的方式給大家分享下這方面的知識(shí),具體內(nèi)容如下。
相對(duì)于谷歌對(duì)廣告攔截的禁止,蘋果與之態(tài)度截然相反,繼Mac版Safari加入廣告攔截工具之后,即將到來(lái)的iOS9對(duì)Safari也引入了內(nèi)容攔截插件-Content Blocker,并且開發(fā)者可以使用最新的Xcode7開發(fā)以及使用iOS 9模擬器進(jìn)行調(diào)試,下面,筆者將用一個(gè)簡(jiǎn)單的實(shí)例進(jìn)行講解如何開發(fā)Content Blocker。
在使用Google搜索時(shí),排行靠前面的幾條永遠(yuǎn)都是廣告項(xiàng),比如搜索“iPhone6”,得到的結(jié)果如圖1所示:
圖1 Google 搜索iPhone 6未進(jìn)行廣告攔截示例
今天的目標(biāo)就是將廣告項(xiàng)攔截掉,以后在使用Google搜索時(shí),都不會(huì)再有這種礙眼的廣告排在前面了。
首先當(dāng)然是建工程,創(chuàng)建一個(gè)iOS Single View Application,接著為工程創(chuàng)建一個(gè)iOS Content Blocker Extension的target。然后我們會(huì)看到,工程為我們自動(dòng)創(chuàng)建了一個(gè)blockerList.json文件,以及一個(gè)ActionRequestHandler類。從ActionRequestHandler類的實(shí)現(xiàn)代碼不難看出,它是將blockerList.json文件嵌入Safari。事實(shí)上,這個(gè)json文件正是Content Blocker的核心,使用它將可以用最簡(jiǎn)單的配置方式,為我們實(shí)現(xiàn)內(nèi)容攔截,接下來(lái),我來(lái)講解一下這個(gè)json文件的編寫規(guī)則。
圖2 建立廣告攔截器(Content Blocker)工程
blockerList.json文件里面自動(dòng)生成了幾行代碼,代碼中包含了一個(gè)action和一個(gè)trigger,每一個(gè)action和trigger的組合構(gòu)成一條規(guī)則。
[[ { "action": { "type": "block" }, "trigger": { "url-filter": "webkit.org/images/icon-gold.png" } } ]]
1、action指定這條規(guī)則采用的攔截方式,type可選值為 “block”,“block-cookies”, “css-display-none”,分別表示攔截資源文件(比如css文件,js文件,圖片資源)、攔截cookies,將指定html元素css的display屬性設(shè)置為none。而當(dāng)type為css-display-none時(shí),必須在action中加入“selector”的鍵值對(duì),selector即是css selector,指定哪一些html元素的display屬性將被設(shè)置為none(即隱藏),當(dāng)然,如果你不熟悉css selector,趕快去學(xué)習(xí)吧。
2、triggerr指定這條規(guī)則適用的網(wǎng)站url,可以使用正規(guī)表達(dá)式,當(dāng)然盡量精確的表達(dá)式,不要影響網(wǎng)頁(yè)瀏覽效率,畢竟Content Blocker是應(yīng)用于整個(gè)瀏覽器和所有的網(wǎng)站。
了解了這些,我們不難理解blockList.json的含義,type為block,表明這是在阻止webkit.org/images/icon-gold.png這個(gè)圖片的加載。當(dāng)然,我們今天的目標(biāo)是攔截Google搜索結(jié)果中的廣告項(xiàng)。
首先,對(duì)action type的選擇,這里很明顯是對(duì)網(wǎng)頁(yè)內(nèi)容的攔截,我們選擇的type值為css-display-none,接著獲取我們要隱藏的html元素,這里我們借助Mac版Safari的網(wǎng)頁(yè)源碼分析工具,打開Mac版Safari,選擇Develop menu下的simulator,然后選擇正在瀏覽的www.Google.com.hk頁(yè)面,Web Inspector工具隨即將simulator上Safari正在瀏覽的網(wǎng)頁(yè)源碼陳列出來(lái)。什么,沒有Develop menu?在Mac Safari的preference里選擇advance選項(xiàng),將Show Develop menu in menu bar選項(xiàng)選擇就有了。接下來(lái),我們很輕松地找到了廣告對(duì)應(yīng)的div和它對(duì)應(yīng)的id。
圖3 獲取插件元素示意圖
有了div的id,我們將selector屬性設(shè)置為div#taw,指定id為taw的div,然后設(shè)置trigger的url-filter為google.com.hk/。
[ { "action": { "type": "css-display-none", "selector":"div#taw" }, "trigger": { "url-filter": "google.com.hk/" } } ]
激動(dòng)人心的時(shí)刻到了,接下來(lái)讓我們見證成敗,運(yùn)行工程,記住,不要選擇了Content Blocker的target,那樣子雖然也能將json嵌入Safari,但是死活是無(wú)效的,也許是beta版的bug。
圖4 廣告攔截后搜索示意圖
運(yùn)行的程序一片空白,接下來(lái)我們要到系統(tǒng)設(shè)置界面,選擇Safari->Content Blockers(內(nèi)容攔截器)->打開你的插件(如果已經(jīng)打開了,切記關(guān)掉后重新打開一次)?;氐綖g覽器,刷新剛剛的Google搜索頁(yè)面,廣告項(xiàng)已經(jīng)不在,且無(wú)論你在Google中搜索任何內(nèi)容,你再也見不到排前面這一堆的廣告。
以上就是本文的全部?jī)?nèi)容,希望大家喜歡。
- iOS中詳解Block作為property屬性實(shí)現(xiàn)頁(yè)面之間傳值
- 一篇文章讓你看懂IOS中的block為何再也不需要WeakSelf弱引用
- iOS中block變量捕獲原理詳析
- iOS MRC 下 block 循環(huán)引用問題實(shí)例講解
- 淺談iOS 對(duì)于block的一點(diǎn)理解
- iOS在Block中修改外部變量值的實(shí)現(xiàn)代碼
- iOS面試中如何優(yōu)雅回答B(yǎng)lock導(dǎo)致循環(huán)引用的問題
- IOS 使用Block二次封裝AFNetworking 3.0詳解
- iOS通過逆向理解Block的內(nèi)存模型
- iOS利用Block逆向傳值的方式詳解
- iOS通過block在兩個(gè)頁(yè)面間傳值的方法
- iOS中Block的回調(diào)使用和解析詳解
- iOS(閉包)block傳值詳解
相關(guān)文章
iOS中json解析出現(xiàn)的null,nil,NSNumber的解決辦法
在iOS開發(fā)過程中經(jīng)常需要與服務(wù)器進(jìn)行數(shù)據(jù)通訊,Json就是一種常用的高效簡(jiǎn)潔的數(shù)據(jù)格式,通過本文給大家介紹iOS中json解析出現(xiàn)的null,nil,NSNumber的解決辦法,感興趣的朋友參考下2016-01-01IOS開發(fā)之字典轉(zhuǎn)字符串的實(shí)例詳解
這篇文章主要介紹了IOS開發(fā)之字典轉(zhuǎn)字符串的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,讓大家掌握這樣的方法,需要的朋友可以參考下2017-10-10實(shí)例講解iOS應(yīng)用開發(fā)中UIPickerView滾動(dòng)選擇欄的用法
這篇文章主要介紹了iOS應(yīng)用開發(fā)中UIPickerView滾動(dòng)選擇欄的用法,示例代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-04-04iOS Xcode8更新后輸出log日志關(guān)閉的方法
今天剛把xcode更新到了xcode8,運(yùn)行發(fā)現(xiàn)好多l(xiāng)og輸出,怎么關(guān)閉呢,不是很清楚,通過查閱相關(guān)資料順利關(guān)掉這些log日志,下面小編把方法共享下,需要的朋友參考下2016-09-09詳解IOS判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的三種方法
這篇文章主要介紹了詳解IOS判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的三種方法,網(wǎng)絡(luò)狀態(tài)是非常重要的知識(shí),感興趣的同學(xué),必須要看一下2021-04-04