如何使JavaScript在页面加载后执行？

我正在执行一个外部脚本，在<head>中使用<script>。

现在，由于脚本执行之前页面已加载，我无法访问<body>，除此之外。我想在文档“加载”（完全下载并在RAM中的超文本标记语言）后执行一些JavaScript。当我的脚本执行时，是否有任何我可以挂接的事件，这将在页面加载时触发？

2149759 次浏览
小开

看看挂钩document.onload或jQuery$(document).load(...)。

小开

只需定义将在页面加载后调用的<body onload="aFunction()">。脚本中的代码不包含在aFunction() { }中。

小开
最佳答案

这些解决方案将起作用：

正如评论中提到的，使用推迟：

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

或

<body onload="script();">

或

document.onload = function ...

甚至

window.onload = function ...

注意最后一个选择是更好的选择，因为它是unbstrusive和认为更标准。

小开

您可以在主体中添加“onload”属性

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

如果你使用jQuery，你可以 

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

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

请注意，$（窗口）. load将在文档在您的页面上呈现后执行。

小开

正如丹尼尔所说，你可以用document.onload.

各种javascript框架（jQuery、Moools等）都使用自定义事件“dom大笑”，我想这一定更有效。如果您正在使用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;}}
小开

使用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>
小开

这是一个基于页面加载后延迟js加载的脚本，

<script type="text/javascript">function downloadJSAtOnload() {var element = document.createElement("script");element.src = "deferredfunctions.js";document.body.appendChild(element);}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;</script>

我该把这个放在哪里？

将代码粘贴在超文本标记语言的</body>标记之前（靠近超文本标记语言文件的底部）。

它有什么用？

这段代码说等待整个文档加载，然后加载外部文件deferredfunctions.js。

下面是上面代码的一个示例-JS的延迟渲染

我写这个基于javascript的失败加载页面速度的谷歌概念，也来自这篇文章延迟加载javascript

小开

如果您使用jQuery，

$(function() {...});

相当于

$(document).ready(function () { })

或另一只短手：

$().ready(function () { })

JQuery$Function（）触发什么事件？和https://api.jquery.com/ready/

小开

工作小提琴对<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>
小开 
<body onload="myFunction()">

这段代码运行良好。

但是window.onload方法有各种依赖项。所以它可能不会一直工作。

小开

我有时会发现在更复杂的页面上，在触发window.onload时并非所有元素都已加载。如果是这种情况，请在您的函数延迟之前添加setTimeout。它并不优雅，但它是一个简单的hack，渲染效果很好。

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

变成…

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

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

示例：

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

从https://developer.mozilla.org：

推迟

此布尔属性设置为向浏览器指示脚本应该在文档被解析后执行，但在之前

已加载。

如果src不能使用此属性属性不存在（即对于内联脚本），在这种情况下，它会没有效果。

要为动态插入的脚本实现类似的效果，请使用而不是async=false。具有deer属性的脚本将在它们在文档中出现的顺序。

小开 
document.onreadystatechange = function(){if(document.readyState === 'complete'){/*code here*/}}

看这里：http://msdn.microsoft.com/en-us/library/ie/ms536957（v=vs.85）

小开 
<script type="text/javascript">function downloadJSAtOnload() {var element = document.createElement("script");element.src = "defer.js";document.body.appendChild(element);}if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

小开

我建议使用asnyc属性作为脚本标签，这有助于您在页面加载后加载外部脚本 

<script type="text/javascript" src="a.js" async></script><script type="text/javascript" src="b.js" async></script>
小开 

<script type="text/javascript">$(window).bind("load", function() {
// your javascript event here
});</script>

小开

有一个关于如何使用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" );});
小开

在适当的时候触发脚本

快速概述如何在它们打算加载/执行的时刻加载/运行脚本。

使用“延迟”

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

使用deler将在domInteractive（document.readyState="交互式"）之后和触发"DOMContentLoade"事件之前触发。如果您需要在加载所有资源（图像、脚本）后执行脚本，请使用"load"事件或针对document.ready状态之一。进一步阅读有关这些事件/状态的更多信息，以及与脚本获取和执行计时对应的异步和延迟属性。

此布尔属性设置为向浏览器指示脚本应该在文档被解析后执行，但在之前

已加载。

带有deler属性的脚本将阻止DOMContentLoade事件，直到脚本加载并完成评估。

资源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes

*请参阅底部的图像以获取羽毛解释。

事件监听器-请记住，页面的加载有不止一个事件：

"DOMContentLo的"

此事件在初始超文本标记语言文档已完全加载和解析时触发，无需等待样式表、图像和子帧完成加载。在这个阶段，您可以根据用户设备或带宽速度以编程方式优化图像和CSS的加载。

加载DOM后执行（在图像和CSS之前）：

