我希望能够检测用户是否正在使用广告拦截软件，当他们访问我的网站。如果他们正在使用它，我想显示一条消息，要求他们关闭它以支持项目，就像这个网站一样。
如果你进入该网站，而你的浏览器启用了某种广告拦截软件，那么该网站就不会显示真正的广告，而是显示一个小横幅，告诉用户广告收入用于托管项目，他们应该考虑关闭广告拦截。
我想在我的网站上做到这一点，我正在使用adsense广告，我怎么能做到呢?
当前回答
我使用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') })
其他回答
时间的答案是很好的思考，但不再工作，所以我已经更新了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.js中，你可以做以下事情:
class AdblockDetect extends Component {
constructor (props) {
super(props)
this.state = {
usingAdblock: false
}
}
componentDidMount() {
this.setState({ usingAdblock: this.fakeAdBanner.offsetHeight === 0 });
}
render() {
if (this.state.usingAdblock === true) {
return this.props.children;
}
return (
<div
ref={r => (this.fakeAdBanner = r)}
style={{ height: '1px', width: '1px', visiblity: 'none', pointerEvents: 'none' }}
className="adBanner"
/>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<AdblockDetect>You are using adblock</AdblockDetect>
</div>
);
}
}
来源:https://stackoverflow.com/a/55635499/5539715
我用jquery最简单的解决方案是:
$.ajax({
url: "/scripts/advertisement.js", // this is just an empty js file
dataType: "script"
}).fail(function () {
// redirect or display message here
});
advertising .js什么都不包含。当有人使用adblock时，它失败了，函数被调用。
AdBlock似乎阻止加载AdSense(等)JavaScript文件。所以，如果你使用异步版本的AdSense广告，你可以检查adsbygoogle是否是一个数组。这必须在几秒钟后检查，因为异步脚本是…异步的。以下是一个大致的大纲:
window.setTimeout(function(){
if(adsbygoogle instanceof Array) {
// adsbygoogle.js did not execute; probably blocked by an ad blocker
} else {
// adsbygoogle.js executed
}
}, 2000);
为了澄清，这里有一个AdSense异步广告代码的示例:
<!-- this can go anywhere -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- this is where the ads display -->
<ins class="adsbygoogle" ...></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
注意adsbygoogle被初始化为一个数组。adsbygoogle.js库将此数组更改为Object {push:…}当它执行时。在一段时间后检查变量的类型可以告诉您脚本是否已加载。
我还没有看到任何好的，简单的答案来解决这两种类型的广告拦截在今天普遍使用，所以我将提供我自己的答案。
广告拦截器类型1:根据脚本名称(AdBlock, uBlock来源等)拦截网络广告脚本。
广告拦截器类型2:基于服务主机名的广告数据库(FireFox内容拦截器，各种网关插件等)拦截网络广告。
这个解决方案对两者都有效。它会弹出一个巨大的粉色“呼吁框”，要求用户禁用广告拦截器。我们喜欢把它放在菜单下面，内容上面。我们实际上并没有阻止对网站的访问-这只是把页面上的内容往下推了一点，但人们会发现这很烦人，几乎所有人都会遵守并禁用他们在你的网站上的广告拦截器。
这就是解决方案:
A)创建一个名为advertising .js的文件，并将其放置在你的web服务器的根目录下，由以下代码行组成:
document.write('<div id="tester">an advertisement</div>');
B)在你的网页中注入以下内容(你甚至可以使用你的广告服务器代码来做到这一点!)建议位置在菜单下方，内容上方。
<script src="advertisement.js"></script>
<table id="tbl_ab_appeal" style="width: 900px; margin-left:auto; margin-right: auto; padding: 25px; background: #FCC; border: 1px solid #F66; visibility:collapse; border-collapse: collapse;">
<tr>
<td>We've detected that you're using an <strong>ad content blocking</strong> browser plug-in or feature. Ads provide a critical source of revenue to the continued operation of [This website name]. We ask that you disable ad blocking while on [This
website name] in the best interests of our community.</td>
</tr>
</table>
<script>
if (document.getElementById("tester") == undefined) adsBlocked();
function adsBlocked() {
document.getElementById("tbl_ab_appeal").style.visibility = "visible";
document.getElementById("tbl_ab_appeal").style.borderCollapse = "separate";
document.getElementById("tbl_ab_appeal").style.marginTop = "10px"
document.getElementById("tbl_ab_appeal").style.marginBottom = "10px"
}
</script>
<script onerror="adsBlocked()" src="//www.googletagservices.com/tag/js/gpt.js"></script>
它是如何工作的?消息被加载，但被设为零高度且不可见。如果本地脚本advertising .js运行失败，或者远程AdSense脚本www.googletagservices.com/tag/js/gpt.js加载失败，则该方框可见。
