如何在 IE7 的 Javascript 中获取 <noscript> 的内容？答案

【问题标题】：How to get content of <noscript> in Javascript in IE7?如何在 IE7 的 Javascript 中获取 <noscript> 的内容？
【发布时间】：2010-11-26 01:16:44
【问题描述】：

我正在尝试使用 Javascript 获取 <noscript> 标记的内容。我成功地在 FF、Chrome、Opera 甚至 IE6 中获得了它，但在 IE7 上失败了（还没有尝试过 IE8+）。

基本上，这是简化的代码版本：

<noscript>Lorem ipsum</noscript>
<script>
    var noscript = document.getElementsByTagName('noscript')[0];
    noscript.textContent; // undefined
    noscript.innerHTML; // empty string
    noscript.childNodes.length; // 0
</script>

我尝试在里面添加元素并定位它们，但没有成功。我试图包装一个父元素并获取它的.innerHTML，但<noscript> 标签之间的任何东西都被丢弃了。

注意：我正在构建一个lazyloader 脚本，而<noscript> 元素正是我所需要的（<noscript> 标记内的src 属性不会被浏览器获取。）

【问题讨论】：

您是否尝试过在您的 noscript 中添加一个 id 并使用 getElementById？
是的，问题不在于选择 noscript 元素（它可以与 getElementById 或 getElementsByTagName 一起使用），它确实是在访问内容。
document.getElementsByTagName('script')[0] - 您查询的是 script 元素，而不是 noscript 元素。我错过了什么？
对不起，错字。我真的在查询 noscript 元素。我在最初的帖子中解决了这个问题。
@Pixelastic：noscript 内容是否需要在 DOM 中完全表示为子树？

标签： javascript internet-explorer-7 noscript

【解决方案1】：

在 IE 7 和 8 中，根本不可能检索 <noscript> 元素的内容。 HTML中<noscript>和</noscript>标签之间的任何内容都不会反映在IE中的DOM中，该元素没有子元素并且innerHTML和innerText是空字符串。

在 IE 6 中，情况很奇怪：与 IE 7 一样，<noscript> 元素没有子节点，但其内容反映在 innerHTML 和 outerHTML（但不是 innerText）属性中元素。

在这种情况下，您在 IE 中唯一的选择是将您的 <noscript> 元素中的内容放在其他元素中。要模拟 <noscript> 元素的行为，您可以将内容放在一个立即被 JavaScript 隐藏的元素中（启用脚本时）：

<div id="noscript">Lorem ipsum</div>
<script type="text/javascript">
    document.getElementById("noscript").style.display = "none";
</script>

【讨论】：

^ 这个。这是非常绝对的 - 没有 DOM，没有数据。
其实在IE6中可以用.innerHTML获取noscript的内容，在IE7中不行
@Pixelastic：textContent 在 IE6 中不存在，但您说得对，innerHTML 确实包含内容。我已经修改了答案。
不要使用<div>，而是尝试使用<script type="text/html">。这不会执行（因为text/html 不是已知的“脚本语言”），也不会被构建到 DOM 片段中（因此不会加载图像等），但它将可用作文本节点 (.innerText / .textContent)。
@Ben：你说得对，这就是我在对问题的评论中提出的问题 *“noscript 内容是否需要完全表示为DOM？”但意识到这不能满足要求：必须在禁用 JavaScript 时呈现内容，而这不会出现在您的解决方案中。只有在启用 JavaScript 的情况下才能将其转换为 DOM 节点，这恰恰是错误的方法。

【解决方案2】：

不是最优雅的解决方案 - IE7 和 IE8 可以正常加载图像，而所有其他浏览器都可以获得延迟加载的额外好处。你最终会在最终输出中得到一些空的注释块......但谁在乎呢，对吧？

<!--[if (gt IE 8)|!(IE)]><!--><noscript><!--<![endif]-->
  <img src="/path/to/img.jpg" alt="photo" />
<!--[if (gt IE 8)|!(IE)]><!--></noscript><!--<![endif]-->

JavaScript（jQuery - 如果您需要真正的 JS，请告诉我）：

jQuery(function($) {
  $('noscript').each(function() {
    var $this = $(this);
    $this.replaceWith($this.text());
  });
});

通过 IE7+、Chrome、FF3.6+、Opera11 测试

【讨论】：

【解决方案3】：

解决此问题的一种方法是复制 noscript 的内容作为其属性。

例如：

<noscript id="ns" alt="Lorem ipsulum">Lurem ipsulum</noscript>

在脚本上获取 alt 属性的值而不是其 innerHTML

<script>
   var ns = document.getElementByid('ns');
   var htm = ns.innerHTML || ns.getAttribute('alt');

   alert(htm);

</script>

【讨论】：

