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

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

当前回答

Internet Explorer不再允许这样做了(我相信从版本10开始),并将忽略这类脚本。

Firefox和Chrome仍然容忍它们,但有可能有一天它们会将其作为非标准丢弃。

其他回答

Internet Explorer不再允许这样做了(我相信从版本10开始),并将忽略这类脚本。

Firefox和Chrome仍然容忍它们,但有可能有一天它们会将其作为非标准丢弃。

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

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

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

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

它不会在<body>或<head>标记之外进行验证。把它放在</body>结束之前也不会有太大区别——除非你在做DOM操作,可能会在body元素完全加载之前破坏IE。

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

你可以像下面这样放置它,也可以放在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>

只有html元素的注释和结束标记被允许放在主体的结束标记之后。

您可以通过规范或验证器确认这一点。

浏览器可以执行错误恢复,HTML规范甚至描述了在这种情况下如何恢复,但您永远不应该依赖于此。


还值得注意的是,将脚本元素放在末尾的通常原因是确保脚本在运行之前可能试图通过DOM访问的元素已经存在。

随着defer属性的到来,我们可以将脚本放在头部,同时还可以让浏览器在下载HTML的同时下载JS,以获得更好的性能。