成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

我的頁面我做主——瀏覽器去廣告正確姿勢

20171112 / 3057人閱讀

摘要：簡單高效的自定義方式對于這些情況我們可以使用一個強(qiáng)大的瀏覽器插件，簡稱，中文俗稱為油猴，支持和瀏覽器。簡單幾行代碼，就可以去除大部分頁面廣告。聲明需要使用的函數(shù)。

會CSS就會去廣告~

傳統(tǒng)去廣告方法的弊端

我們?yōu)g覽網(wǎng)頁的時候經(jīng)常不免會看到各種不想看到的廣告內(nèi)容，最簡單的方案就是通過瀏覽器插件來解決，比如大名鼎鼎的AdBlock插件以及國內(nèi)的各種廣告攔截助手。

但這些插件的攔截能力可定制化程度不高，像AdBlock需要通過其定義的一套語法規(guī)則通過CSS選擇器來屏蔽一些DOM元素，碰到一些特殊的情況就無能為力了。

比如一個頁面上的某些重要元素被綁定了事件，點(diǎn)擊的時候會跳轉(zhuǎn)到廣告頁面，這時候就不能通過簡單的屏蔽DOM元素的方式來實(shí)現(xiàn)了。

簡單高效的自定義方式

對于這些情況我們可以使用一個強(qiáng)大的瀏覽器插件——Greasemonkey，簡稱GM，中文俗稱為“油猴”，支持Firefox和Chrome瀏覽器。

油猴并不是一個專門用來去廣告的插件，而是一個往頁面中植入JavaScript代碼的工具，用來修改頁面，或者添加一些功能，比如自動填充表單、顯示網(wǎng)盤文件下載鏈接等。

開發(fā)功能非常簡單，只需要通過js調(diào)用對應(yīng)API函數(shù)即可。

簡單幾行代碼，就可以去除大部分頁面廣告。

快速入門GM腳本

油猴的使用非常簡單，我們編寫一個js腳本，然后配置好對應(yīng)的網(wǎng)址。

這樣當(dāng)瀏覽器訪問匹配的網(wǎng)址時，油猴會加載我們編寫的js腳本，運(yùn)行里面的代碼。

簡而言之分兩步。

配置腳本。配置項(xiàng)大概在20個左右，下面我們介紹最重要的3個配置項(xiàng)。

編寫腳本。調(diào)用插件提供的API函數(shù)，為頁面添加CSS樣式或者執(zhí)行js代碼。

@include 腳本匹配的網(wǎng)址，支持星號“* ”來匹配任意字符?？梢允褂枚啻伪硎酒ヅ涠鄠€網(wǎng)址。

@grant 聲明需要使用的API函數(shù)。

@run-at 腳本執(zhí)行的時間，有5個可選值，CSS樣式我們選擇“document-start”在頁面渲染之前加載，而js腳本可以選擇“document-end”在頁面渲染完成后加載。

需要注意的是，配置參數(shù)是在以==UserScript==開頭，==/UserScript==結(jié)尾的注釋中的。

完整的示例如下：

// ==UserScript==
// @name         XX廣告過濾
// @version      0.1
// @icon         https://www.xxx.com/favicon.ico
// @description  try to take over the world!
// @author       You
// @include      http*://xx.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==

具體說明可以參考官方文檔：
https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg

2種常見場景以及對應(yīng)的操作 修改樣式

這是最簡單的屏蔽廣告的方式，只要配置規(guī)則就行了，能屏蔽80%以上的廣告。

以某論壇廣告為例，這個論壇的廣告是直接夾雜在帖子當(dāng)中，下方有個小小的字標(biāo)明廣告，一不小心就點(diǎn)進(jìn)去了。
而且帖子中間夾雜著毫不相干的廣告，相當(dāng)影響體驗(yàn)。

這種廣告屏蔽起來相當(dāng)簡單，寫一條樣式規(guī)則，將其display屬性置為none就行了。

.home-place-item {
  display: none!important;
}

以防被覆蓋，我們可以加上!important提升權(quán)限。

大部分廣告可以通過上面 css選擇器 + display屬性 的方式屏蔽。但有些廣告處理起來會比較麻煩。

