使用 JavaScript 删除 head 标签内的 noscript 标签

Remove a noscript tag inside the head tag with JavaScript

本文关键字：标签 noscript head JavaScript 删除 使用      更新时间：2023-09-26

我正在尝试使用 JavaScript 删除<noscript>标签。但到目前为止，每一次尝试都失败了。

我试过这些：

// The noscript tag has a id. I'm accessing it over this id
var noscript = window.document.getElementById("noscript_with_id");
noscript.parentNode.removeChild(noscript); // noscript.parentNode is null
noscript.outerHTML = "";                   // doesn't do anything
noscript.innerHTML = "";                   // doesn't do anything

我不能使用 jQuery。只是普通的JavaScript。

由于我正在通过特定 ID 访问元素并使用它的内容，因此有效的解决方案可能是更改 ID 或清空内容。我需要删除它，因为使用该元素的代码可能会执行多次。

noscript 标签位于<head>标签内。我用它来异步加载一些样式表。

我设置了一个有问题的页面。 https://blitz.icon-craft.net/layout_test/
检查控制台并 https://blitz.icon-craft.net/includes/js/loadCSS.js

（我想指出的是，这个网站实际上使用了jQuery。但我计划在不使用它的网站上使用该脚本。仅仅对于这个小脚本，包括jQuery没有任何意义。

假设<head>标签是父标签。 

var noscript = document.getElementsByTagName('noscript');
var parent = document.getElementsByTagName('head')[0];
for(var i in noscript) {
    parent.removeChild(noscript[i]);
}

我在SO网站上对此进行了测试，它起作用了。noscript 标记位于 body 标记内，因此选择body标记的代码明显不同。

如果noscript标记具有不同的父标记，它将失败。只有范围限定为所选父级的那些才会被删除。

我想出了问题所在。删除元素的工作方式就像这里多次描述的那样，就像我所做的那样。

问题是我更改了父级的内容（在本例中为 <head> 标签），因此我保存在变量中的对象变得无效。

这是不起作用的代码：

var noscript = window.document.getElementById("some_id");
var head = window.document.getElementsByTagName("head")[0];
head.innerHTML += noscript.innerHTML;    // After that noscript is no longer valid
head.removeChild(noscript);              // Won't work

以下方法将起作用：

var noscript = window.document.getElementById("some_id");
var head = window.document.getElementsByTagName("head")[0];
var content = noscript.innerHTML;
head.removeChild(noscript);
head.innerHTML += content;

无论如何，感谢您的帮助。

首先，你需要确保在调用javascript时标签存在。我通过等到所有元素、图像和脚本都加载完毕来做到这一点。

接下来，您不需要使用 id - 您可以使用任意数量的方法获取它。getElementsByTagName 返回的 NodeList 是实时的，因此，更改大小以反映对其所表示的元素集合的操作 - 这就是为什么只需要一次调用即可getElementsByTagName。

我忘记了具体细节，但我前几天读到了它。 querySelector/querySelectorAll可能是奇怪的一个 - 返回一个不会像文档一样更改的数组。邓诺，无论如何，这里可能大部分都无关紧要。

下面是一个工作示例：

编辑：代码已更改。（1） 在按下按钮时触发，这样您就可以在浏览器 JS 工具的 DOM 查看器中看到效果。（2）将noscript标签移到头部

<!doctype html>
<html>
<head>
    <noscript>You appear to have javascript disabled</noscript>
    <script>
    window.addEventListener('load', onDocLoaded, false);
    function onDocLoaded(evt)
    {
    //  nukeNoscripts();
    }
    function nukeNoscripts()
    {
        var tgtTags = document.getElementsByTagName('noscript');
        alert("Num of noscript tags: " + tgtTags.length);
        var tgt = tgtTags[0];
        tgt.parentNode.removeChild(tgt);
        alert("Num of noscript tags: " + tgtTags.length);
    }
    </script>
</head>
<body>
    <button onclick='nukeNoscripts()'>NUKE</button>
</body>
</html>

使用 JavaScript 删除 noscript 标签 

var noscr = document.getElementsByTagName('noscript').length;
    for(var yh = 0;yh<noscr;yh++) {document.getElementsByTagName('noscript')[0].remove();}

没有一个答案对我有用，我的身体里有"noscript"标签。下面的代码最终有效：

var elem = document.querySelector('noscript');
elem.parentNode.removeChild(elem);
相关文章：