Question

类似于这个已有6年历史的问题，但是我没有考虑父元素，并且想知道是否有更好的解决方案？隐藏div（仅包含脚本标签） < / p>

问题：我的网站上有一些Google Adsense广告屏蔽块。这些块只是样式化的div（背景颜色，填充，边距，边界半径等）。除了adsense脚本标签（当然还有空白/文本节点等）之外，其中没有任何内容。当用户使用广告块扩展程序/插件时，这些div仍会显示，但它们在屏幕上显得完全空白，这是不希望的。因此，如果没有广告呈现，我正在寻找一种隐藏这些div的方法。使用：empty 或不起作用，因为它仍然会拾取

Answer 1

您可以删除script标记，然后检查块是否为空。在之后之后运行的代码中，如果允许，则广告代码将运行：

var blocks = $(".contentBlock");
blocks.find("script").remove();
blocks.each(function() {
    var div = $(this);
    if (!div.html().trim()) {
        div.remove();
    }
});

或者，如果您喜欢很多链接：

$(".contentBlock")
    .find("script")
    .remove()
    .end()
    .each(function() {
        var div = $(this);
        if (!div.html().trim()) {
            div.remove();
        }
    });

如果必须支持过时的浏览器，请使用$.trim()而不是本机String.prototype.trim（或将其填充）。

Answer 2

您似乎需要CSS4建议列表中的一项功能：https://www.w3.org/TR/selectors-4/#has-pseudo

关系伪类：has（）是功能性伪类   以相对选择器列表作为参数。它代表一个   元素，如果有任何相对选择器，则绝对时   以元素为：scope元素求值，将与匹配   至少一个元素。   ...

以下选择器匹配不包含任何标题元素的元素：

section：not（：has（h1，h2，h3，h4，h5，h6））

另一个解决方法是使用jquery将div标记为内容，然后删除/隐藏其他内容。参见小提琴：http://jsfiddle.net/mczv6gys/

$('div.contentBlock').has('p, span, img, div').addClass('markerClass'); // P or any other typical tag
$('div.contentBlock').not('.markerClass').addClass('hideClass'); // eg display:none

Answer 3

您可以隐藏div，如果AdSense隐藏了该内容，则可以将其替换为新内容。

如果此示例不起作用，您将要处理从Adsense动态创建的内容。例如检查$("#google_ads_frame1").css('display')=="none")。而不是检查您的容器div。经过验证，哪种方法可行。

您严格将内容包装到容器/ div中广告。然后设置一个超时功能来确定说问题。如果启用了adblock，则显示其他内容，例如视频，海报，iframe等
由于adblock也会用CSS隐藏东西，因此您可以将CSS编辑为如果启用而不是替换，最终将隐藏所有内容。二选项。

将代码段超时更改为您要等待检查的任何时间页面加载后，以处理异步广告。

// Page has loaded
      window.onload = function(){ 
        // Set a timeout function for async google ads
        setTimeout(function() { 
          // We are targeting the first banner ad of AdSense
          var ad = document.querySelector(".ads");
          // If the ad contains no innerHTML, adblock is enabled
          // Or check adsense's generated content 
          // $("#google_ads_frame1").css('display')=="none")
          if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
            // Adblock hides with css also, or just hide everything.
            ad.style.cssText = 'display:block !important; background-color: LightCoral;'; 
            // Replace, if adblock enabled
            ad.innerHTML = 'We detected adblock';
          }
        }, 1); // Change this to 2000 to run after two seconds, to handle async ads
      };

.ads {
  background-color: lightgreen;
}

<p><b>Example 1:</b> Let us simulate an adblock situation, the <code>script</code> tag did not load, hence adblock</p>

<div class="ads"></div>

<p><b>Example 2:</b> Let us simulate no adblock, <code>script</code> tag loaded</p>

<div class="ads"><script></script>Adblock ran</div>

Answer 4

如果支持ES6功能，则可以过滤.contentBlock，每个节点满足条件的是“空” textNode，脚本或注释：

let emptyBlocks = [...document.querySelectorAll('.contentBlock')].filter(block =>
  [...block.childNodes].every(node =>
    (node.nodeName === '#text') ?
       !node.textContent.trim(): 
       ['SCRIPT','#comment'].includes(node.nodeName)
  )
);



emptyBlocks.forEach(function(block){
  block.classList.add('empty');  
});

.contentBlock{
  min-height:50px;
  width:200px;
  outline: solid 2px red;
  margin:2px;
}

.contentBlock.empty{
  display: none;
}

<div class="contentBlock">
  <script>//nothing's happened</script><!--comment-->
</div>

<div class="contentBlock">
  <script>document.write('something\'s happened');</script>
</div>

<div class="contentBlock">
  <!--comment-->
  <script></script>
<!-- empty text nodes with spaces and tabulations -->

          


</div>

<div class="contentBlock">
<!--//-->
text node
</div>

如果仅包含<script>标记，则隐藏div

4 个答案: