Similarities and differences of Onload,onunload and onbeforeunload methods
Comparison of one or two methods
1 onload means to execute when the page is loaded.
2 same point: Onunload,onbeforeunload are called when a refresh or shutdown occurs
3 different points: onbeforeunload is to go to the server to read the new page when the call, not to start reading, and OnUnload has read from the server to load the new page, is about to replace the current page is called. OnUnload is unable to prevent the page from being updated and closed. onBeforeUnload can do this, onbeforeunload is executed before onunload, and it can also block onunload execution.
Description of two events
1 onbeforeunload Events:
Description: At present, the three major mainstream browsers Firefox and IE both support the onbeforeunload event, Opera has not yet supported.
Description: When the event is triggered, a dialog box with OK and cancel is popped up, the page is determined to leave, and the cancellation continues on this page. Handler can set a return value as the display text for the dialog box.
Triggered at:
• Close the browser window
• When you go to another page by using the Address bar or favorite folder
• Click Back, go ahead, refresh, home page one of the time
• Click on a URL to the other page to connect
• When invoking any of the following events:
Click,document write,document open,document Close,window close,window Navigate,window NavigateAndFind,location, Replace,location Reload,form Submit.
• When you open a page with window open and pass the name of the window on this page to the page you want to open.
• When the value of Location.href is re-assigned.
• When submitting a form with the specified action via the input type= "submit" button.
Can be used in the following elements:
body, FRAMESET, window
Platform Support:
Ie4+/win, Mozilla 1.7a+, Netscape 7.2+, firefox0.9+
2 onunload Events
Description: The OnUnload event is triggered when a user closes a page.
Triggered at:
• Close the browser window
• When you go to another page by using the Address bar or favorite folder
• Click Back, go ahead, refresh, home page one of the time
• Click on a URL to the other page to connect
• When invoking any of the following events:
Click,document write,document open,document Close,window close,window Navigate,window NavigateAndFind,location, Replace,location Reload,form Submit.
• When you open a page with window open and pass the name of the window on this page to the page you want to open.
• When the value of Location.href is re-assigned.
• When submitting a form with the specified action via the input type= "submit" button.
Example Description:
How Google loads the album:
A page loading the slowest is often a large image on the page, Google's Picasa Web albums, the total amount of 7 thumbnails will be stored on his server, and then on the large map of the page, he will first load a thumbnail image
, and then replace the original thumbnail with a full load of the large image, to achieve that blur-clear effect.
The code is as follows:
<body>
</body>
<script type= "Text/javascript" >
var p = new Image ();
var loaded = false;
P.onload = P.onreadystatechange = function ()
{
if (!loaded && (!this.readystate | | this.readystate = = "Loaded" | | this.readystate = = "complete"))
{
Document.getelemengtbyid (' pic '). src = ' big.jpg ';
}
}
P.src= "Big.jpg";
Window.onunload = function ()
{
Alert (' close page ');
}
Window.onbeforeunload = function (e)
{
var n = window.event.screenx-window.screenleft;
var b = n > document.documentelement.scrollwidth-20;
if (b && Window.event.clientY < 0 | | window.event.altKey)
{
Here you can put the operation code you want to do
Alert ("Close window");
}else{
Alert ("Refresh window");
}
or this:
Event.returnvalue= "OK to leave the current page?" ";
}
</script>
This code is to determine the trigger onbeforeunload event, whether the mouse clicked the Close button, or press the ALT+F4 to close the page, if it is, the system is to shut down the Web page, or the system is considered to refresh the page.
3 onload Event
The onload means to execute when the page is finished loading. When an event is triggered, a function needs to be executed, attachevent is available under IE, and AddEventListener is used under FF.
Example code:
Attachevent () has two parameters, the first is the event name, the second is the function to be executed;
AddEventListener () has three parameters, the first is the event name, but unlike the IE event, the event does not have "on", such as "onsubmit" here should be "submit", the second is to execute the function, the third parameter is a Boolean value;
Example code:
if (document.all) {
Window.attachevent (' onload ', name of function)//ie
}else{
Window.addeventlistener (' Load ', function name, false);//firefox
}
BOM onload onunload onbeforeload differences
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
