Question

我正在尝试使用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在内是没有任何意义的。）

Answer 1

假设<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标签有不同的父母，则会失败。只有作用于您选择的父级的那些将删除。

Answer 2

我弄明白了这个问题。删除元素的工作方式与此处描述的几次相同，就像我一样。

问题在于我更改了父级的内容（在本例中为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;

以下内容可行：

06-17 18:25:42.139: D/SoftKeyboardDetect(1957): Ignore this event
06-17 18:25:54.504: D/CordovaWebViewClient(1957): onPageStarted(file:///android_asset/www/skinLoader.html)
06-17 18:25:54.504: D/CordovaActivity(1957): onMessage(onPageStarted,file:///android_asset/www/skinLoader.html)
06-17 18:25:54.508: E/AndroidProtocolHandler(1957): Unable to open asset URL: file:///android_asset/www/skinLoader.html
06-17 18:25:54.639: D/CordovaWebViewClient(1957): CordovaWebViewClient.onReceivedError: Error code=-1 Description=net::ERR_FILE_NOT_FOUND URL=file:///android_asset/www/skinLoader.html
06-17 18:25:54.639: D/CordovaActivity(1957): onMessage(onReceivedError,{"errorCode":-1,"description":"net::ERR_FILE_NOT_FOUND","url":"file:\/\/\/android_asset\/www\/skinLoader.html"})
06-17 18:25:54.655: D/CordovaWebViewClient(1957): onPageFinished(file:///android_asset/www/skinLoader.html)
06-17 18:25:54.655: D/CordovaActivity(1957): onMessage(onPageFinished,file:///android_asset/www/skinLoader.html)
06-17 18:25:54.661: D/SoftKeyboardDetect(1957): Ignore this event
06-17 18:25:55.043: I/Choreographer(1957): Skipped 36 frames!  The application may be doing too much work on its main thread.
06-17 18:25:56.152: D/CordovaLog(1957): data:text/html,chromewebdata: Line 12 : Not allowed to load local resource: file:///android_asset/webkit/android-weberror.png
06-17 18:25:56.167: I/chromium(1957): [INFO:CONSOLE(12)] "Not allowed to load local resource: file:///android_asset/webkit/android-weberror.png", source: data:text/html,chromewebdata (12)

无论如何，谢谢你的帮助。

Answer 3

首先，您需要确保在调用javascript时标记存在。我这样做是等待所有元素，图像和脚本都加载完毕。

接下来，您不需要使用ID - 您可以使用任意数量的方法获取它。 getElementsByTagName返回的NodeList是 live ，因此，更改大小以反映它所代表的元素集合的操作 - 这就是getElementsByTagName只需要一次调用的原因。

我忘记了具体细节，但是前几天我读到了它。 querySelector / querySelectorAll可能是奇怪的 - 返回一个不会像文档那样改变的数组。 Dunno，无论如何都可能与此无关。

这是一个工作样本：

编辑：代码已更改。（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>

Answer 4

使用JavaScript删除noscript标记

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

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

4 个答案: