直到现在,我都在努力寻找没有任何进展的解决方案。我试图了解用户是否有 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 。