如果僅包含div，則將其隱藏<script> tags

Question

類似於這個已有6年歷史的問題，但是我沒有考慮父元素，並且想知道是否有更好的解決方案？ 隱藏div（僅包含腳本標簽）

問題：我的網站對Google adsense廣告有一些限制。 這些塊只是樣式化的div（背景顏色，填充，邊距，邊界半徑等）。除了adsense腳本標簽（當然還有空白/文本節點等）之外，其中沒有任何內容。 當用戶使用廣告塊擴展程序/插件時，這些div仍會顯示，但它們在屏幕上顯得完全空白，這是不希望的。 因此，如果沒有廣告呈現，我正在尋找一種隱藏這些div的方法。 使用:empty還是不起作用，因為它仍然會拾取<script>標記。

Div元素：

<div class="contentBlock"><script>//adsense code</script></div>

也許有更好的方法來解決或概念化此問題？ 如果是這樣，我願意接受其他解決方案。 謝謝！

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 （或對其進行$.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，為Script或為comment：

 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>