移除广告内容时显示图片答案

【问题标题】：Display image when ads content is removed移除广告内容时显示图片
【发布时间】：2011-06-21 12:35:58
【问题描述】：

我在 div 中放置了一段广告代码，在页面底部，我有用于检查 div 的 offsetHeight 大小的 javascript 代码。如果返回“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>

【问题讨论】：

问题出在哪里？你问如何在这个字段中插入图像？为什么要删除广告？你给的可能性？为什么你不将你的添加覆盖在另一个 div 上，图像或文本已经是整个时间，我在一些大页面上看到了这个方法
刚刚编辑了我的问题以使其更清晰
如果用户想屏蔽你的广告，而你还想展示广告，他们会不会更生气？
Kasturi，我想你误解了我的意图。图片实际上不是广告，而只是带有一点承诺信息的图片。
要记住的一点是，一些广告拦截器也可以将自定义 url 添加到黑名单中，因此他们仍然可以最终阻止广告下的图像。

标签： javascript css image ads

【解决方案1】：

这是我针对一个非常常见的广告拦截器 - 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 等其他名称，广告就会可见。

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

【讨论】：

此示例运行良好，但在您将 Advertisement_ads 类更改为其他名称后，adblock 只会咀嚼广告脚本，而不是包含广告的整个部分，因此您不会看到白色下方的图像背景。
@Flint：白色背景仅用于测试，因为没有实际的广告。如果这是在一个真实的网站上，那里会有一个广告。
我不确定我是否理解你所说的，但我在上面的评论中的意思是：“尝试将 Advertisement_ads 更改为其他内容，例如 sdpfjsdfjp，广告就会可见。”没有。广告仍被 adblock 屏蔽，但背景图片未显示。
@Flint：我们之间有很多困惑，因为我没有在我的测试页面上使用实际的广告。更改类名只会对我的示例有所帮助。 Adblock 仍会在您的实际页面上阻止广告，因为它不会阻止类名 - 它会根据它来自 http://LOAD-AN-ADVERT.com 的事实来阻止它。将您问题中的 HTML 与我的回答背后的想法结合起来：<div id="parent" style="background: url(http://www.google.com/images/logos/ps_logo2.png)"><div id="div_bleh">ads goes here</div></div> 可能会起作用。

【解决方案2】：

您可以使用 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;
}

【讨论】：

嗯注入一个类，有趣:) 你能展示如何在没有 jquery 的情况下做到这一点吗？

【解决方案3】：

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

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

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

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

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

【讨论】：

如果 div 包含文字广告，这部分工作。无论广告是否被屏蔽，广告背后的背景图片都将始终可见，除非广告是可以很好地填满 div 空间的图片。
关闭，但当广告加载时，您可能会看到背景图片在您的页面上飞溅一小会。