Question

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
</head>
<body>

  <script>
    console.log('test')
  </script>

  <p>
    Foo
  </p>

</body>
</html>

我想将这段代码中的JavaScript从<body>移到<head>。这是我不正确的尝试：

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <script>
  window.onload = function () {
    console.log('test')
  }
  </script>
</head>
<body>

  <p>
    Foo
  </p>

</body>
</html>

这当然不能满足我的要求。仅在整个页面加载后才运行JavaScript。但是我希望JavaScript在定义<body>后立即运行。可以用JavaScript完成吗？

Answer 1

将您的log命令插入到HTML的 QXcbConnection: XCB error: 148 (Unknown), sequence: 169, resource id: 0, major code: 140 (Unknown), minor code: 20 部分中定义的Javascript函数中，并在打开 <head> 之后立即调用此函数>。

您的最终代码将如下所示：

<body>

值得一提的是， onload 事件属性也确实存在于另一个html标签中，并且仅在这种情况下，它在定义后立即执行，这意味着：立即执行。

使用 <!DOCTYPE html> <html> <head> <script> function myFunction(){ console.log('test'); } </script> <title>Foo</title> </head> <body> <script> myFunction(); </script> <p> Foo </p> </body> </html> 标签会发生一些奇怪的事情： onload 仅在以下两种情况下运行：

1） <body> 的明确定义；

2）完成所有附件以及外部例程和资源的加载，这意味着：所有html，css，jpg，gif，svg等的加载。

因此，加载会执行其承诺的操作：仅在页面100％加载后运行。

元素定义后如何运行JavaScript代码？

1 个答案: