I am Trying with onbeforeunload, and Unload function. But it didn't work. When clicking a link or refreshing, this event got triggered. I want an event that is triggered only when a browser window or tab is closed. The code must work in all browsers.
I am using Following code in Masterpage.
<script type="text/jscript">
var leaving = true;
var isClose = false;
function EndChatSession() {
var request = GetRequest();
request.open("GET", "../Chat.aspx", true);
request.send();
}
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
if (keycode == 116) {
isClose = true;
}
}
function somefunction() {
isClose = true;
}
window.onbeforeunload = function (e) {
if (!e) e = event;
if (leaving) {
EndChatSession();
e.returnValue = "Are You Sure";
}
}
function GetRequest() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
//Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
and in my body tag:
The Above code works in IE but not in chrome...
This question is related to
javascript
asp.net
session
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'ServerThemes.Net Recommend BEST WEB HOSTING at new tab window. Good things will come to you'
function goodbye(e) {
if (!validNavigation) {
window.open("http://serverthemes.net/best-web-hosting-services","_blank");
return leave_message;
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});
</script>
I did answer at Can you use JavaScript to detect whether a user has closed a browser tab? closed a browser? or has left a browser?
You can also do like below.
put below script code in header tag
<script type="text/javascript" language="text/javascript">
function handleBrowserCloseButton(event) {
if (($(window).width() - window.event.clientX) < 35 && window.event.clientY < 0)
{
//Call method by Ajax call
alert('Browser close button clicked');
}
}
</script>
call above function from body tag like below
<body onbeforeunload="handleBrowserCloseButton(event);">
Thank you
Yes there is! After a lot of headache i found one solution to this.
Monitor.php
This php file will be monitoring the browser close event. Once the browser is closed the connection_aborted will return 1 hence the loop will break.
<?php
// Ignore user aborts and allow the script
// to run forever
ignore_user_abort(true);
set_time_limit(0);
echo connection_aborted();
while(1)
{
echo "Whatever you echo here wont be printed anywhere but it is required in order to work.";
flush();
if(connection_aborted())
{
break;
// Breaks only when browser is closed
}
}
/*
Action you want to take after browser is closed.
Write your code here
*/
?>
Caller.php
This is the file which will call Monitor.php
<?php
Header('Location: monitor.php');
?>
Parent.html
This will be the file which you will actually interact with. On loading this will directly make an AJAX call to Caller.php which will automatically start Monitor.php in background mode.
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
}
}
xmlhttp.open("GET", "Caller.php", true);
xmlhttp.send();
</script>
So the final flow is Parent.html----->Caller.php----->Monitor.php
to make the difference between a refresh and a closed tab or navigator, here is how I fixed it :
<script>_x000D_
function endSession() {_x000D_
// Browser or Broswer tab is closed_x000D_
// Write code here_x000D_
}_x000D_
</script>_x000D_
_x000D_
<body onpagehide="endSession();">_x000D_
_x000D_
</body>You can't detect it with javascript.
Only events that do detect page unloading/closing are window.onbeforeunload and window.unload. Neither of these events can tell you the way that you closed the page.
This code prevents the checkbox events. It works when user clicks on browser close button but it doesn't work when checkbox clicked. You can modify it for other controls(texbox, radiobutton etc.)
window.onbeforeunload = function () {
return "Are you sure?";
}
$(function () {
$('input[type="checkbox"]').click(function () {
window.onbeforeunload = function () { };
});
});
After my initial research i found that when we close a browser, the browser will close all the tabs one by one to completely close the browser. Hence, i observed that there will be very little time delay between closing the tabs. So I taken this time delay as my main validation point and able to achieve the browser and tab close event detection.
//Detect Browser or Tab Close Events
$(window).on('beforeunload',function(e) {
e = e || window.event;
var localStorageTime = localStorage.getItem('storagetime')
if(localStorageTime!=null && localStorageTime!=undefined){
var currentTime = new Date().getTime(),
timeDifference = currentTime - localStorageTime;
if(timeDifference<25){//Browser Closed
localStorage.removeItem('storagetime');
}else{//Browser Tab Closed
localStorage.setItem('storagetime',new Date().getTime());
}
}else{
localStorage.setItem('storagetime',new Date().getTime());
}
});
my solution is similar to the solution given by Server Themes. Do check it once:
localStorage.setItem("validNavigation", false);
$(document).on('keypress', function (e) {
if (e.keyCode == 116) {
localStorage.setItem("validNavigation", true);
}
});
// Attach the event click for all links in the page
$(document).on("click", "a", function () {
localStorage.setItem("validNavigation", true);
});
// Attach the event submit for all forms in the page
$(document).on("submit", "form", function () {
localStorage.setItem("validNavigation", true);
});
// Attach the event click for all inputs in the page
$(document).bind("click", "input[type=submit]", function () {
localStorage.setItem("validNavigation", true);
});
$(document).bind("click", "button[type=submit]", function () {
localStorage.setItem("validNavigation", true);
});
window.onbeforeunload = function (event) {
if (localStorage.getItem("validNavigation") === "false") {
event.returnValue = "Write something clever here..";
console.log("Test success!");
localStorage.setItem("validNavigation", false);
}
};
If you put the breakpoints correctly on the browser page, the if condition will be true only when the browser is about to be closed or the tab is about to be closed.
Check this link for reference: https://www.oodlestechnologies.com/blogs/Capture-Browser-Or-Tab-Close-Event-Jquery-Javascript/
Source: Stackoverflow.com