So implementieren Sie JavaScript, um zu überprüfen, ob die Anzeigen auf der Seite durch AdBlock_javascript-Fähigkeiten blockiert werden-js-Tutorial-php.cn

So implementieren Sie JavaScript, um zu überprüfen, ob die Anzeigen auf der Seite durch AdBlock_javascript-Fähigkeiten blockiert werden

WBOY

Freigeben： 2016-05-16 16:32:08

Original

2200 Leute haben es durchsucht

Jeder hasst Werbung. Wenn ich fernsehe, Filme schaue, Youku anschaue oder im Internet surfe, hasse ich auch die Werbung, die überall herumfliegt. Werbung ist eine unangenehme Sache. Für einen kleinen und mittelgroßen Webmaster/Blogger ist Werbung jedoch fast die einzige Einnahmequelle, die den normalen Betrieb der Website/des Blogs unterstützen kann. Wenn ein Blogger einfach selbstlos Artikel veröffentlicht, können die wenigsten mehrere Jahre halten. Die meisten verlieren langsam ihre Begeisterung.

Sowohl Firefox als auch Google Chrome verfügen über Plug-ins, die Werbung auf Seiten blockieren können. Die bekanntesten sind AdBlock und AdBlock Plus. Vor ein paar Tagen habe ich eine Statistik erstellt, um zu sehen, wie viele Benutzer, die die Website durchsucht haben, das AdBlock-Plug-in verwendet haben, und festgestellt, dass diese Zahl tatsächlich 1/5 der Gesamtzahl der Besucher ausmacht.

1/5 ist eine große Zahl. Wie können wir die Werbefläche durch andere Bilder auf den Seiten von 1/5 Benutzern ersetzen, die das AdBlock-Plug-in verwenden? Dazu müssen Sie zunächst wissen, ob das AdBlock-Plugin derzeit im Browser verwendet wird. Nach einigen Tests habe ich festgestellt, dass AdBlock sehr empfindlich auf Wörter wie „Ad“ oder „Google AD“ reagiert. Solange die ID oder der CSS-Klassenname eines bestimmten Seitenelements das Wort „Ad“ enthält, wird dieses Element grundsätzlich reagieren be AdBlocked. Das Plug-in ist blockiert, d. h. display:none:

Code kopieren Der Code lautet wie folgt:

Dieses Div wird blockiert

Mit dieser Regel kann ich mithilfe von JavaScript herausfinden, ob das AdBlock-Plugin im aktuellen Browser aktiviert ist. Zuerst fügen wir den Google-Anzeigencode in ein Div ein und fügen einen Klassennamen, der Google AD eindeutig darstellt, in den CSS-Klassennamen des Div ein:

Code kopieren Der Code lautet wie folgt:

Platzieren Sie hier den Google-Anzeigencode

Dann verwenden Sie Js, um unten auf der Seite Folgendes zu erkennen:

Code kopieren Der Code lautet wie folgt:

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

Hier gibt es ein weiteres Problem, das normalerweise nach dem Laden der Google-Anzeigen angezeigt wird. Um die Erkennung nach dem Laden der Google-Anzeigen sicherzustellen, muss dem js-Code eine Funktion zur verzögerten Ausführung hinzugefügt werden, um eine falsche Erkennung zu vermeiden:

Code kopieren Der Code lautet wie folgt:

$(function(){

setTimeout(function(){

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

showOtherImage();

},3000);

});

Was können wir hier in der showOtherImage();-Methode tun? Wir können einige Werbebilder und Links von JD.com, Dangdang, Amazon und anderen Websites einstellen und dafür Provisionen erhalten, die als kleine Entschädigung für die Verluste angesehen werden können.