AdBlock 进入 ReactJs答案

【问题标题】：AdBlock into ReactJsAdBlock 进入 ReactJs
【发布时间】：2019-09-02 05:27:57
【问题描述】：

到目前为止，我一直在努力寻找没有任何进展的解决方案。我试图捕捉用户是否有 AdBlocker，如果有，我想显示一条消息，建议他将其关闭。但是，直到现在都没有成功。

我将我的组件导入到我的主容器中，例如：

<DetectAdBlock pathname={window.location.pathname} />

然后这是我的 adblocker.js

import React from 'react';
import PropTypes from 'prop-types'

class DetectAdBlock extends React.Component {

    static propTypes = {
        pathname: PropTypes.string.isRequired
};

    constructor(props) {
        super(props);
        this.state = {
            adBlockDetected: false
        }
        this.detectAdBlocker = this.detectAdBlocker.bind(this);
   }
    componentDidMount() {
        this.detectAdBlocker();
    }
    componentWillUpdate(nextProps, nextState) {
        if (this.props.pathname !== nextProps.pathname) {
            this.detectAdBlocker();
        }
    }
    detectAdBlocker() {
        const head = document.getElementsByTagName('head')[0];

        const noAdBlockDetected = () => {
            this.setState({
                adBlockDetected: false
            });
        }
        const adBlockDetected = () => {
            this.setState({
                adBlockDetected: true
            });
        }
        // clean up stale bait
        const oldScript = 
            document.getElementById('adblock-detection');
        if (oldScript) {
            head.removeChild(oldScript);
        }
        // we will dynamically generate some 'bait'.
        const script = document.createElement('script');
        script.id = 'adblock-detection';
        script.type = 'text/javascript';
        script.src = '/ads.js';
        script.onload = noAdBlockDetected;
        script.onerror = adBlockDetected;
        head.appendChild(script);
    }
    noticeContentJSX() {
        return (
            <div id="adblock-notice">
                <div className="message">
                    <h3>Hey, you!</h3>
                    <p>Your adblocker is on again.</p>
                    <button 
                        onClick={this.detectAdBlocker}
                    >
                        Check for Adblocker again
                    </button>
                </div>
            </div>
        );
    }
    render() {
        return (
            <div id="adblock-wrapper">
                { this.state.adBlockDetected 
                  ? this.noticeContentJSX()
                  : null
                }
            </div>
        )
    }
}
// DetectAdBlock.propTypes = {
//     pathname: PropTypes.string.isRequired
// };

DetectAdBlock.defaultProps = {
    pathname: ''
}
export default DetectAdBlock;

问题是我启用了 AdBlock 也没有什么可显示的。

【问题讨论】：

标签： reactjs adblock

【解决方案1】：

我建议你使用 npm 包react-ad-block-detect:

安装包：

npm i react-ad-block-detect

然后试试这个：

import React, { Component } from 'react';
import AdBlockDetect from 'react-ad-block-detect';

class MyComponent extends Component {
    render() {
        return (
            <AdBlockDetect>
                <p>Show this if an ad blocker has been enabled.</p>
            </AdBlockDetect>
        );
    }
}

【讨论】：

是的。我知道这个包，但我更喜欢在不使用太多库的情况下保持代码干净。但仍然对某人有用。谢谢队友。干杯。
太棒了！没问题

【解决方案2】：

我认为它应该比这更容易。我实际上无法对此进行测试，因为我正在关闭 adblock，但这样的东西应该可以工作：

class AdblockDetect extends Component {
  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>
    );
  }
}

【讨论】：

谢谢伙计。它完美地完成了这项工作。
如何在卸载时“重置” AdblockDetect 组件？还有，“ref={r => (this.fakeAdBanner = r)}”是做什么的？
对于上下文，我正在重定向用户，而不是从上面的代码中返回 this.props.children。然后，我让用户暂停他们的广告拦截器并单击一个执行 history.goBack 的按钮，以将他们带回带有广告（和广告拦截检测器）的页面。然而，即使 adblock 被暂停，adblockdetector 仍然被触发。我认为这是因为高度已经设置为 0。我尝试在 componentWillUnmount 上再次将 this.fakeAdBanner.style.height（和宽度）设置为 1px，但这并没有为我解决。
嗯，如果组件真的被卸载，这听起来很奇怪，你确定它正在被卸载吗？

【解决方案3】：

使用 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

【讨论】：