将<script>标记放在</ body>标记之后是否错误？

218

将script标签放在正文（</body>）的结束标签之后有多大错。？

<html>
  ....
  <body>
     ....
  </body>
  <script type="text/javascript" src="theJs.js"></script>
</html>

javascript html

— 丹
source

1

在现代浏览器中是否有对此的支持。

— Xdrone

我应该在HTML标记中将<script>标记放在哪里的

— mapto

190

它不会在或标签之外进行验证。除非您正在执行可能会在body元素完全加载之前中断IE的 DOM操作，否则将它放置在close之前也不会有太大区别。<body><head></body>

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="theJs.js"></script>
  </body>
</html>

— 安迪
source

13

@epalla：如果将脚本放在body标签的末尾，那么到到达该位置时，就没有其他内容要加载了，因此将其放置在外部还是仅放置在内部应该没有什么区别。然后，您仍可以验证页面的附加好处，这就是我试图在答案中提出的要点。

— Andy E 2010年

1

是的，我同意你的看法，因为你的回答很好。我只是想补充一下，有很长一段时间以来，有理由将JS放在页面底部而不是头部。

— 马特·布伦迈尔

3

@PHPst：好的，无效的代码在某些浏览器中可能会受到副作用的影响。无论哪种方式，我都看不出它的缩进比其上面的代码小一个制表符宽度，使它看起来更整洁。

— 安迪E

1

@PHPst：如果您真的想以这种方式编写代码，我希望浏览器能够应对。不过，我仍然建议您编写代码进行验证。

— Andy E

1

@technosaurus：总是存在<script src="..." defer>，它可以在所有主要的浏览器中使用（尽管IE9及更低版本中可能存在潜在的漏洞）。

— Andy E

88

是。正文的结束标记后仅允许注释和html元素的结束标记。

浏览器可能会执行错误恢复，但您绝对不要依赖它。

— 昆汀
source

12

这是一个更好的答案。在移动所有新浏览器的过程中，当您只需要剪切并粘贴单个结束标记时，就有冒险做错它的风险。

— 埃里克·雷彭

33

正如Andy所说，该文档将无效，但脚本仍将被解释。例如，请参阅WebKit中的代码片段：

void HTMLParser::processCloseTag(Token* t)
{
    // Support for really broken html.
    // we never close the body tag, since some stupid web pages close it before 
    // the actual end of the doc.
    // let's rely on the end() call to close things.
    if (t->tagName == htmlTag || t->tagName == bodyTag 
                              || t->tagName == commentAtom)
        return;
    ...

— 维塔利（Vitalii Fedorenko）
source

11

“支持真正损坏的html。” -我认为这说明了一切。

— Diogo Kollross '16

8

IE不允许这样做了（我相信自版本10起），并且将忽略此类脚本。FF和Chrome仍然可以容忍它们，但是有一天他们有可能会将其取消为非标准。

— 布朗克斯
source

1

但是Google在其“如何进行G +登录”示例中进行了此操作，“最后更新时间为2014年4月10日”。我是从服务器上的Java版本（developers.google.com/+/quickstart/java）中获得的，但是对于所有人来说，它都是相同的HTML + js。

— 汤姆（Tom）

2

通过W3C的推荐过程，在“元素主体”为“解析错误”之后，以程序方式插入“元素脚本” 。在“树结构”中创建错误，然后运行“再次令牌化”以处理该内容。因此，这就像其他步骤。只有这样才能运行“脚本执行”-请参阅方案过程。

还有其他“解析错误”。将“插入模式”切换为“体内”并重新处理令牌。

从技术上讲，它是浏览器的内部过程，它们是如何标记和优化它的。

我希望我能帮助别人。

— BG布鲁诺
source

0

是。但是，如果您确实将代码添加到外部，则由于大多数浏览器都会对其进行修复，因此它很可能并不是世界末日，但是进入仍然是一个不好的做法。

— 泰勒·萨图拉
source

0

Google实际上在“ CSS优化”方面建议这样做。他们建议插入关键的折叠样式，并推迟其余样式（css文件）。

例：

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

请参阅：https : //developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— 唐纳德·波特
source

8

您不应该将body元素放在元素之外。该Google文章不建议任何人做任何这样的事情。

— ChaseMoskal 2014年

2

恐怕Google页面说的确实准确。

— 2015年

6

好像一次，该页面确实推荐了这样的东西，但现在不再了。（现在使用javascript进行了一些动态加载。）德语版本不是最新的，仍然包含旧的代码示例。

— bodo '16

1

“ element noscript”也必须通过RFC包含在“ element html”和“ element body”中

— BG Bruno

0

现代的浏览器将脚本标记放在主体中，如下所示：

<body>
    <script src="scripts/main.js"></script>
</body>

基本上，这意味着脚本将在页面完成后加载，这在某些情况下（即DOM操作）可能有用。但是，我强烈建议您使用相同的脚本，并使用“ defer”将其放在head标记中，因为它会产生相同的效果。

<head>
    <script src="scripts/main.js" defer></script>
</head>

— 广告慈善
source

有用的是，如果script标签具有event可以定义以确定何时解析脚本的属性。因此，您必须event="load" event="DOMContentLoaded"在创建DOM之后或event="beforeunload"在window beforeunload事件上运行脚本。例如<script src="scripts/main.js" event="DOMContentLoaded"></script>。

— 1.21吉瓦