I am trying to capture a reload event from a controller. Inside my controller I have the following...
refresh = function() {
console.log("At least we know it ran!");
if ($window.performance) {
if ($window.performance.navigation.type === 1) {
console.log('page reloaded');
}
}
return null;
};
$window.onbeforeunload = refresh;
$scope.$on('$destroy', function(e) {
delete $window.onbeforeunload;
});
But the refresh function is never hit when I push the browser's reload button. What am I missing here?
Related
I'm trying to implement JS history using pushState/popState. Navigating back and forward works just fine, but I have trouble navigating before the initial page load using the browser's back button. It needs 1 extra hit on the browser's back button to leave the page. Why is that?
function action(text) {
history.pushState({"text":text}, text);
doAction(text);
}
function doAction(text) {
$('span').text(text);
}
var $button = $('button');
var $p = $('p');
$p.hide();
action("foo");
$button.on('click', function(){
action("bar");
$button.hide();
$p.show();
})
window.addEventListener("popstate", function(e) {
if (e.state !== null) {
$button.show();
$p.text("Next back should navigate away from this page");
} else {
$p.text("Still here? Why is that? Next back will really navigate away");
}
});
https://jsfiddle.net/lilalinux/p8ewyjr9/20/
Edit: Tested with Chrome OS/X
The initial page load shouldn't use history.pushState because it would add another history entry. There is alredy an implicit first history item with state null.
Using history.replaceState for the initial page load, sets a state for that item but doesn't add another one.
var initialPageLoad = true;
function action(text) {
if (initialPageLoad) {
// replace the state of the first (implicit) item
history.replaceState({"text":text}, text);
} else {
// add new history item
history.pushState({"text":text}, text);
}
initialPageLoad = false;
doAction(text);
}
function doAction(text) {
$('span').text(text);
}
var $button = $('button');
var $p = $('p');
$p.hide();
action("foo");
$button.on('click', function(){
action("bar");
$button.hide();
$p.show();
})
window.addEventListener("popstate", function(e) {
if (e.state !== null) {
$button.show();
$p.text("Next back should navigate away from this page");
// } else {
// won't happen anymore, as the first item has state now
// $p.text("Still here? Why is that? Next back will really navigate away");
}
});
im using a service that basically popups a box when a user tries to refresh or close the page, and it works fine, but basically i just want to be apply in a specific page, but the problem is that being applied in the rest of the pages.
I tried applying inside of a if statement that includes a specifc state location, but still is being applied in the rest of the app.
Service:
angular.module('farm')
.factory('beforeUnload', function ($rootScope, $window) {
// Events are broadcast outside the Scope Lifecycle
$window.onbeforeunload = function (e) {
var confirmation = {};
var event = $rootScope.$broadcast('onBeforeUnload', confirmation);
if (event.defaultPrevented) {
return confirmation.message;
}
};
$window.onunload = function () {
$rootScope.$broadcast('onUnload');
};
return {};
})
.run(function (beforeUnload) {
// Must invoke the service at least once
});
Controller:
if ($state.includes("app.cal.lab.result")){
$scope.$on('onBeforeUnload', function (e, confirmation) {
confirmation.message = "All data willl be lost.";
e.preventDefault();
});
$scope.$on('onUnload', function (e) {
console.log('leaving page'); // Use 'Preserve Log' option in Console
});
}
i have below code to invalidate session on window unload
window.onbeforeunload = function(event) {
if (typeof event == 'undefined') {
event = window.event;
}
if (event) {
console.log("closing the browser, invalidating the session");
$.ajax({
url : "/inValidateOnBrowserClose.html",
type : "get",
cache : false,
}).done(function(data) {
console.log(" invalidated session on browser close event");
});
}
return true;
};
$(function() {
$("a").click(function() {
window.onbeforeunload = null;
});
$("button").click(function() {
window.onbeforeunload = null;
});
});
all working fine, but i have a page where i have a dynamically created buttons.
<span class="myButton"><a href="javascript:submitForm" >Update </a></span>
when i click above anchor (button) my window unload event is getting called (in my case it should not get called), i am surprised why $("a").click(function()) is not called in first place, i am trying to fix this but no luck. Thanks for your answers
You need to use delegate here like below for binding click events to dynamically generated elements :
$(function() {
$(document).delegate("a","click",function() {
window.onbeforeunload = null;
});
$(document).delegate("button","click",function() {
window.onbeforeunload = null;
});
});
And this works for already existing elements, so no need to write separate click binding.
For firefox user delegate function may not work so they can use on. please see below code
$(function() {
$("a").on("click",function() {
window.onbeforeunload = null;
});
$("button").on("click",function() {
window.onbeforeunload = null;
});
});
Stackoverflow Issue
I am using below code for detecting browser close event and then invalidate session. It works fine if directly I click on browser close button. If I click on some <a href > in the page then window.onbeforeunload is getting triggered and session gets invalidated.
Please let me know If some body knows the solution for this problem.
/*JS code begins here*/
/*Global js variable to decide whether to call session invalidate function*/
var validNavigation = false;
//Called when page loads initially
jQuery(document).ready(function() {
//Call to wireupEvents
wireUpEvents();
});
//Function called when the page loads
function wireUpEvents() {
window.onbeforeunload= function() {
if (!validNavigation) {
/*This JS function calls my managed bean method to invalidate session.*/
windowCloseJsFunction();
}
}
// Attach the event keypress to exclude the F5 refresh
jQuery(document).bind('keypress', function(e) {
if (e.keyCode == 116) {
alert('116');
validNavigation = true;
}
});
// Attach the event click for all links in the page
jQuery("a").bind("click", function() {
alert('click a');
validNavigation = true;
});
// Attach the event submit for all forms in the page
jQuery("form").bind("submit", function() {
alert('form');
validNavigation = true;
});
// Attach the event click for all inputs in the page
jQuery("input[type=submit]").bind("click", function() {
alert('input');
validNavigation = true;
});
//Attach button click for all inputs in the page
jQuery("input[type=button]").bind("click", function() {
validNavigation = true;
});
}
/*JS code ends here*/
I have an application which uses backbone hash routing. When the page reloads I use the onbeforeunload event to tell the user that there are unsaved changes and prevent the page load. This does not work on hash change; so if the user presses back the dialog does not tell them there are changes pending and just goes back.
Is there anyway to detect the hash change and prevent it happening? something like onbeforehashchange
Nope, you can detect the hashchange as it happens with something like below, but you can't really detect it before it happens. If you need the hash before it changes you can just store it somewhere.
var myHash = document.location.hash;
$(document).on('hashchange', function() {
if (myHash != document.location.hash) {
//do something
}
});
You can't really detect the back button either, and if it does'nt trigger a reload, onbeforeunload won't work either.
If this functionality is essential, you should consider trying the haschange plugin or the history plugin, as one of those would make this a lot easier, and let you control the browser history and back/forth.
I ended up creating a function in my router. This is run before each route and puts up a jquery ui dialog and waits for a reply to run the route. This is quite messy code a I stripped out the application specific stuff.
close: function(callback) {
var hash = window.location.hash;
if (this.afterHash && this.afterHash == hash) {
this.dialog.dialog("close");
return;
}
callback = callback || function () {};
if (window.onbeforeunload) {
var text = window.onbeforeunload();
if (text) {
if (!this.dialog) {
var t = this;
this.afterHash = this.previous;
this.dialog = $("<div><p>" + text + "</p><p>Are you sure you want to close the dialog?</p></div>").dialog({
modal: true,
width: 420,
title: "Confirm Navigation",
close: function() {
t.dialog.dialog("destroy");
if (t.afterHash) {
t.navigate(t.afterHash, {
trigger: false
});
t.afterHash = null;
}
t.dialog = null;
},
buttons: {
'Leave this Page': function() {
t.afterHash = null;
t.dialog.dialog("close");
closeViewer();
callback.apply(t);
},
'Stay on this Page': function() {
t.dialog.dialog("close");
}
}
});
}
return;
}
}
this.previous = window.location.hash;
callback.apply(this);
},
on initialize you must add this.previous = window.location.hash;