在页面加载时执行JS而不使用jQuery

Execute JS on page load without using jQuery

本文关键字：jQuery JS 执行 加载      更新时间：2023-09-26

所以我知道，如果你使用jQuery，你可以使用$(document).load(function(){});，所以你写的任何代码到函数得到执行后，整个页面加载，但有没有一种方法做类似的事情，如果你不使用jQuery，只是使用JS?

例如…

<html>
    <head>
        <script type="text/javascript">
            var box = document.getElementById('box');
            alert(box);
        </script>
    </head>
    <body>
        <div id="box" style="width:200px; height:200px; background-color:#999; 
margin:20px;"></div>
    </body>
</html>

如果我使用这个方法，警报只是说null。那么有没有一种方法，使js代码运行一旦页面加载?

我使用:

<script type="text/javascript">
    window.onload = function(){
        //do stuff here
    };
</script>

这样你就不必在html中使用任何onload标签了

最简单的方法是将脚本放在文档的末尾，通常在结束正文标记之前:

<html>
<head>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
    var box = document.getElementById('box');
    alert(box);
</script>
</body>
</html>

您可以使用多种方法来完成此操作。

最简单的方法是在body标签的末尾添加script标签:

<html>
<head>
    <title> Example </title>
</head>
<body>
    <div>
        <p>Hello</p>
    </div>
    <script type="text/javascript">
        // Do stuff here
    </script>
</body>
</html>

jQuery的实现方式类似于:

window.onload = function() {
    // Do stuff here
}

我通常用第二种方法，以防万一。

为确保跨浏览器兼容性，请浏览jQuery的源代码并查找它们使用的内容。

可以在body标签中使用onload。

<head>
   <script type="text/javascript">
      function doSomething() {
         //your code here
      }
   </script>
</head>
<body onload="doSomething()">
相关文章：