How do hide div if ad does not appear

问题

I just implemented AdSense in my website. I've added a box-shadow to the div that contains my ad to add a level of depth. When there's no ad, or the ad is blocked using adblock or something, that div is empty and the box-shadow is just there and it looks stupid. How do I hide that div if no ad is shown or blocked? here's my code thus far:

<div id="footer">
<script type="text/javascript"><!--
    ad stuff
    //-->
</script>
<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

#footer { 
position: relative;
bottom:0;
width:728px;
height: 90px;
text-align: center;
box-shadow: 0px 0px 10px black;
margin-left: auto;
margin-right: auto;
}

回答1:

You can probably check the contents of that div (id: 'footer') after those scripts run with your own script in a third tag. In the script you can check to see if the div has more content added to if, and if not you can remove the shadow. You'll probably want to load the page with the ad and with it blocked and compare what shows up in the div to get an idea of what it looks like empty and what it looks like when shown.

回答2:

By default you can have it hidden, and load the ad using the jquery getScript method. Upon success you can make it visible.

$.getScript("http://pagead2.googlesyndication.com/pagead/show_ads.js", function(data, textStatus, jqxhr) {
    // make the ad visible
    $('#ad').show();
});

This will attempt to load the show_ad.js script, and upon success will invoke the callback function which would make the ad visible.

It all depends on how ad blockers work. If they simply prevent loading scripts at googlesyndication then this should work.

回答3:

This javascript removes the div:

var el = document.getElementById("footer");
if (el.innerHTML == "") {el.parentNode.removeChild(el)};

But if it messes your layout you can just set styles for CSS that are "bothering you" and/or don't look good empty.
To hide it if empty:

addEvent(window, 'load', function(){
var el = document.getElementById("footer");
if (el.innerHTML == "") {el.style.display="none";}
});

来源：https://stackoverflow.com/questions/17222363/how-do-hide-div-if-ad-does-not-appear

标签

html

adsense