例如搜索引擎的廣告，就使用了一些方式來“保護(hù)”。
某搜索引擎搜索“機(jī)票”可以看到下面的廣告信息。

可以看到該廣告元素style屬性中使用了最高權(quán)重的display、visibility兩個屬性，所以用上面隱藏的方式肯定是無效的。

所以只能選擇其他的方式，這里需要考驗(yàn)大家的css基本功了。
讓一個元素隱藏的方式有哪些？
下面是一種實(shí)現(xiàn)方式：

[cmatchid] {
  height: 0;
  overflow: hidden;
}
阻止js文件加載

還有一類廣告并不是以靜態(tài)元素的方式呈現(xiàn)，甚至你在頁面上都看不到它，它只在你第一次點(diǎn)擊某個功能的時候彈出來。
這種處理起來就相對麻煩，因?yàn)橹苯訉υ剡M(jìn)行修改可能會影響到正常功能使用。
但是這種廣告的事件綁定一般都是多帶帶寫在某個js文件中的，細(xì)心查找，然后阻止對應(yīng)的js文件加載就可以從根本上解決問題。
瀏覽器其實(shí)為插件提供了API用來阻止資源加載，但是油猴卻沒有主動提供。
后來在issue中找到了一個隱藏API來實(shí)現(xiàn)這個功能。
以阻止 https://xx.com 下的文件為例，可以在腳本開頭引用webRequest功能：

// @webRequest [{"selector":"https://xx.com/*","action":"cancel"}]
更多

只要你懂web前端，只要你肯動手，你的網(wǎng)頁都可以變成你想象的樣子。

裝上插件，去自定義你的頁面吧！

示例腳本地址：
https://github.com/yalishizhude/block-ad-scripts

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116113.html

相關(guān)文章

  • 我的頁面我做主——瀏覽器去廣告正確姿勢

    摘要：簡單高效的自定義方式對于這些情況我們可以使用一個強(qiáng)大的瀏覽器插件，簡稱，中文俗稱為油猴，支持和瀏覽器。簡單幾行代碼，就可以去除大部分頁面廣告。聲明需要使用的函數(shù)。 會CSS就會去廣告~ 傳統(tǒng)去廣告方法的弊端 我們?yōu)g覽網(wǎng)頁的時候經(jīng)常不免會看到各種不想看到的廣告內(nèi)容，最簡單的方案就是通過瀏覽器插件來解決，比如大名鼎鼎的AdBlock插件以及國內(nèi)的各種廣告攔截助手。 但這些插件的攔截能力可...

    iamyoung001 評論0 收藏0

  • 油猴子腳本 - 我的地盤我做主

    摘要：什么是油猴子腳本，簡稱，中文俗稱為油猴，是的一個附加組件。中文用戶腳本開發(fā)手冊油猴子腳本開發(fā)深入淺出如何使用他人的腳本網(wǎng)站提供很多腳本，它仿佛是代碼界的可以在該網(wǎng)站搜到很多有意思的腳本。 當(dāng)你用瀏覽器訪問某個網(wǎng)頁時，你可曾想過，你看到的這個網(wǎng)頁，實(shí)際上是屬于你自己的。 打個比喻：訪問某個網(wǎng)站就好像是網(wǎng)購了一筐雞蛋，雞蛋雖然是養(yǎng)雞場生產(chǎn)的，但是這個蛋我怎么吃，你養(yǎng)雞場管不著。 當(dāng)然了，對...

    taoszu 評論0 收藏0

  • 加載和執(zhí)行JS的正確姿勢

    摘要：在這些文件的下載執(zhí)行過程中，用戶看到的則是一片空白。頁面仍然必須等到所有代碼下載并執(zhí)行完畢才能繼續(xù)渲染。 前言 kyrieliuの《高性能JavaScript》讀書筆記。 script標(biāo)簽是一個很霸道的狠角色，它的每次出現(xiàn)都讓頁面等待腳本的解析和執(zhí)行。也就是說，不管當(dāng)前的javascript代碼是內(nèi)嵌還是包含在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執(zhí)行完成。 其實(shí)，scri...

    zhichangterry 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<