如何在定义 <body> 元素后立即运行 JavaScript 编码？

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

将您的日志命令插入 Html 的 <head> 部分定义的 Javascript 函数中，并在 Html 之后立即调用此函数<body> 开幕。

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

<!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 事件-属性也确实存在于另一个 html 标签中，并且只有在这些情况下才会正确执行在它的定义之后，意思是：立即。

使用 <body> 标签会发生一些奇异的事情：onload 仅在两个条件后运行：

1) </body>;

的明确定义

2)所有附件和可能的外部例程和资源的加载完成，即：所有html、css的加载, jpg, gif, svg 等

因此，onload 实现了它的承诺：当且仅在 页面 100% 加载后运行。

如何在定义 <body> 元素后立即运行 JavaScript 编码？

How to run JavaScript code as soon <body> element is defined?

html

javascript

dom

document-body

如何在定义 <body> 元素后立即 运行 JavaScript 编码？

How to run JavaScript code as soon <body> element is defined?

html

javascript

dom

document-body

如何在定义 <body> 元素后立即运行 JavaScript 编码？