把<script>标签放在</body>标签之后是错误的吗?

在body的结束标记(</body>)之后放置脚本标记有多错误?

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

当前回答

现代浏览器会像这样在主体中接受脚本标签:

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

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

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

2020-01-02 08:09:10

其他回答

正如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;
    ...

2012-02-15 14:21:45

是的。但是，如果您确实在外部添加了代码，这很可能不会是世界末日，因为大多数浏览器都会修复它，但这仍然是一个不好的做法。

2010-06-14 16:06:58

谷歌实际上在“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>

参见:优化CSS交付

2013-08-22 05:31:55

现代浏览器会像这样在主体中接受脚本标签:

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

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

2020-01-02 08:09:10

你可以像下面这样放置它，也可以放在head标签里面，但通常的做法是在</body>结尾之前命名一个注释以便稍后使用，然后打开一个<script>，将任何JS放在</script></body></html>里面。

    <script>
      window.addEventListener('DOMContentLoaded', event => {

        // Activate Bootstrap scrollspy on the main nav element
        const sideNav = document.body.querySelector('#sideNav');
        if (sideNav) {
          new bootstrap.ScrollSpy(document.body, {
            target: '#sideNav',
            offset: 74,
          });
        };

        // Collapse responsive navbar when toggler is visible
        const navbarToggler = document.body.querySelector('.navbar-toggler');
        const responsiveNavItems = [].slice.call(
          document.querySelectorAll('#navbarResponsive .nav-link')
        );
        responsiveNavItems.map(function (responsiveNavItem) {
          responsiveNavItem.addEventListener('click', () => {
            if (window.getComputedStyle(navbarToggler).display !== 'none') {
              navbarToggler.click();
            }
          });
        });
      });
    </script>

    <!-- Bootstrap core JS-->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

2021-09-11 11:34:46

把<script>标签放在</body>标签之后是错误的吗?

推荐文章

最新文章

标签