我希望能够检测用户是否正在使用广告拦截软件,当他们访问我的网站。如果他们正在使用它,我想显示一条消息,要求他们关闭它以支持项目,就像这个网站一样。

如果你进入该网站,而你的浏览器启用了某种广告拦截软件,那么该网站就不会显示真正的广告,而是显示一个小横幅,告诉用户广告收入用于托管项目,他们应该考虑关闭广告拦截。

我想在我的网站上做到这一点,我正在使用adsense广告,我怎么能做到呢?


当前回答

你不需要一个额外的HTTP请求,你可以简单地计算一个假添加的高度。

顺便说一下,这里有一个完整的列表,与广告拦截器避免渲染的元素相匹配。

窗口。adBlockRunning = function() { return (getComputedStyle(document.getElementById("detect"))["display"] == "none") ?真:假; }() console.log (window.adBlockRunning); #{检测 身高:1 px; 宽度:1 px; 位置:绝对的; 左:-999 em; 上图:-999年新兴市场 } <div id="detect" class="ads AD adsbox doubleclick AD -placement carbon-ads"></div>

其他回答

我理解你的紧张,你可以检查元素是否已由脚本创建或元素被隐藏。如果我们谈论广告拦截,你只能依靠元素可见性,而不是元素存在性。

使用第三方脚本创建的元素永远不会出现,如果脚本目前无法访问(DNS错误,远程web服务器错误,离线web页面预加载等),你总是会得到假阳性。

其他的答案都是正确的,但是记住这个。

async function hasAdBlock() {
  try {
    await fetch("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
      method: "HEAD",
      mode: "no-cors",
    })
    return false;
  } catch(e) {
    return 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

http://thepcspy.com/read/how_to_block_adblock/

jQuery:

function blockAdblockUser() {
    if ($('.myTestAd').height() == 0) {
        window.location = 'http://example.com/AdblockNotice.html';
    }
}

$(document).ready(function(){
    blockAdblockUser();
});

当然,你需要有一个AdblockNotice.html的登陆页,并且. mytestad类需要反映你实际的广告容器。但这应该有用。

EDIT

正如TD_Nijboer所建议的,更好的方法是使用:hidden(或:visible,如下所示)选择器,这样display: none也会被检查:

function blockAdblockUser() {
    if ($('.myTestAd').filter(':visible').length == 0) {
        // All are hidden, or "not visible", so:
        // Redirect, show dialog, do something...
    } else if ($('.myTestAd').filter(':hidden').length > 0) {
        // Maybe a different error if only some are hidden?
        // Redirect, show dialog, do something...
    }
}

当然,如果需要的话,这两个都可以合并成一个if块。

注意可见性:隐藏将不会被捕捉以及(在布局空间保留,但广告不可见)。要检查这一点,可以使用另一个过滤器:

$('.myTestAd').filter(function fi(){
    return $(this).css('visibility') == 'hidden';
})

这将为您提供一个“不可见”的广告元素数组(理论上,任何大于0的都是一个问题)。

不是一个直接的回答,但我会把信息放在广告后面。而不是试图检测它,它会在广告没有显示时显示出来。