脚本标签

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

我从读者 Josh Kreis 那里得到了一个很好的问题

我注意到,在 <script> 标签上,有各种各样的变体,它们似乎都可以在跨浏览器中工作。 哪些是必需的,哪些不是必需的?

<script>
  //some javascript here
</script>

<script type="text/javascript">
  //some javascript here
</script>

<script type="text/javascript" language="javascript">
  //some javascript here
</script>

<script language="javascript">
  //some javascript here
</script>

<script type="text/javascript">
  //<![CDATA[
    // some javascript here
  //]]>
</script>

据我所知,这是情况。 如果有人愿意详细说明或纠正我的错误,请在评论中进行。

/* WAY OLD - DO NOT USE */

<script language="javascript">
  //some javascript here
</script>

从未真正存在过 language 属性(或者如果有,它已经过时很久了)。 存在 lang 属性,但它用于完全不同的目的:识别人类语言而不是计算机语言。 使用 language 属性的这种语法用于告诉(旧的)浏览器识别并运行该脚本作为 JavaScript。 它曾经有效,但它从未成为标准。

我们现在有一个标准的方法来做到这一点

<script type="text/javascript">
  //some javascript here
</script>

type 属性是标准且正确的方法来识别并告诉浏览器该标签包含哪种类型的脚本。 有时你会看到使用 language 和 type 属性的代码。 据我所知,这从不必要。

来自 规范 的非常具体的解释,language 是一个“过时但符合标准”的特性

作者不应在 script 元素上指定 language 属性。 如果存在该属性,其值必须与字符串“JavaScript”进行 ASCII 不区分大小写的匹配,并且 type 属性必须被省略或其值必须与字符串“text/javascript”进行 ASCII 不区分大小写的匹配。 该属性应该完全省略(带有值“JavaScript”,它没有效果),或者用 type 属性的使用来替换。

最近,你可能已经看到了很多这样的情况

<script>
  //some javascript here
</script>

根本没有属性。 这是 HTML5 处理包含 JavaScript 的脚本标签的方式。 它只是假设类型是 text/javascript。 如果不是(我从未见过其他类型的脚本),你将需要使用 type 属性更改它。 我建议你在使用 HTML5 时这样做。

还有一个奇怪的情况

<script type="text/javascript">
  //<![CDATA[
    $("<div />").appendTo("body"); // Some JS with HTML in it.
  //]]>
</script>

如果你仍然使用 XHTML,并且你的 JavaScript 包含 HTML(或者甚至是 < 字符,这可能需要在大于逻辑中),你将需要在脚本周围使用这些 CDATA 注释,如果你关心脚本是否通过验证(你会收到类似于:文档类型在此不允许元素“div” 的错误)。 并且如果,你将脚本直接放在开始和结束脚本标签之间,而不是链接到脚本 src

有太多 IF 了。

要点

  • 如果你使用的是 HTML5,只需使用 <script>
  • 如果你使用的是更旧的版本,请使用 <script type="text/javascript">
  • 如果你正在编写供其他人在其网站上使用的脚本(例如,可复制粘贴的代码、WordPress 插件等),请使用 <script type="text/javascript"> 和 CDATA。