由于我們網站上的廣告經常被一些廣告插件給屏蔽掉，上級給我下達了一個檢測瀏覽器是否安裝了屏蔽廣告的插件的任務。

經過研究，借鑒，參考，整合了如下三種解決方案。

方案一：

利用廣告插件通過對含有google-ad，testad，ad等，帶ad的敏感詞匯的dom元素進行屏蔽的方式尋找突破口，我模擬了一個<div class="google-ad">這里是一個廣告位</div>將這個div加載在頁面的dom節點的最頂端，發現所有的廣告插件，都能檢測到這個廣告位并且采用dispaly：none，或者將div的高度塌陷變為0，于是我們有了下面的方法。

在頁面頂部加上<div class="google-ad testAd"> 這里是一個廣告位</div>，然后加入如下代碼：

<script src="jquery.min.js"></script>
<script>
$(function(){
        if($('.google-ad').height()==0 || $('.google-ad').css('display') == 'none'){
           console.log($('.google-ad').height());
           console.log($('.google-ad').css('display'));
           alert('您的瀏覽器安裝了屏蔽廣告的插件Adblock，or uBlock Origin，要使您能夠正常使用網站請先屏蔽瀏覽器上的相關的廣告屏蔽插件。');
        }

     })
</script>

方案二：

模擬動態加載一個廣告（ads.js）的方式，如果安裝了廣告插件，則這個廣告js(ads.js)不會被加載成功。

新建一個空白的ads.js文件。

在頁面上寫上如下代碼：

 1 <script src="jquery.min.js"></script>
 2 <div>
 3 <script>
 4 $(function(){
 5         $.ajax({
 6           url: "ads.js",
 7           dataType: "script"
 8         }).fail(function () {
 9            alert('您的瀏覽器安裝了屏蔽廣告的插件Adblock，or uBlock Origin，要使您能夠正常使用網站請先屏蔽瀏覽器上的相關的廣告屏蔽插件。');
10         });
11      })
12 </script>

方案三：

參照網上一位仁兄寫的代碼，親測有效。項目地址：https://github.com/sitexw/FuckAdBlock。

方案四：逆向思維

要想自己網站上的廣告位圖片不被屏蔽掉，網站上加載的廣告js能夠正常加載，就不要使用能夠被廣告插件輕易讀取識別的命名規則去命名廣告了。

這個問題的解決方法，再次檢驗了一個實用方法論：當苦苦思索的方法解決不了問題時，不妨轉化思路可以采取迂回的戰術間接尋求問題的解決方法。

總結

以上是生活随笔為你收集整理的如何检测浏览器是否安装了Adblock，uBlock Origin，Adguard,uBlock等广告屏蔽插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。