The cause of the incident is that customers report at work. Users often order products during the browsing of web pages. However, because the user opens too many windows at once, or when typing on the keyboard, the page refreshes or closes abnormally. At this time, the information about all operations done on the web page is lost. It would be great if we can provide a prompt when the customer information is not processed. The following code can detect the message that the user is about to leave regardless of whether the user clicks to close, or closes, clicks back, refreshes, or presses the F5 key in the taskbar, can be detected.
<script type="text/javascript" language="javascript">
function bindunbeforunload()
{
=perforresult;
}
function unbindunbeforunload()
{
=null;
}
function perforresult()
{
return "The current operation is not saved. If you leave at this time, all the operation information will be lost. Will you leave?";
}
</script>
Just register the bindunbeforunload() method to the page to be detected. You can register this method in the body's onload or in the onload. Here we use the prompt box that pops up before the page is about to be uninstalled. OK, let's test it now and test the code:
<html>
<head><title>this is id onbeforunload event test</title>
</head>
<script type="text/javascript" language="javascript">
function bindunbeforunload()
{
=perforresult;
}
function unbindunbeforunload()
{
=null;
}
function perforresult()
{
return "The current operation is not saved. If you leave at this time, all the operation information will be lost. Will you leave?";
}
</script>
<body onload="javascript:return bindunbeforunload();">
<h1>test is start</h1>
<input type="button" value="binding event" onclick="return biindunbeforunload();"/>
<input type="button" value="Delete the binding event" onclick="unbiindunbeforunload();"/>
</body>
</html>
The above code is all the code I tested this time. Now refresh the page, well, it's good, and the dialog box we expected pops up. But when I open the above code under IE, my "delete event binding button" did not work, which made me very crashed. 2 out of 3 users in China are using IE, especially when using the damn IE6 and 7. If my code cannot work normally under IE6 and 7, it is equivalent to my work being done in vain. Of course, there is no need to think about the bonus things. The methods are all figured out by people. Well, I use a global variable to control whether the dialog box pops up. The modified "javascript" code is as follows:
<script type="text/javascript" language="javascript">
var goodexit=false;
function bindunbeforunload()
{
goodexit=false;
=perforresult;
}
function unbindunbeforunload()
{
goodexit=true;
=null;
}
function perforresult()
{
if(!goodexit)
{
return "The current operation is not saved. If you leave at this time, all the operation information will be lost. Will you leave?";
}
}
</script>
When calling the delete binding event at the same time, change the value of the variable goodexit to: true, which means that the user exits normally, so that the dialog box will not pop up.
Test it again, it's normal, yes, this is the result I want!
This article is derived from Brandon Himes, and it is also a Google snapshot. The source text link is no longer found. I originally wanted to translate it, but my level is really limited and I can only understand it. If the translation is not good, I will scold you. If friends want to read the source text, please click here directly. This is the snapshot address, which may not exist after a period of time.
Copy the codeThe code is as follows:
<script type="text/javascript" language="javascript">
function bindunbeforunload()
{
=perforresult;
}
function unbindunbeforunload()
{
=null;
}
function perforresult()
{
return "The current operation is not saved. If you leave at this time, all the operation information will be lost. Will you leave?";
}
</script>
Just register the bindunbeforunload() method to the page to be detected. You can register this method in the body's onload or in the onload. Here we use the prompt box that pops up before the page is about to be uninstalled. OK, let's test it now and test the code:
Copy the codeThe code is as follows:
<html>
<head><title>this is id onbeforunload event test</title>
</head>
<script type="text/javascript" language="javascript">
function bindunbeforunload()
{
=perforresult;
}
function unbindunbeforunload()
{
=null;
}
function perforresult()
{
return "The current operation is not saved. If you leave at this time, all the operation information will be lost. Will you leave?";
}
</script>
<body onload="javascript:return bindunbeforunload();">
<h1>test is start</h1>
<input type="button" value="binding event" onclick="return biindunbeforunload();"/>
<input type="button" value="Delete the binding event" onclick="unbiindunbeforunload();"/>
</body>
</html>
The above code is all the code I tested this time. Now refresh the page, well, it's good, and the dialog box we expected pops up. But when I open the above code under IE, my "delete event binding button" did not work, which made me very crashed. 2 out of 3 users in China are using IE, especially when using the damn IE6 and 7. If my code cannot work normally under IE6 and 7, it is equivalent to my work being done in vain. Of course, there is no need to think about the bonus things. The methods are all figured out by people. Well, I use a global variable to control whether the dialog box pops up. The modified "javascript" code is as follows:
Copy the codeThe code is as follows:
<script type="text/javascript" language="javascript">
var goodexit=false;
function bindunbeforunload()
{
goodexit=false;
=perforresult;
}
function unbindunbeforunload()
{
goodexit=true;
=null;
}
function perforresult()
{
if(!goodexit)
{
return "The current operation is not saved. If you leave at this time, all the operation information will be lost. Will you leave?";
}
}
</script>
When calling the delete binding event at the same time, change the value of the variable goodexit to: true, which means that the user exits normally, so that the dialog box will not pop up.
Test it again, it's normal, yes, this is the result I want!
This article is derived from Brandon Himes, and it is also a Google snapshot. The source text link is no longer found. I originally wanted to translate it, but my level is really limited and I can only understand it. If the translation is not good, I will scold you. If friends want to read the source text, please click here directly. This is the snapshot address, which may not exist after a period of time.