Search code examples
javascriptadblock

Display images in javascript condition


What I want is to replace the area where an ad is supposed to be with a picture of my own if the user has adblock enabled.

I have the code to detect weather the user has adblock enabled or not:

<script type="text/javascript">
function _enabled() {
    alert('detected');
}
function _disabled() {
    alert('not detected');
}
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = '_disabled';
</script>

<script type="text/javascript" src="http://adblockdetector.com/script.php"></script>

Solution

  • I would recommend looking into querySelector and innerHTML, or look at a tutorial on jQuery

    https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelector https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML

    You would do something like this:

    function _enabled() {
        var adSpace = document.body.querySelector("css selector for target ad space");
        var htmlContent = getAddBlockedContent();
        adSpace.innerHTML = htmlContent;
    }
    
    function getAddBlockedContent() {
        return "<img ..../>";
    }