logo标签列表

<script>标签不放在<head>标签内可以吗？

javascripthtml
35

我一直在好奇一个问题，想请教你们的专业知识，问题如下:

假设我有以下JS代码：

alert("Some JS outside ");

代码放在HTML文件的标签之外。我的问题是这样使用是否可以，以及它被广泛用于多大程度。

我的直觉告诉我这个方法应该是可行的 - 浏览器会查找所有HTML中的

4个回答
24

最好将脚本标签放在HTML文件的结束 body 标签之前。

<html>
      <head>
      <title>Example</title>
      </head>
      <body>
            Your Content
      <script type="text/javascript" src="yourScriptHere.js"></script>
      <script type="text/javascript">//Inline scripts etc.</script>
      </body>
</html>

尽管它们可以放在其他位置，但你希望将它们放在最后的原因是确保页面在执行之前已经加载，并且不想在客户下载大型脚本时阻塞他们并使其等待。

7
我必须表示不同意。将脚本放在末尾，它们只会在页面加载后运行。如果这些脚本负责在表单元素上设置焦点，那就很糟糕了，因为当人们在之前开始在表单中输入时，脚本会重置焦点，这很令人恼火。 - user562374
1
放置脚本的位置有很多不同的原因。我更喜欢将它们放在最后，因为我希望整个页面都可用于执行我的脚本。如果脚本位于顶部，则完全可以加载和执行（如果输入字段尚不可聚焦）。但是，我非常同意您对延迟的烦恼，并因此给予+1:D - Jason Benson
3
这不是"on-load body property"的作用吗？ - Ponkadoodle
1
@Wallacoloo 当然可以。但是，如果您有一个内联脚本，它完全有可能在浏览器触发加载事件之前执行，并且在所有资源实际加载之前执行。个人偏好避免使用像 onload、onclick 等 HTML 属性，而是使用 JavaScript 事件绑定来分离表示和行为，但坦白地说，这只是为了保持我的代码模块化和易于维护的努力。 - Jason Benson
@user562374：在DOM加载之前，你根本不应该试图聚焦于一个领域，所以你的观点是无关紧要的。 - Doug S
13

是的，<head>之外的<script>块没有问题。

事实上，许多人鼓励将它们放在<body>的末尾。将它们放在</body>之前，延迟获取/加载直到页面内容之后...以加快呈现速度。

根据W3C HTML4规范：

SCRIPT元素将脚本置于文档中。此元素可以出现任意次数在HTML文档的HEAD或BODY中。

12

可以。实际上，这很常见，而且在很多情况下是必须的。 在许多情况下，您可能会有一些长时间加载（即：大型下载）的JavaScript，但它对页面并不重要，所以您希望页面的其余内容先加载，因此将那个JavaScript的 <script> 放在 <body> 部分的底部。

3
当文档中遇到脚本时，它将被执行。如果它是一个函数，那么“执行它”只意味着定义该函数，即将其添加到已知函数列表中。但如果它不是函数，而是一组独立的语句块，它们将在遇到它们的位置执行。
例如，如果您编写了：
<html><head>... whatever ...</head>
<p>Foo
<script>
document.write("bar")
</script>
<p>Plugh
</html>

浏览器将显示：
Foobar
Plugh

这可能是你想要的，也可能不是。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接