有條件地顯示圖像

我一直在一個簡單的網站上工作了一段時間。基本的編碼和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不太好，所以我很感激任何幫助。

來源

2014-01-14 AlexCatch

題外話：不要使用'document.write'！ ]（http://www.w3.org/TR/html5/dom.html#document。寫％28％29）。使用'.innerHTML'或DOM方法代替 – Oriol

1.添加jQuery。 2.在javascript文件中寫入$（'＃TestAdBlock'）。html（'） – SoluableNonagon

我將創建一個空的目標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>

來源

2014-01-14 22:38:07 Zac

假設你正在使用jQuery，只是因爲你標記它：

HTML

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

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');}

來源

2014-01-14 22:37:45

請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>

來源

2014-01-14 22:41:28 Oriol

首先，你不應該使用任何東西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;

來源

2014-01-14 22:46:19 bearfriend

有條件地顯示圖像

回答

相關問題