如何使用JavaScript檢測是否正在使用廣告攔截程序
我使用的一種方法是，在我知道正在使用廣告攔截程序的情況下為網站添加自己的廣告。
對於像程序員這樣的專業使用者和技術人員來說，使用廣告攔截程序非常常見。
在我的網站上，我估計大約有20%到25%的訪問者使用某種形式的廣告攔截程序。
我對此沒有任何問題，儘管我支持通過廣告來維持博客運營，但我想做的一件事是，只有在啟用了廣告攔截程序時，才能推廣我自己的產品，這樣您才不會看到我使用的廣告網絡Carbon的廣告，而是一個我想要推廣的鏈接。
我不希望看到這種技術被用來顯示“停用廣告攔截程序！”這樣的消息，因為我發現當它被使用時，這很煩人。如果您這樣做，可以考慮促銷自己的產品，而不是廣告別人的產品。只是一個想法。
如果您現在啟用了廣告攔截程序，您可以在標題後面看到一個“贊助”詞語-那就是我想要推廣的產品-一個我目前正在構建的東西，我正在通過查看有多少人註冊等待列表來測試這個想法。
如果未啟用廣告攔截程序，該位置上會有一個廣告，所以我不想同時顯示太多廣告，以免對幫助經營這個博客的好人們產生不好的體驗。
這個JavaScript片段幫助我實現了這一點。
1
2
3
4
5
6
7
8
9
10
11
12
13
| 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('是否阻擋了廣告？ ', adblockEnabled)
}
}, 100)
|
請確保將它放在頁面底部以在DOM加載完成時運行，或者等待DOMContentLoaded事件。
一旦獲取到adblockEnabled的值，您就可以將自己的自定義廣告添加到頁面。
這是我用於執行此操作的腳本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| if (adblockEnabled) {
const link = document.createElement('a')
link.setAttribute('href', 'https://flaviocopes.com')
link.setAttribute('target', '_blank')
const img = document.createElement('img')
img.src = '/img/image.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('.promotion').classList.remove('hidden')
document.querySelector('.promotion').appendChild(link)
}
|
我加載了一個圖像，如果是暗模式，則對其進行反色處理，將其設置為指向https://flaviocopes.com網站的鏈接，然後將其添加到頁面中。
tags: [“JavaScript”, “adblocker”, “DOMContentLoaded”]