How to implement JavaScript to check whether the ads on the page are blocked by AdBlock_javascript skills

Everyone hates ads. When watching TV, watching movies, watching Youku, or browsing the web, I also hate the ads flying all over the place. Advertising is an unpleasant thing. However, for a small and medium-sized webmaster/blogger, advertising is almost the only source of funds that can support the normal operation of the website/blog. If a blogger just publishes articles selflessly, very few can last for several years. Most slowly lose their enthusiasm.

Both Firefox and Google Chrome have plug-ins that can block ads on pages, the most famous ones are AdBlock and AdBlock Plus. A few days ago, I made a statistics to see how many users who browsed the website used the AdBlock plug-in, and found that this number actually accounted for 1/5 of the total number of visitors.

1/5 is a big number. How can we replace the ad space with other images on the pages of the 1/5 users who use the AdBlock plug-in? To do this, you first need to have a way to know that the AdBlock plug-in is currently used in the browser. After some tests, I found that AdBlock is very sensitive to words like "Ad" or "Google AD". As long as there is the word "Ad" in the ID or css class name of a certain page element, this element will basically be AdBlocked. The plug-in is blocked, that is, display:none:

Copy code The code is as follows:

This div will be blocked

With this rule, I can use JavaScript to find out whether the current browser has the AdBlock plug-in enabled. First, we put the Google ad code into a div, and put a class name that clearly represents Google AD into the css class name of the div:

Copy code The code is as follows:

Place Google ad code here

Then use Js to detect at the bottom of the page:

Copy code The code is as follows:

if ($('.google-ad').height() == 0) showOtherImage();

There is another problem here. Google ads are usually displayed after the Dom is loaded. In order to ensure detection after the Google ads are loaded, a delayed execution feature must be added to the js code to avoid false detection:

Copy code The code is as follows:

$(function(){
setTimeout(function(){
if ($('.google-ad').height() == 0)
showOtherImage();
},3000);
});

What can we do in the showOtherImage(); method here? We can put some promotional pictures and links from JD.com, Dangdang, Amazon and other websites, and get commissions, which can be regarded as a little compensation for the losses.