下面通過圖文并茂的方式給大家分享下這方面的知識(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)容，希望大家喜歡。

最新評(píng)論