我正在执行一个外部脚本，使用<脚本>内<头>。
现在，由于脚本在页面加载之前执行，我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件，我可以挂钩到当我的脚本执行，这将在页面加载触发?
这些解决方案是有效的:
正如注释中提到的，使用defer:
<script src="deferMe.js" defer></script>
or
<body onload="script();">
or
document.onload = function ...
甚至
window.onload = function ...
请注意，最后一个选项是更好的方法，因为它不引人注目，而且被认为更标准。
你可以在主体中放置一个“onload”属性
...<body onload="myFunction()">...
或者如果您正在使用jQuery，您也可以这样做
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
我希望它能回答你的问题。
注意$(窗口)。加载将在页面上呈现文档之后执行。
正如Daniel所说，您可以使用document.onload。
然而，各种javascript框架(jQuery, Mootools等)使用一个自定义事件'domready'，我猜这一定是更有效的。如果你使用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>标记之前(靠近HTML文件的底部)。
它能做什么?
此代码表示等待整个文档加载，然后加载 外部文件deferredfunctions.js。
这是上面代码的一个例子- JS的延迟渲染
我写这个基于延迟加载javascript页面速度谷歌的概念，也从这篇文章延迟加载javascript
如果你正在使用jQuery，
$(函数 () {...});
等于
美元(文档)。Ready (function () {})
或者另一个简写:
(美元)。Ready (function () {})
查看什么事件JQuery $function()火?和https://api.jquery.com/ready/
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>
我发现有时在更复杂的页面上，并不是所有的元素都在时间窗口加载。Onload被触发。如果是这种情况，在函数延迟片刻之前添加setTimeout。它不是优雅的，但它是一个简单的hack渲染良好。
window.onload = function(){ doSomethingCool(); };
变得……
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
如果脚本是在文档的<head>中加载的，那么可以在script标记中使用defer属性。
例子:
<script src="demo_defer.js" defer></script>
从https://developer.mozilla.org:
推迟 此布尔属性被设置为向浏览器指示脚本 意味着在解析文档之后执行，但在解析之前 发射DOMContentLoaded。内 如果src 属性不存在(即对于内联脚本)，在这种情况下它会 没有效果。 为实现动态插入脚本使用的类似效果 异步= false。具有defer属性的脚本将在 它们在文档中出现的顺序。
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
看这里:http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
<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 " > 美元(窗口)。绑定("load"， function() { // javascript事件 })； > < /脚本
有一个关于如何使用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" );
});
在合适的时机触发脚本
A quick overview on how to load / run the script at the moment in which they intend to be loaded / executed.使用“推迟”
<script src="script.js" defer></script>
使用defer将触发domInteractive (document. doc .)readyState = "interactive")，就在"DOMContentLoaded"事件触发之前。如果你需要在所有资源(图像，脚本)加载后执行脚本，请使用“load”事件或目标文档之一。请求状态。继续往下阅读，了解有关这些事件/状态的更多信息，以及与脚本获取和执行计时相对应的async和defer属性。
此布尔属性被设置为向浏览器指示脚本 意味着在解析文档之后执行，但在解析之前 发射DOMContentLoaded。内 带有defer属性的脚本将阻止DOMContentLoaded 事件，直到脚本加载并完成求值。
资源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script属性
*请参阅底部的图片以了解羽毛的解释。
事件监听器-请记住页面的加载有多个事件:
“DOMContentLoaded”
当初始HTML文档完全加载和解析完毕时，无需等待样式表、图像和子帧完成加载，就会触发此事件。在这个阶段，您可以基于用户设备或带宽速度以编程方式优化图像和CSS的加载。 DOM加载后执行(在图像和CSS之前):
document.addEventListener("DOMContentLoaded", function(){
//....
});
注意:同步JavaScript暂停DOM的解析。 如果希望在用户请求页面后尽可能快地解析DOM，可以将JavaScript转换为异步并优化样式表的加载
“负载”
A very different event, **load**, should only be used to detect a *fully-loaded page*. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.在所有内容加载并解析后执行:
document.addEventListener("load", function(){
// ....
});
MDN资源: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
所有事件的MDN列表: https://developer.mozilla.org/en-US/docs/Web/Events
事件监听器与readyStates -替代解决方案(readystatechange):
You can also track document.readystatechange states to trigger script execution.// 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
在哪里放置你的脚本(有&没有异步/延迟)?
This is also very important to know where to place your script and how it positions in HTML as well as parameters like defer and async will affects script fetching, execution and HTML blocking.* On the image below the yellow label “Ready” indicates the moment of ending loading HTML DOM. Then it fires: document.readyState = "interactive" >>> defered scripts >>> DOMContentLoaded event (it's sequential);
如果你的脚本使用async或defer，请阅读:https://flaviocopes.com/javascript-async-defer/
如果以上几点都还为时过早……
如果你需要你的脚本在其他脚本运行之后运行，包括那些计划在最后运行的脚本(例如，那些计划在“load”事件中运行的脚本)，该怎么办?参见“运行JavaScript”窗口。Onload脚本是否已完成?
如果您需要确保您的脚本在其他脚本之后运行，而不管它何时运行，该怎么办?以上问题的答案也涵盖了这一点。
使用此代码与jQuery库，这将工作得很好。
$(window).bind("load", function() {
// your javascript event
});
$(window).on("load", function(){ ... });
.ready()最适合我。
$(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 = ...
比较
在下面的片段中，我收集选择的方法并显示它们的序列。讲话
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> <!-- this script must te at the bottom of <body> --> <script> // solution G print(`[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标签:
<script src="afterload.js"></script>
融入你的身体元素;像这样添加onload属性:
<body onload="afterPageLoad();">
推荐文章
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 下一个元素的CSS选择器语法是什么?
