CSS去除免費虛擬機器主機的廣告心得分享

來源:互聯網
上載者:User

    相信大多數web developer都有使用免費虛擬機器主機的經曆吧?呵呵,無論是用來做實驗、新手練手,還是一些莫名其妙的用途,你總有捨不得花錢買收費虛擬機器主機的時候。免費空間的作用非常大。但是我們注意到,越是好的免費虛擬機器主機,越是會放置煩人的強制廣告。

    在虛擬機器主機圈子內摸爬滾打多了,才知道,外國很多免費虛擬機器主機,品質都遠比國內的收費虛擬機器主機好。比如我在SiteMix.jp申請的日本虛擬機器主機,容量1.5G,支援PHP5, 流量不限,CPU不限,Mysql資料庫空間不限,還內建最新版本的Wordpress,速度飛快,穩定;如果換作是國內收費虛擬機器主機的話,至少是300RMB/年的價格。不信? 好吧,為了最大限度地測試它的效能,我申請了一個,做極耗資源的自動採集站,簡直是飛一般的感覺(圍觀地址http://degreeus.co.cc/)。這不是個案,再如我在一家俄羅斯網站申請的免費虛擬機器主機,甚至還可以放更加耗資源的放文本資料庫Web遊戲(圍觀地址:http://www.sixsix.tu2.ru/)。注意,採集站和web遊戲站,國內超過一半的收費虛擬機器主機都不讓放的,也放不起,因為會佔用太多資源。

    好了,說了這麼多。迴歸正題。

    剛才說了,經驗告訴我們,越是好的免費虛擬機器主機,越是會放置廣告。由於彈窗廣告的方式已經成為流氓專用,免費虛擬機器主機商插入廣告的方式無外乎對HTML標籤動手腳。具體操作基本上就跟“駭客”們在網站掛馬的一樣,無外乎就是以下這兩種。

  1. 通過javascript寫入廣告 (紅框部分,示範地址http://degreeUs.co.cc/ad.htm)
  2. 通過強制插入iframe插入廣告(紅框部分;示範地址http://sango.toypark.in/ad.htm)

    

   首先我們看iframe方式。

   查看原始碼,發現有這麼一行

    哦,明白了,空間供應商在web伺服器輸出html時,把所有的網頁的"<body>” 強制替換成了形如 “<body><div><iframe /></div>”的樣子,iframe裡是廣告頁面,這樣就形成了類似於網站掛馬的強制廣告。

    幹掉iframe廣告的方法很多,本文只討論使用css來處理之。

    大家都知道CSS可以直接描述一個可視標記的外觀。例如:p{color:red} 則網頁裡所有p標記裡的文字顏色都會變成紅色;iframe不也是一個標記嗎?來:

iframe{...這裡寫描述外觀的CSS代碼;};

    具體就是 iframe{ad:expression(this.src='about:blank',this.outerHTML='');}

     解釋一下,首先,選擇所有的iframe,然後,隨便定義一個css屬性,如ad,通過expression設定iframe內嵌網址為空白,最後,通過設定outerHTML 屬性移除iframe標記。這樣就解決咯~

有廣告的示範:http://sango.toypark.in/ad.htm

去掉廣告的示範:http://sango.toypark.in/noad.htm

 

    接下來我們討論javascript形式的廣告如何去。

    首先我們先思考兩個問題:1.空間商會在哪裡插入javascript,以保證他插入的javascript能夠正常運行,且不破壞原本的網頁呢?必須要一個通用的方法適合每個網站 ; 2.javascript裡會是什麼內容呢?

      做過網站的朋友都知道,與插入iframe的方式類似,由於每個網頁都會有<body>和</body>這兩個標籤,所以空間商一般會選擇替換其中的一個,比如把</body>替換成<script src=’…’/></body>。 為了不影響網頁原本的外觀,空間商一般都是替換</body>而不是<body>,這樣比較人性化,廣告放在最後,也就是讓所有內容都載入完之後才會載入廣告。

     原理如此簡單,需要去掉廣告也很容易了。最常見的是使用<noscript>標籤、寫入針對性的javascript移除廣告。當然我最喜歡的也是操作性最容易的,就是採用css了,也是對網站修改最小的辦法。

     具體怎樣做呢,這就需要剛剛提出的第二個問題了。javascript裡會是什麼內容呢? 一般來說,空間商喜歡有連結、帶樣式的廣告,所以javascript往往是寫入一個div(也有寫入iframe的,就可以採用上文的方法去了)。對於最常見的寫入div, 我們只要通過DOM操作擷取到這個div, 設定它的style=’display:none;’就行了。  怎樣擷取這個div? 兩種情況,簡單的情況是這個div有id,我們通過在css裡寫入類似"#id{}”的樣式定義即可;如果這個div沒有id,我們知道它肯定是DOM結構裡的最後一個div(因為它緊靠</body>),使用DOM的getElementsByTagName()方法與lastChild屬性結合即可。

示範地址的div有id,很幸運。我們找了它的id後,只需要在全域引用的css檔案中這樣寫:

#sitemix_pr_footer{display:none;}

有廣告的示範:http://degreeUs.co.cc/ad.htm

去掉廣告的示範:http://degreeus.co.cc/ 整站。

    

    去廣告的方式各種各樣,因為空白間商插入廣告的方式各不相同,但無論是掛廣告還是去廣告,他們的原理都是一樣的。有的空間商廣告稍微複雜一點(如以前的websamba),但同樣可以通過CSS、javascript(css expression)、DOM的方法來解決,往往都是一兩句代碼的事情。在下才疏學淺,不能說有什麼技術含量,只能算是心得吧!呵呵,大家踴躍討論。

    希望大家以後遇到強插廣告的虛擬機器主機千萬不要放棄,稍微動一下腦筋,就能夠去掉廣告哦!這非常重要,因為一般情況下好用的空間才會插廣告。

    o(∩_∩)o。

    謝謝!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.