这是一种丑陋的解决方法！为什么 IE 这样做是为了使用... :(
这可能是一个有用的解决方法，但不幸的是，我的情况并非如此。我过分简化了我的示例，但我的真实代码在 <noscript> 中包含数百行 HTML

【解决方案4】：

您可以在大多数现代浏览器中访问 noscript 标签textContent 属性。对于较旧的浏览器，我编写了一个 polyfill，它运行得非常快，并且可以在我可以测试的所有桌面和移动浏览器中运行。

查看博文： http://queryj.wordpress.com/2012/07/06/read-noscript-tag-content-reliably-in-all-browsers/

查看代码（根据 MIT 和 GPL 许可双重许可）： https://github.com/jameswestgate/noscript-textcontent/

编辑：

脚本通过 ajax 请求重新加载页面（应该缓存在浏览器中）并为不支持 textContent 属性的浏览器手动解析内容

【讨论】：

【解决方案5】：

你可以

<script>document.write('<script id="images" type="text/html">')</script>

就在图片之前，然后

<script>document.write('</scr'+'ipt>')</script>

在它之后。您可以在没有 javascript 的情况下使用图像，并且使用 JavaScript，您可以在 $('images').innerHTML

中使用它们的源代码

【讨论】：

【解决方案6】：

我有一个不同的方法，这里有一个工作示例： https://github.com/jokeyrhyme/noscript.js/blob/c104c480b595278e9d559aaf8a26668b7c852f72/noscript.js#L25

我的方法很简单：

执行 XHR 以下载原始 HTML 的原始副本
在 DOM 中查找所有 noscript 元素
在原始 HTML 中查找所有 noscript 元素
将 DOM noscripts 替换为原始 noscripts 的内容

我的noscript.show() 方法首先测试这是否有必要。对于大多数浏览器，它只是将 noscript 元素的内容移出以便它们可见。

被这些糟糕的浏览器困住的用户可能别无选择，并且可能已经习惯了缓慢的体验，因此额外的网络请求和一些正则表达式不会太糟糕。

注意：由于同源规则，您在通过file:///...浏览本地磁盘上的文件时可能无法使用此技术，因此它可能仅在通过http://...或https://...浏览时有效。

【讨论】：

这比这里的许多建议要好，因为您可以像往常一样使用 noscript 元素，而无需任何 JavaScript 类操作或属性中的内容复制。
我刚刚意识到我的方法与@james-westgate 的解决方案几乎一模一样。糟糕！

【解决方案7】：

我目前没有 ie 浏览器 ;) 但据我所知，当您获得其父标签的 .innerHTML() 时，<noscript> 标签的内容是可用的。然后由你来解决（例如使用讨厌的正则表达式）

从现在起至少 7 小时内我无法对其进行测试，因此我按原样发布此信息。

PS。我的建议是重新设计。 Noscript 标签用于包含脚本打开时不使用的内容。

【讨论】：

我将测试您的解决方案，这可能会奏效。而且我理解 noscript 标签有一个细微的差别：我认为它用于在脚本关闭时显示内容。但我同意这个话题可以讨论。
我刚试过，你的解决方案也不起作用。我有一个<NOSCRIPT></NOSCRIPT> 用于.innerHTML 和一个<DIV id=test><NOSCRIPT></NOSCRIPT></DIV> 用于.outerHTML。 <noscript> 标记内的任何内容似乎都会提前从 DOM 中丢弃

【解决方案8】：

您查询的是 script 元素而不是 noscript 元素，这适用于所有浏览器：

<noscript>Lorem ipsum</noscript>
<script>
    var noscript = document.getElementsByTagName('noscript')[0];
    alert(noscript.innerHTML); // Lorem ipsum
</script>

【讨论】：

不，它不会：例如在 IE7 中尝试。
哦。那是一个错字，我真的是在查询 noscript 元素。我更新了我的初始帖子。顺便说一句，innerHTML 仍然是空的。（我想提高你的回应，但我在赏金中投入了太多积分，甚至无法再提高回应-_-）
我的错，我在 IE6、firefox 和 chrome 中测试过。

【解决方案9】：

这是一个非常肮脏的黑客，完全未经测试，但我只是有这个想法：D

您可以按照其他人的建议进行操作，将内容放在 div 而不是 noscript 中，除了隐藏它之外，立即删除所有 img 标记的 src 属性，使用以下效果：

jQuery(function () { 
    jQuery('div#noscript img').attr('src', '');
  });

这应该限制（但不是消除）图像的获取。

这只是基于cmets和其他人的建议的想法，希望对您有所帮助。

编辑 - 我刚刚想到的另一个肮脏的技巧，它假设您可以更改 html 的位置，因此可能相关也可能不相关：

在noscript里面有一个

<iframe width="100%" height="100%" src="?noscript=true" />

那么你可以XMLHttpRequest获取noscript内容...

【讨论】：

实际上，这就是当今大多数lazyloader 脚本的工作方式。这绝对不是跨浏览器（删除 src 元素只会在某些浏览器上停止请求）并且只会减轻图像重页面上的图像加载。