Question

我已经在一个简单的网站上工作了一段时间。基本编码和CSS是完整的，所以我现在希望通过向网站添加某些功能来扩展。由于它是一个功能齐全的网站，其主要收入来自Google AdSense。如果检测到Adblock，我正在寻找一种显示图像的方法，如果不是，则寻找另一种方式。

我发现用于检测AdSense是否处于活动状态的方法如下所示：

JS（保存为advertisement.js）

document.write('<div id="TestAdBlock" style="display:none;">an advertisement</div>');

HTML位：

<div id="adblockFrame">
    <script type="text/javascript" src="js/advertisement.js"></script>
    <script type="text/javascript">
        if (document.getElementById("TestAdBlock") != undefined)
        {
            document.write('<strong>ADBlock Plus</strong> NOT detected!');
        }
        else
        {
            document.write('<strong>ADBlock Plus</strong> detected!');
        }
   </script>
</div>

CSS：

#adblockFrame {
    visibility: hidden;
}

我要问的是，如果有人能够向我展示如何，而不是显示文字，JS会在其位置显示图像。我对JS不太好，所以我很感激任何帮助。

Answer 1

我会创建一个空目标div：

<div id="adblockDetector"></div>

  <script type="text/javascript">
        if (document.getElementById("TestAdBlock") != undefined)
        {
            document.getElementById('adblockDetector').innerHTML="<img src='noadblock.jpg' alt='no adblock' />";
        }
        else
        {
            document.getElementById('adblockDetector').innerHTML="<img src='adblock.jpg' alt='Adblock detected!' />";
        }
   </script>

Answer 2

假设您正在使用jquery，只是因为您标记了它：

HTML

<div id="wheretoappend"></div>

JS

var whereToAppend = '#wheretoappend';
 var myDiv = $('<div/>', {id: 'mydiv'});
 ($('#adblockFrame').length)
 ? myDiv.addClass('hasit').appendTo(whereToAppend)
 : myDiv.addClass('doesnt').appendTo(whereToAppend);

CSS

.hasit  {background: url('hasit.png');}
.doesnt {background: url('doesnt.png');}

Answer 3

请don't use the devil document.write!

如果要向页面添加内容，请使用DOM方法或.innerHTML。
如果您想检测AdBlock，只需在advertisement.js

例如：

<强> advertisement.js ：

window.TestAdBlock = true;

您的信息页：

<div id="adblockFrame">
    <img id="TestAdBlock" alt="AdBlock Detected???" />
    <script type="text/javascript" src="js/advertisement.js"></script>
    <script type="text/javascript">
    (function() {
        var AdBlockImg = document.getElementById('TestAdBlock');
        if (window.TestAdBlock)
        {
            AdBlockImg.src = "/images/AdBlockDetected.jpg";
            AdBlockImg.alt = "AdBlock Detected!";
        }
        else
        {
            AdBlockImg.src = "/images/AdBlockNOTDetected.jpg";
            AdBlockImg.alt = "AdBlock NOT Detected!";
        }
        AdBlockImg.title = AdBlockImg.alt;
    });
   </script>
</div>

Answer 4

首先，你不应该使用document.write来做任何事情。这只是不好的做法。但是这里通常是我用jquery做的，因为你标记了它：

<div id="adblockFrame>
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
    var adsAllowed = adsAllowed || false;
    var src = adsAllowed ? '/images/myAd.png' : '/images/noAd.png';

    $('#ad').attr('src',src);
</script>
<img id="ad"/>
</div>

advertisement.js

var adsAllowed = true;

有条件地显示图像

4 个答案: