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

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

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

当前回答

比较

在下面的片段中，我收集选择的方法并显示它们的序列。讲话

the document.onload (X) is not supported by any modern browser (event is never fired) if you use <body onload="bodyOnLoad()"> (F) and at the same time window.onload (E) then only first one will be executed (because it override second one) event handler given in <body onload="..."> (F) is wrapped by additional onload function document.onreadystatechange (D) not override document .addEventListener('readystatechange'...) (C) probably cecasue onXYZevent-like methods are independent than addEventListener queues (which allows add multiple listeners). Probably nothing happens between execution this two handlers. all scripts write their timestamp in console - but scripts which also have access to div write their timestamps also in body (click "Full Page" link after script execution to see it). solutions readystatechange (C,D) are executed multiple times by browser but for different document states: loading - the document is loading (no fired in snippet) interactive - the document is parsed, fired before DOMContentLoaded complete - the document and resources are loaded, fired before body/window onload

<html> <head> <script> // solution A console.log(`[timestamp: ${Date.now()}] A: Head script`); // solution B document.addEventListener("DOMContentLoaded", () => { print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`); }); // solution C document.addEventListener('readystatechange', () => { print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`); }); // solution D document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)}; // solution E (never executed) window.onload = () => { print(`E: <body onload="..."> override this handler`); }; // solution F function bodyOnLoad() { print(`[timestamp: ${Date.now()}] F: <body onload='...'>`); infoAboutOnLoad(); // additional info } // solution X document.onload = () => {print(`document.onload is never fired`)}; // HELPERS function print(txt) { console.log(txt); if(mydiv) mydiv.innerHTML += txt.replace('<','<').replace('>','>') + '<br>'; } function infoAboutOnLoad() { console.log("window.onload (after override):", (''+document.body.onload).replace(/\s+/g,' ')); console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`); } console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' ')); </script> </head> <body onload="bodyOnLoad()"> <div id="mydiv"></div>  <script> // solution G print(`[timestamp: ${Date.now()}] G: <body> bottom script`); </script> </body> </html>

2020-06-17 17:59:38

其他回答

使用YUI库(我喜欢它):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

便携又漂亮!然而，如果你不把YUI用于其他东西(参见它的文档)，我会说它不值得使用。

注意:要使用此代码，您需要导入2个脚本

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

2009-04-30 17:36:51

这些解决方案是有效的:

正如注释中提到的，使用defer:

<script src="deferMe.js" defer></script>

<body onload="script();">

document.onload = function ...

甚至

window.onload = function ...

请注意，最后一个选项是更好的方法，因为它不引人注目，而且被认为更标准。

2009-04-30 16:41:16

只需定义<body onload=" function ()>，它将在页面加载后被调用。脚本中的代码被function(){}括起来。

2009-04-30 16:41:05

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

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

Working Fiddle on <body onload="myFunction()" >

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>

2013-03-26 09:39:35

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

推荐文章

最新文章

标签