Home>

We often use window.onload to process pages,Do something when the page finishes loading.But this window.onload is that the page is fully loaded,Even including pictures,Let's explore the usage of window.onload in detail

The javascript script code in a web page often needs to be executed after the document is loaded.Otherwise, it may lead to the situation that the object cannot be obtained,To avoid this,You can use the following two methods:

1. Place the script code at the low end of the web page,So when running the script code,You can ensure that the object to be operated has been loaded.

2. Execute the script code through window.onload.

The first way feels messy (recommended), often we need to put the script code in a more suitable place,Then window.onload is a better choice.window.onload is an event,This event is fired when the document is loaded,Event handlers can be registered for this event,And put the script code to be executed in the event handler,Then you can avoid the situation where the object cannot be obtained.First look at a code example:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window.onload usage</title>
<style type="text/css">
#bg {
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
document.getelementbyid ("bg"). style.backgroundcolor="#f90";
</script>
</head>
<body>
 <div></div>
</body>
</html>

The original purpose of the above code is to set the background color of the div to #f90, but this effect is not achieved.This is because the code is executed sequentially,When the document.getelementbyid ("#bg"). Style.backgroundcolor="#f90" is executed,It hasn't been loaded into this div object, so the setting will not succeed.The code is modified as follows:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position height div vertical center</title>
<style type="text/css">
#bg {
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function () {
 document.getelementbyid ("bg"). style.backgroundcolor="#f90";
}
</script>
</head>
<body>
 <div></div>
</body>
</html>

The reason is that the code for setting the background color is placed in the event handler of window.onload.Only when the document is loaded,Before the event handler is executed,The script code that sets the background color is also executed.

Event handler binding:

method one:

window.onload=function () {}, in the above code, this way is used to bind the event handler to the window.onload event,Binding here is an anonymous function,Of course, you can also bind non-anonymous functions,The code example is as follows:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window.onload usage detailed explanation</title>
<script type="text/javascript">
window.onload=function myalert ()
{
");
}
</script>
</head>
<body>
</body>
</html>

The above code can bind the named myalert method to the window.onload event, but you cannot bind multiple event handlers for this event in the following way:

window.onload=function a () {}

window.onload=function b () {}

The above code cannot bind multiple event handlers for the window.onload event.Instead, the last one will overwrite all previous functions.But the code can be worked around a bit:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window.onload usage</title>
<style type="text/css">
#bg {
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function () {
 function a () {
  document.getelementbyid ("bg"). style.backgroundcolor="#f90";
 }
 function b () {
  document.getelementbyid ("bg"). style.width="200px";
 }
 a ();
 b ();
}
</script>
</head>
<body>
 <div></div>
</body>
</html>

The above code achieves the same effect of binding multiple event handlers.

Method two:

You can use addeventlistener () and attachvent () to bind event handlers for the onload event.Introduce them separately below:

addeventlistener () is an event handler binding method in the current standard.However, browsers under ie8 and ie8 do not support this method.Examples are as follows:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window.onload usage</title>
<style type="text/css">
#bg {
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.addeventlistener ("load", bg, false);
window.addeventlistener ("load", changew, false);
function bg () {
 document.getelementbyid ("bg"). style.backgroundcolor="#f90";
}
function changew () {
 document.getelementbyid ("bg"). style.width="200px";
}
</script>
</head>
<body>
 <div></div>
</body>
</html>

The above code can bind multiple event handlers for the window.onload event.Briefly introduce the syntax format:

addeventlistener ("type", function name, false)

The addeventlistener () function has three parameters,The first parameter event type,have to be aware of is,The event type name cannot be preceded by on. For example, the window.onload event, only load can be written in this place. The second parameter is the name of the function to be bound.The third parameter is generally false.

Use attachvent () function to bind event handler:

Internet Explorer before Internet Explorer 9 does not support the addeventlistener () function, so the attachvent () function will be useful.The code example is as follows:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window.onload usage</title>
<style type="text/css">
#bg {
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.attachevent ("onload", bg);
window.attachevent ("onload", changew);
function bg () {
 document.getelementbyid ("bg"). style.backgroundcolor="#f90";
}
function changew () {
 document.getelementbyid ("bg"). style.width="200px";
}
</script>
</head>
<body>
 <div></div>
</body>
</html>

The effect of the above code is the same as using the addeventlistener () function.Briefly introduce the syntax format:

addeventlistener ("type", function name)

This function has only two parameters.The first parameter is the event type,But it has the same effect as the first parameter of addeventlistener (),But the names are different,The name is preceded by "on", and the second parameter is the name of the event handler to bind.To be compatible with each browser,Need to transform the above code,Examples are as follows:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window.onload usage</title>
<style type="text/css">
#bg {
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
if (window.addeventlistener) {
 window.addeventlistener ("load", bg, false);
 window.addeventlistener ("load", changew, false);
}
else {
 window.attachevent ("onload", bg);
 window.attachevent ("onload", changew);
}
function bg () {
 document.getelementbyid ("bg"). style.backgroundcolor="#f90";
}
function changew () {
 document.getelementbyid ("bg"). style.width="200px";
}
</script>
</head>
<body>
 <div></div>
</body>
</html>

The above code solves the compatibility issues of major browsers.Use the following code to judge in the above code:

if (object.addeventlistener) {
 object.addeventlistener ();
}
else {
 object.attachevent ();
}

Use the if statement to determine whether the object has the addeventlistener property. If this is the case, use the addeventlistener () function, otherwise use the attachvent () function