document.addEventListener("DOMContentLoaded", function(){//....});

注意：同步JavaScript暂停解析DOM。如果您希望在用户请求页面后尽快解析DOM，您可以将您的JavaScript异步和优化样式表的加载

"加载"

一个非常不同的事件，**load**，应该只用于检测一个*完全加载的页面*。在DOMContentLoade更合适的地方使用load是一个非常流行的错误，所以要小心。

加载并解析所有内容后执行：

document.addEventListener("load", function(){// ....});

MDN资源：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoadedhttps://developer.mozilla.org/en-US/docs/Web/Events/load

所有事件的MDN列表：
https://developer.mozilla.org/en-US/docs/Web/Events

具有readyState的事件监听器-替代解决方案（readystatechange）：

您还可以跟踪document.readystatechange状态以触发脚本执行。
// Place in header (do not use async or defer)document.addEventListener('readystatechange', event => {switch (document.readyState) {case "loading":console.log("document.readyState: ", document.readyState,`- The document is still loading.`);break;case "interactive":console.log("document.readyState: ", document.readyState,`- The document has finished loading DOM. `,`- "DOMContentLoaded" event`);break;case "complete":console.log("document.readyState: ", document.readyState,`- The page DOM with Sub-resources are now fully loaded. `,`- "load" event`);break;}});

MDN资源：https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

在哪里放置您的脚本（有和没有async/deer）？

这对于知道在哪里放置脚本以及它在超文本标记语言中的位置以及延迟和异步等参数将影响脚本获取，执行和超文本标记语言阻塞也非常重要。

*在下面的图片上，黄色标签“就绪”表示结束加载超文本标记语言DOM的时刻。然后触发：document.ready状态=“交互式”>>>失败的脚本>>>DOMContentLo的事件（它是顺序的）；

在此处输入图片描述

在此处输入图片描述

在此处输入图片描述

在此处输入图片描述

如果您的脚本使用async或推迟，请阅读：https://flaviocopes.com/javascript-async-defer/

小开

将此代码与jQuery库一起使用，这将非常好。

$(window).bind("load", function() {
// your javascript event
});
小开 
$(window).on("load", function(){ ... });

.就绪（）最适合我。

$(document).ready(function(){ ... });

. load（）将起作用，但它不会等到页面加载。

jQuery(window).load(function () { ... });

对我不起作用，打破了下一个内联脚本。我还使用jQuery 3.2.1以及其他一些jQuery分支。

为了隐藏我的网站加载覆盖，我使用以下内容：

<script>$(window).on("load", function(){$('.loading-page').delay(3000).fadeOut(250);});</script>
小开

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 = ...
小开

比较

在下面的片段中，我收集了选择的方法并显示了它们的顺序。备注

  • 任何现代浏览器都不支持document.onload（X）（事件永远不会是解雇）
  • 如果您同时使用<body onload="bodyOnLoad()">（F）和window.onload（E），那么只会执行第一个（因为它会覆盖第二个）
  • <body onload="...">（F）中给出的事件处理程序由附加的onload函数包装
  • document.onreadystatechange（D）不覆盖document .addEventListener('readystatechange'...)（C）可能cecasueonXYZevent-like方法独立于addEventListener队列（允许添加多个侦听器）。在执行这两个处理程序之间可能没有发生任何事情。
  • 所有脚本都在控制台中写入它们的时间戳-但是也可以访问div的脚本也将它们的时间戳写入主体（在脚本执行后单击“整页”链接以查看它）。
  • 解决方案readystatechange（C， D）由浏览器执行多次，但针对不同的文档状态：
    • 加载-文档正在加载（片段中没有触发）
    • 互动-文档被解析，在DOMContentLoaded之前触发
    • 完成-在body/window onload之前加载、触发文档和资源

<html>
<head><script>// solution Aconsole.log(`[timestamp: ${Date.now()}] A: Head script`);    
// solution Bdocument.addEventListener("DOMContentLoaded", () => {print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`);});
// solution Cdocument.addEventListener('readystatechange', () => {print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`);});   
// solution Ddocument.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 Ffunction bodyOnLoad() {print(`[timestamp: ${Date.now()}] F: <body onload='...'>`);infoAboutOnLoad(); // additional info}    
// solution Xdocument.onload = () => {print(`document.onload is never fired`)};


// HELPERS
function print(txt) {console.log(txt);if(mydiv) mydiv.innerHTML += txt.replace('<','&lt;').replace('>','&gt;') + '<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>
<!-- this script must te at the bottom of <body> --><script>// solution Gprint(`[timestamp: ${Date.now()}] G: <body> bottom script`);</script></body>
</html>

小开

我可以通过此代码捕获页面加载

<script>console.log("logger saber");
window.onload = (event) => {console.log('page is fully loaded');document.getElementById("tafahomNameId_78ec7c44-beab-40de-9326-095f474519f4_$LookupField").value = 1;;};
</script>
小开

您可以在特定的脚本文件上编写一个函数，并使用onload属性将其调用到您的body元素中。

示例：

<script>afterPageLoad() {//your code here}</script>

现在使用脚本标记将您的脚本调用到您的html页面中：

<script src="afterload.js"></script>

到你的body元素中；像这样添加onload属性：

<body onload="afterPageLoad();">

提交答案