Home > Developer > JavaScript
The cause of the event is that, due to customer feedback at work, users often order items while browsing the Web page. However, because the user opens too many windows at once, or when hitting the keyboard, press F5 incorrectly, leading to page refresh or abnormal shutdown. In this case, all operations performed on the webpage are lost, it would be nice if we could provide a prompt when the customer's information is not processed. The following code can do this no matter whether the user clicks close, or close the task bar, click back, refresh, and press the F5 key to detect the user's upcoming message.
Copy codeThe Code is as follows:
<Script type = "text/javascript" language = "javascript">
Function bindunbeforunload ()
{
Window. onbeforeunload = response result;
}
Function unbindunbeforunload ()
{
Window. onbeforeunload = null;
}
Function compute result ()
{
Return "the current operation has not been saved. If you leave now, all the operation information will be lost. Are you sure you want to leave? ";
}
</Script>
You only need to register the bindunbeforunload () method to the page to be detected. You can go to the onload or document of the body. register this method in ready. Here we use window. onbeforeunload, that is, a prompt box pops up before the page is about to be uninstalled. All right, let's test the Code:
Copy codeThe Code is as follows:
<Html>
<Head> <title> this is id onbeforunload event test </title>
</Head>
<Script type = "text/javascript" language = "javascript">
Function bindunbeforunload ()
{
Window. onbeforeunload = response result;
}
Function unbindunbeforunload ()
{
Window. onbeforeunload = null;
}
Function compute result ()
{
Return "the current operation has not been saved. If you leave now, all the operation information will be lost. Are you sure you want to leave? ";
}
</Script>
<Body onload = "javascript: return bindunbeforunload ();">
<H1> test is start <Input type = "button" value = "bind event" id = "btnBind" onclick = "return biindunbeforunload ();"/>
<Input type = "button" value = "delete binding event" id = "btnUnBind" onclick = "unbiindunbeforunload ();"/>
</Body>
</Html>
The above code is all the code I tested this time. Now I refresh the page. Well, it is very good. The dialog box we expect is displayed. However, when I open the above Code under IE, my "delete event binding button" does not play a role, which causes me to crash. Internet Explorer is used by users of in China, especially when using damn IE6 and 7, if my code cannot work normally in IE6 and 7, it is equivalent to my work in white. Of course, you don't need to worry about the bonus. The methods are all developed by people. Well, I use a global variable to control whether the dialog box is displayed. The modified javascript code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript" language = "javascript">
Var goodexit = false;
Function bindunbeforunload ()
{
Goodexit = false;
Window. onbeforeunload = response result;
}
Function unbindunbeforunload ()
{
Goodexit = true;
Window. onbeforeunload = null;
}
Function compute result ()
{
If (! Goodexit)
{
Return "the current operation has not been saved. If you leave now, all the operation information will be lost. Are you sure you want to leave? ";
}
}
</Script>
At the same time, when you call the delete binding event, change the value of the variable goodexit to true, indicating that the user Exits normally, so that the dialog box does not pop up.
Test again. It's normal. Right. This is what I want!
This article originated from Brandon Himes and was still taken from a google snapshot. The source link cannot be found. It was intended to be translated, but I have limited skills and can understand it, if the translation is poor, you may be scolded. If you want to read the source text, click here. This is the snapshot address and may not exist after a while.
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
