如何使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

其他回答

比较

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

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

只需定义<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

我发现有时在更复杂的页面上，并不是所有的元素都在时间窗口加载。Onload被触发。如果是这种情况，在函数延迟片刻之前添加setTimeout。它不是优雅的，但它是一个简单的hack渲染良好。

window.onload = function(){ doSomethingCool(); };

变得……

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

2013-07-20 21:13:54

如果脚本是在文档的<head>中加载的，那么可以在script标记中使用defer属性。

例子:

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

从https://developer.mozilla.org:

推迟此布尔属性被设置为向浏览器指示脚本意味着在解析文档之后执行，但在解析之前发射DOMContentLoaded。内如果src 属性不存在(即对于内联脚本)，在这种情况下它会没有效果。为实现动态插入脚本使用的类似效果异步= false。具有defer属性的脚本将在它们在文档中出现的顺序。

2014-01-10 08:52:41

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

推荐文章

最新文章

标签