如何在页面加载时运行函数?

IT技术 javascript html onload
2021-01-27 01:41:12

我想在页面加载时运行一个函数,但我不想在<body>标签中使用它

我有一个脚本,如果我在 中初始化它,它就会运行<body>,如下所示:

function codeAddress() {
  // code
}
<body onLoad="codeAddress()">

但是我想在没有 的情况下运行它<body onload="codeAddress()">并且我尝试了很多东西,例如:

window.onload = codeAddress;

但它不起作用。

那么如何在页面加载时运行它呢?

6个回答

window.onload = codeAddress;应该可以工作 -这是一个演示,以及完整的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

正如我在回答中所说的那样,所看到的代码没有任何问题-它不起作用的原因一定是 JS 中某处的错误。
2021-03-12 01:41:12
这样做的问题是您可能会覆盖以前的加载功能。改用事件侦听器
2021-03-13 01:41:12
此全局事件处理程序仅在 Chrome 中可用。 developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/...
2021-03-21 01:41:12
如果您在正文中放置一个带有文本的段落,则在您单击确定之前它不会加载。
2021-04-04 01:41:12

自 jQuery 发布以来,原生 JavaScript 并没有使用 jQuery 或 window.onload,而是采用了一些很棒的功能。所有现代浏览器现在都拥有自己的 DOM 就绪功能,无需使用 jQuery 库。

如果您使用本机 Javascript,我会推荐这个。

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);
(菜鸟问题:这是false做什么的?)
2021-03-13 01:41:12
@ᔕᖺᘎᕊ 用于 'bubbles' 属性(您不必包括它,我只是填写所有布尔值以获得良好习惯)。'cancelable' 属性还有另一个布尔语句,但它不是很有用,因为上面的语句已经是不可取消的。在此处阅读更多相关信息:developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
2021-03-16 01:41:12
@x-yuri “DOMContentLoaded 事件在文档完全加载和解析后触发,无需等待样式表、图像和子框架完成加载(加载事件可用于检测完全加载的页面)。” - stackoverflow.com/questions/2414750/...
2021-03-16 01:41:12
window.onload只能设置一次。如果你想在加载时运行两个函数window.onload,第二个将覆盖第一个。
2021-03-17 01:41:12
这就是我现在正在寻找的 :) 在 DOM 完成时执行,因此您可以操作它,而不是在浏览器说“页面完全加载”时执行,这可能需要几秒钟,基于外部内容(例如广告)
2021-03-29 01:41:12

采用 Darin 的答案,但采用 jQuery 风格。(我知道用户要求使用 javascript)。

运行小提琴

$(document).ready ( function(){
   alert('ok');
});​
你的回答教会了我分配,但不是关于 jQuery/javascript。
2021-03-25 01:41:12
@VijayKumar 这是 jQuery,而不是原生 Javascript,因此您需要包含一个 jQuery 库才能工作
2021-03-30 01:41:12

替代解决方案。为了简洁和代码简单,我更喜欢这个。

(function () {
    alert("I am here");
})();

这是一个匿名函数,未指定名称。这里发生的是,函数是一起定义和执行的。将此添加到正文的开头或结尾,具体取决于它是在加载页面之前还是在所有 HTML 元素加载后不久执行。

这是唯一适用于 GitHub 的 HTML 预览的 代码htmlpreview.github.io其他代码虽然正确,但被此 HTML 预览破坏了。
2021-03-12 01:41:12
最后一行不应该是}());吗?
2021-03-21 01:41:12
@ChewieTheChorkie。最后一行是根据答案本身,因为它是一个 IIFE(立即调用的函数表达式)。
2021-03-22 01:41:12
有人能解释一下这与将脚本标签放在 HTML 页面的末尾以及匿名函数的目的有何不同吗?
2021-03-31 01:41:12

window.onload = function() { ...等不是一个很好的答案。

这可能会起作用,但它也会破坏已经与该事件挂钩的任何其他函数。或者,如果另一个函数在您的事件之后挂接到该事件,它将破坏您的事件。因此,您可能会在之后花费大量时间试图弄清楚为什么原来的工作不再有效。

这里有一个更可靠的答案

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

我一直在使用的一些代码,我忘记了在哪里找到它来给作者信用。

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

希望这可以帮助 :)

感谢您提供有关onload使用情况的更多见解
2021-04-09 01:41:12