如何使JavaScript页面加载后执行?

我正在执行一个外部脚本，使用<脚本>内<头>。

现在，由于脚本在页面加载之前执行，我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件，我可以挂钩到当我的脚本执行，这将在页面加载触发?

当前回答

合理的可移植，非框架的方式让你的脚本设置一个函数在加载时运行:

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;
    }
}

2009-04-30 16:59:58

其他回答

正如Daniel所说，您可以使用document.onload。

然而，各种javascript框架(jQuery, Mootools等)使用一个自定义事件'domready'，我猜这一定是更有效的。如果你使用javascript进行开发，我强烈建议你使用框架，这将极大地提高你的工作效率。

2009-04-30 16:47:28

有一个关于如何使用Javascript或Jquery检测文档是否已加载的非常好的文档。

使用本地Javascript可以实现这一点

if (document.readyState === "complete") {
 init();
 }

这也可以在区间内完成

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

由Mozilla编写

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

使用Jquery 仅检查DOM是否准备就绪

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

要检查是否加载了所有资源，请使用window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

2015-12-12 08:42:00

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

jQuery也一样:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

注意:不要使用下面的标记(因为它会覆盖其他同类声明):

document.onreadystatechange = ...

2020-04-06 16:22:49

你可以在主体中放置一个“onload”属性

...<body onload="myFunction()">...

或者如果您正在使用jQuery，您也可以这样做

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

我希望它能回答你的问题。

注意$(窗口)。加载将在页面上呈现文档之后执行。

2009-04-30 16:42:29

合理的可移植，非框架的方式让你的脚本设置一个函数在加载时运行:

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;
    }
}

2009-04-30 16:59:58

如何使JavaScript页面加载后执行?

推荐文章

最新文章

标签