我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
当前回答
您可以在特定的脚本文件上编写函数,并使用onload属性将其调用到body元素中。
示例:
<script>
afterPageLoad() {
//your code here
}
</script>
现在调用你的脚本到你的html页面使用script标签:
<script src="afterload.js"></script>
融入你的身体元素;像这样添加onload属性:
<body onload="afterPageLoad();">
其他回答
看钩文件。jQuery $(document).load(…)
$(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 = ...
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>
合理的可移植,非框架的方式让你的脚本设置一个函数在加载时运行:
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;
}
}