Question

我在div中放置了一段广告代码，在页面底部，我有javascript代码，用于检查div的offsetHeight大小。如果返回“0”，我可以放心地假设广告已被广告拦截器咀嚼

我要做的是，我希望在广告被屏蔽时广告应该展示的位置显示图片。

知道怎么做吗？

编辑：忘记显示代码

<div id="div_bleh">
ads goes here
</div>

<script type="text/javascript">
function check_blehsize()
{
    if (document.getElementById("div_bleh").offsetHeight == 0)
        // do stuff
}
window.onload = check_blehsize;
</script>

Answer 1

假设您知道将要显示的广告的大小，通常是您这样做的。

<div class="advert">
    <!-- Adverts go here -->
</div>

.advert {
    background-image: url(blah);
    width: 120px;
    height: 250px;
}

.advert > * {
    background-color: white;
}

当广告被广告拦截器弄乱时，此内容不会显示。只是一个想法，我从未亲自试图绕过广告拦截器。

Answer 2

以下是我针对一个非常常见的广告拦截器测试的示例 - Firefox的Adblock Plus（使用EasyList过滤器）：

Live Demo（edit）

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.innocent-class {
    background: url(http://www.google.com/images/logos/ps_logo2.png);
    width: 240px;
    height: 400px
}


.justForTesting, .advertise_ads {
    width: 240px;
    height: 400px;
    background: #fff
}
</style>
</head>

<body>

<div class="innocent-class"> <!-- just don't call it "advertContainer" :) -->
    <div class="advertise_ads justForTesting">
        advert here!
    </div>
</div>

</body>
</html>

当Adblock Plus找到带有类的元素（例如）.advertise_ads时，它会隐藏该元素。

如果是，请“请勿阻止我的广告！”

，将显示父元素中的background-image（在本例中为Google徽标）。

如果广告未被屏蔽，则广告将覆盖替换图片。

尝试将advertise_ads更改为其他内容，例如sdpfjsdfjp，广告将会显示。

我认为这种技术也适用于大多数其他广告拦截器。

Answer 3

您可以使用javascript（在下面的示例中为jquery）向该div添加一个类，例如，

adContainer = $(".ad-container");
if ( $(".ad-container").height() == 0 ) {
  adContainer.addClass("no-ads");
}

并且css将是

.no-ads {
  background: url(the_picture.jpg) no-repeat 0 0;
  width: ?px;
  height: ?px;
}

删除广告内容时显示图片

3 个答案: