我希望能够检测用户是否正在使用广告拦截软件，当他们访问我的网站。如果他们正在使用它，我想显示一条消息，要求他们关闭它以支持项目，就像这个网站一样。
如果你进入该网站，而你的浏览器启用了某种广告拦截软件，那么该网站就不会显示真正的广告，而是显示一个小横幅，告诉用户广告收入用于托管项目，他们应该考虑关闭广告拦截。
我想在我的网站上做到这一点，我正在使用adsense广告，我怎么能做到呢?
当前回答
这份文件可能会有所帮助。 这是检测广告拦截软件最有效的方法 完全免费且易于实现 https://www.detectadblock.com/
其他回答
我的解决方案并不针对特定的广告网络，而且是非常轻量级的。我已经在生产环境中运行了几年。AdBlock会屏蔽所有含有“广告”或“预竞价”字样的url。这就是我所做的:
我在webroot中添加了一个名为prebid-ads.js的小js文件
这是文件中唯一的一行代码。将此变量命名为其他变量，参见下文!
var canRunAds = true;
然后在你页面的某处:
<html>
<head>
<script src="/js/prebid-ads.js"></script>
</head>
<body>
<script>
if( window.canRunAds === undefined ){
// adblocker detected, show fallback
showFallbackImage();
}
</script>
</body>
</html>
uBlock Origin加载他们自己的ads-prebid.js，还原了这个答案中描述的技巧(骄傲!)，他们的文件包含以下内容:
(function() {
'use strict';
window.canRunAds = true;
window.isAdBlockActive = false;
})();
作为一种解决方案，只需将canRunAds变量重命名为一些有趣的东西，比如window。adsAreWithUs或window.money高于隐私。
Ans de Nijs的发现和解决方法。谢谢!
支持扩展
像ads.js这样的文件在Chrome上至少会被这些广告拦截器屏蔽:
AdBlock Adblock Plus Adblock职业 Ghostery
不适用于:
隐私獾
我使用JavaScript承诺和jQuery来检测用户是否启用了广告拦截器:
Create a small image and rename it to ads.jpg (or whatever extension). Create a JavaScript function to call it when you need: function hasAdBlocker() { return new Promise(function(resolve, reject) { let img = $('<img style="display: none;" src="ads.jpg" />'); img.on("load", reject); img.on("error", resolve); $("body").append(img); }); } Call it like this: hasAdBlocker().then(function(){ console.log('Has adBlock') }, function() { console.log('No adBlock dedected') })
他们利用谷歌的广告代码创建了一个id为“iframe”的iframe。因此，只要您的页面上没有该ID的内容，这也适用于您。
<p id="ads">
<script type="text/javascript"><!--
google_ad_client = "their-ad-code-here";
/* 160x600, droite */
google_ad_slot = "their-ad-code-here";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<script type="text/javascript"><!--
if(document.getElementsByTagName("iframe").item(0) == null)
{
document.write("<div style='width:160px; height:600px; padding-top: 280px; margin-left:5px;border:1px solid #000000; text-align:center; font-family:century gothic, arial, helvetica, sans serif;padding-left:5px;padding-right:5px;'>Advertising seems to be blocked by your browser.<br /><br /><span style='font-size:10px'>Please notice that advertising helps us to host the project.<br /><br />If you find these ads intrusive or inappropriate, please contact me.</span><img src='http://www.playonlinux.com/images/abp.jpg' alt='Adblock Plus' /></div>");
}
--></script>
时间的答案是很好的思考，但不再工作，所以我已经更新了js文件的名称为“adsense”从“广告”，它是工作回来像一个魅力!
下面是代码，也许这将帮助到一些人:
<html>
<head>
<script src="/adsense.js"></script>
</head>
<body>
<script>
if( window.adblockDetecter === undefined ){
// Do anithing, adblocker detected!
alert('Adblocker Detected!');}
</script>
</body>
</html>
在Js文件中只放这一行:var adblockDetecter = true;
如果你正在使用react和钩子:
import React, { useState, useEffect } from 'react'
const AdblockDetect = () => {
const [usingAdblock, setUsingAdblock] = useState(false)
let fakeAdBanner
useEffect(() => {
if (fakeAdBanner) {
setUsingAdblock(fakeAdBanner.offsetHeight === 0)
}
})
if (usingAdblock === true) {
return null
}
return (
<div>
<div
ref={r => (fakeAdBanner = r)}
style={{ height: '1px', width: '1px', visibility: 'hidden', pointerEvents: 'none' }}
className="adBanner"
/>
Adblock!
</div>
)
}
export default AdblockDetect
