随着网络开发的新进展,JavaScript甚至在不同的框架中不断发展,这让开发者的生活变得更加轻松。谈到它的使用,到现在为止,许多著名的网站都是基于JavaScript建立的,这说明这种语言是多么的可靠。
JavaScript有一个窗口的onload事件,在网页被加载时启动某些功能。该onload事件也被用来验证访问者的浏览器类型和版本。此外,还可通过onload属性检查cookies。
当对象在HTML中被加载时,onload属性就会触发。这是为了在相关元素加载时启动脚本。用更简单的话来说,我们可以说,只要网页启动成功,就会触发窗口的onload事件。
Onload事件是用来在页面的实质内容(包括CSS文件、图像和脚本)被完全触发后运行脚本的。然而,你并不总是需要一个标签。它可以与其他Html元素一起使用。
download.onload在图像和外部内容之前启动,正好在window.onload之前触发。而window.onload则在页面完全加载后启动,包括CSS、脚本文件、图像等。
如果你想在JavaScript中操作加载事件,那么你需要通过addEventListener()方法注册事件监听器,如下例所示。
window.addEventListener('load', (event) =>{
console.log(Page Loaded);
});
你还可以通过窗口对象的属性即onload来处理加载事件。下面的例子展示了如何使用onload属性。
window.onload = (event) =>{
console.log('Page Loaded');
};
在HTML标题部分设置Window.onload事件
首先,我们将介绍一个window.onload事件的简单例子。在这个例子中,只要有页面加载,我们就会简单地显示一条警告信息。
语法
window.onload= functionName();
例子
<html>
<head>
<script type="text/javascript">
function js_onload_code (){
alert(" Hello, you are learning onload event in JavaScript");
}
window.onload= js_onload_code ();
</script>
</head>
<body >
</body>
</html>
输出
在HTML的body部分的Onload事件
内容可以显示在HTML的body部分。每当网页被加载时,当时发生的事件被命名为onload事件。我们可以在body部分使用onload事件,这样就可以执行脚本。
语法
<body onload="functionname()";>
例子
如果你想在body部分使用一个onload事件,那么请执行以下代码。
<html>
<head>
<script type="text/javascript">
function js_onload_code (){
alert(" Hello, you are learning onload event in JavaScript");
}
</script>
</head>
<body onLoad="js_onload_code ()";>
</body>
</html>
输出
在HTML正文部分的窗口加载事件
onload窗口的对象代表浏览器的窗口。每当所有的操作都被完全加载时,那么onload属性就会处理加载事件。我们想要执行的函数被分配给了onload属性的处理函数。每当网页被加载时,该函数就会被执行。我们在下文中为您提供了一个例子。
语法
window.onload = function functionName() {
// write function here
}
例子
<!DOCTYPE html>
<html>
<head>
<title>
Window Onload Event
</title>
</head>
<body>
<b>What is window onload event in JavaScript?</b>
<p>Script Executed. Now you can check your console to see the output. </p>
<script>
window.onload = function your_function_name() {
console.log('Hey, you are learning window onload event in JavaScript. Script will be loaded.');
}
</script>
</body>
</html>
输出
控制台的输出
如果你想看控制台的输出,那么你必须按快捷键,即CTRL+SHIFT+I,打开devTool。
总结
我们已经了解了什么是window.onload()事件,还学习了onload事件的语法。我们简要讨论了如何在JavaScript中编写onload事件的几种方法以及一个例子。简而言之,window.onload()事件是在网页加载完毕后触发的。我们还看到,onload事件对于设置浏览器的版本非常有用,也可用于观察网页的cookies。