如何检测Adblocker是否与JavaScript一起使用

It’s pretty common for prosumers and technical people like programmers to use an adblocker.

对于生产者和程序员这样的技术人员来说，使用adblocker很常见。

On my website, I estimate about 20% to 25% of the visitors use an adblocker of some sorts.

在我的网站上，我估计约有20％到25％的访问者使用某种形式的adblocker。

I have no problems in that, even though I support the blog using ads, but one thing I wanted to do was to promote one of my products only if you had an adblocker enabled, so you don’t see an ad from Carbon, the network I use, but a link to something I do want to promote.

即使我使用广告来支持博客，我也没有任何问题，但是我要做的一件事就是仅在启用了广告拦截器的情况下促销我的一种产品，这样您就看不到Carbon的广告，我使用的是网络，但指向我确实想要推广的东西的链接。

I’d hate to see this technique used to show a “disable the adblocker!” kind of message, because I find it annoying when I see it used. If you do so, consider the option to promote your own products instead of advertising other people’s products. Just an idea.

我不希望看到这种技术用于显示“禁用adblocker！”。 这类消息，因为当我看到它使用时，我会感到讨厌。 如果这样做，可以考虑推广自己的产品，而不是广告其他人的产品。 只是一个想法。

If you have an adblocker enabled right now, you can see a “Sponsor” right after the title - well, that’s the product I want to promote - a thing I’m currently building and I am testing the idea by seeing how many people sign up to the waiting list.

如果您现在启用了广告拦截器，则标题后面会显示一个“赞助商”-这是我要推广的产品-我正在构建的产品，正在通过查看有多少人签名来测试该想法到候补名单。

Without an adblocker, that place is busy with an ad, so I don’t want to have too many ads at the same time and cripple the experience to the nice people that help keeping this blog running.

没有广告拦截器，那个地方就忙着做广告，所以我不想同时放太多广告，而不会给那些帮助保持此博客正常运行的好人破坏经验。

This JavaScript snippet helps me do the thing.

这个JavaScript代码段可以帮助我完成任务。

let adBlockEnabled = false
const ad = document.createElement('div')
ad.innerHTML = ' '
ad.className = 'adsbox'
document.body.appendChild(ad)
window.setTimeout(function() {
  if (ad.offsetHeight === 0) {
    adblockEnabled = true
  }
  ad.remove()
  console.log('Blocking ads? ', adblockEnabled)
  }
}, 100)

Make sure you place it at the bottom of the page to run it when the DOM is loaded, or wait for the DOMContentLoaded event.

确保将其放在页面底部以在加载DOM时运行它，或者等待DOMContentLoaded事件 。

Once you know the adblockEnabled value, you can add your own custom ad to the page.

知道adblockEnabled值后，您可以将自己的自定义广告添加到页面。

Here’s the script I use to do that:

这是我用来执行此操作的脚本：

if (adblockEnabled) {
  const link = document.createElement('a')
  link.setAttribute('href', 'https://prototyped.dev')
  link.setAttribute('target', '_blank')
  const img = document.createElement('img')
  img.src  = '/img/prototyped.png'
  img.style.paddingBottom = '30px'
  img.style.margin = '0 auto'
  img.style.maxWidth="65%";
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    img.style.filter="invert(100%)"
  }
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
      const newColorScheme = e.matches ? "dark" : "light"
      if (newColorScheme === 'light') {
        img.style.filter = ''
      } else {
        img.style.filter="invert(100%)"
      }
  })
  link.appendChild(img)
  document.querySelector('.prototyped').classList.remove('hidden')
  document.querySelector('.prototyped').appendChild(link)
}

I load an image, invert it if it’s dark mode, make it a link to the https://prototyped.dev website, the new idea I’m testing, and I add it to the page.

我加载图像，如果它是黑暗模式则将其反转，使其链接到https://prototyped.dev网站，我正在测试的新概念，然后将其添加到页面中。

翻译自: https://flaviocopes.com/how-to-detect-adblocker/