如何在不同的浏览器中处理noscript标记

时间:2016-08-29 06:29:43

标签: javascript html5 css3 cross-browser noscript

我无法在任何地方看到任何解释。

我只是想知道浏览器使用noscript标记内的数据生成的内容,如果启用了JS。

例如:

根据HTML5规范,允许在noscript标记内使用head标记。

<head>
<noscript>
<link rel="stylesheet" href="basic.css" type="text/css" media="all" />
</noscript>
</head>

我提出这个问题的原因是,我担心某些浏览器可能会将noscript标记视为文本(如果启用了JS),因此会加载/添加不必要的数据。

那么,浏览器如何实际处理noscript代码?

感谢。

2 个答案:

答案 0 :(得分:0)

  

HTML元素定义了要插入的html部分   如果页面上的脚本类型不受支持或脚本是   目前在浏览器中关闭。 Source

另外

  

如果启用了脚本,则noscript元素不表示任何内容   如果禁用脚本,则表示其子项。它习惯了   向支持脚本编写的用户代理提供不同的标记   那些不支持脚本的,通过影响文档的方式   解析。 Source

浏览器支持

noscript标记,据我所知,标准规范没有偏差。

顺便说一下,如果您真的需要确保其在不同浏览器中的行为,您可以使用基于Web的浏览器测试工具https://www.browserstack.com,这将加快您的测试过程。

答案 1 :(得分:0)

要理解这一点,请记住HTML5规范描述了两种语法,当页面作为text/html提供时,(常规)HTML格式,以及页面作为application/xhtml+xml提供时的XHTML格式。浏览器根据使用的语法执行不同的操作。

我希望你感兴趣的是text/html语法,所以为此,规范描述了section 8 - The HTML syntax中发生的事情。

然后我们需要遵循解析器算法的树构造阶段,对于您的示例,<noscript>元素在head部分中,请查看The "in head" insertion mode下的内容。从那里向下搜索,您会发现A start tag whose tag name is "noscript, if the scripting flag is enabled链接到generic raw text element parsing algorithm.

这会将标记化器放在RAWTEXT state中,这意味着所有字符都会被传递,直到找到</noscript>标记(即实体引用未解析)并且切换插入模式为{{ 3}}。

这只是将每个字符添加到文本节点,直到在插入模式切换回先前模式时找到</noscript>标记,例如然后,“in head”插入模式和<noscript>元素的解析已经完成。

您的示例的结果是<link rel="stylesheet" href="basic.css" type="text/css" media="all" />将是文本节点的未解释内容,作为<noscript>元素的唯一子项。