互聯(lián)網(wǎng)的潛規(guī)則之一是大多數(shù)內(nèi)容都是“免費(fèi)的”……代價(jià)是網(wǎng)頁(yè)上到處都是廣告和追蹤器。在早期的互聯(lián)網(wǎng)時(shí)代，這并不是一個(gè)大問題，但追蹤器和廣告已經(jīng)變得如此具有侵入性和不可原諒的侵犯性，以至于你幾乎需要使用一個(gè)廣告攔截瀏覽器擴(kuò)展。

廣告攔截器非常流行，像Brave這樣的瀏覽器吹噓自己圍繞著廣告攔截展開。我經(jīng)常去一個(gè)網(wǎng)站，看到一個(gè)模態(tài)，我禁用了我的廣告攔截器，這讓我思考最好的方法來檢測(cè)廣告攔截器。經(jīng)過各種測(cè)試和實(shí)驗(yàn)，我發(fā)現(xiàn)了一個(gè)非常簡(jiǎn)單的方法來檢測(cè)廣告攔截器!

本質(zhì)上，我的方法試圖加載谷歌的廣告服務(wù)JavaScript文件，如果請(qǐng)求失敗，這可能是由于用戶有一個(gè)廣告攔截器:

// Determines if the user is likely using an ad block extension
async function checkAdBlocker() {
  // Used to cache the result
  let isBlocked;

  async function tryRequest() {
    try {
      return fetch(
        new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
          method: 'HEAD',
          mode: 'no-cors'
        }))
        .then(function(response) {
          // Google Ads request succeeded, so likely no ad blocker
          isBlocked = false;
          return isBlocked;
        }).catch(function(e) {
          // Request failed, likely due to ad blocker
          isBlocked = true;
          return isBlocked;
        });
    } catch (error) {
      // fetch API error; possible fetch not supported (old browser)
      // Marking as a blocker since there was an error and so
      // we can prevent continued requests when this function is run
      console.log(error);
      isBlocked = true;
      return isBlocked;
    }
  }

  return isBlocked !== undefined ? isBlocked : await tryRequest();
}

// Using the ad block checker
const usingBlocker = await checkAdBlocker();

這背后的邏輯如下:

谷歌的廣告文件，adsbygoogle.js是一個(gè)完美的示例文件，因?yàn)樗徽J(rèn)為是頭號(hào)敵人——由于谷歌的廣告服務(wù)受歡迎，廣告攔截器想要攔截的第一個(gè)文件

該文件也是至關(guān)重要的谷歌的業(yè)務(wù)，因此99.999999999%的正常運(yùn)行時(shí)間幾乎得到了保證

幾乎不可能出現(xiàn)網(wǎng)絡(luò)問題;誤報(bào)可能來自網(wǎng)絡(luò)連接問題或壞的服務(wù)工作者

如果你不認(rèn)為adsbygoogle.js是最好的示例文件，你可以很容易地將它切換到其他URL

從內(nèi)容創(chuàng)建者的角度來看，一個(gè)導(dǎo)航屬性可以讓你知道是否使用了廣告攔截器是最理想的……但這不會(huì)很快發(fā)生(…沒有,真的)。然而，使用這樣簡(jiǎn)單的代碼片段，可以為用戶啟用廣告攔截器提供一個(gè)合理的提示!