logo标签列表

无需使用jQuery在页面加载时执行JS

javascripthtml
6

我知道如果你使用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代码在页面加载后运行？
实际上，在使用jQuery时，请不要使用 $(document).load(function(){...});。 - adeneo
这个问题可能有你需要的答案 https://dev59.com/A3RA5IYBdhLWcg3w2x6W... - Tafadzwa Gonera
4个回答
14

我使用：

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

这样您就不必在html中使用任何onload标签。

我喜欢你的方式，一旦它允许我，就会有一个答案出现。 - user1563944
8
最简单的方法是将您的脚本放置在文档末尾，通常是在关闭body标签之前：
<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>
所以，为了让JS找到元素#box，JS标签必须放在body部分而不是head标签内部，对吗？ - user1563944
@user1563944 - 更具体地说，JavaScript 必须放在你要访问的元素之后，否则当 JavaScript 执行时该元素不存在。 - adeneo
4
你可以使用多种方法来实现这个目标。
最简单、最容易的方法是只需在 body 标签末尾添加脚本标签即可：
<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源代码并查找它们使用的内容。

2
您可以在body标签中使用onload。
<head>
   <script type="text/javascript">
      function doSomething() {
         //your code here
      }
   </script>
</head>
<body onload="doSomething()">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接