I am writing an app that uses AngularJS and ui-router. I have a button that refreshes the page by reloading the page, and the functionality that automatically logs users out when the window or tab is closed. Now both functions work awesome (and done using traditional javascript to make things simple). See below:
<script>
// Refreshes by reloading page
function refresh() {
location.reload();
}
// Automatically logs users out when browser or tab is closed
window.onunload = function(){
localStorage.clear();
}
</script>
However, the problem is when the reload button is clicked it also logs the current user out and this is not what I want. I only want the user to be logged out when the window is closed. Is there anyway this can be done? Will reloading the route in my controller fix the problem?
Not a good solution but you can use a global flag that you can set when you are reloading the page
var refh = false;
function refresh(){
ref = true;
location.reload()
}
window.unonload = function(){
if(!refh)
localStorage.clear();
}
Related
This question already has answers here:
Close a window opened with window.open() after clicking a button
(2 answers)
Closed last year.
I created an external window in the Angular application, everything works fine but I want to close the external window after application logout
written the code below, I'm moving from 1 page to another page then the external window closing properly. If I press the logout button then the external window does not close (ngOnDestroy is not called in the case of application logout)
ngAfterViewInit() {
this.externalWindow = window.open('', '', `width=${this.wWidth},height=${this.wHeight},left=${this.wLeft},top=${this.wTop}`)
this.host = new DomPortalOutlet(
this.externalWindow.document.body,
this.componentFactoryResolver,
this.applicationRef,
this.injector
)
this.host.attach(this.portal)
}
ngOnDestroy() {
this.externalWindow.close()
}
this.externalWindow.close()
is indeed the functionality you need to use. The problem is that you need to trigger it upon logout click as well. You can have something like
onClick="closeExternalWindow()"
of course, you need to implement closeExternalWindow which does the logout for externalWindow and then call this function both on destroy and logout click.
ngOnDestroy fires only when component destroys. In the logout use case, we are redirecting to the login URL which means it refreshes the page (This is outside angular workflow) hence ngOnDestroy not firing.
If I move 1 route to a different route within the application then ngOnDestroy fires and closes the external window.
This article helped me to find the solution
ngOnDestroy not firing on page reload
Solution:
ngOnInit() {
window.onbeforeunload = () => this.ngOnDestroy()
}
Suppose I have 3 views (login, chat and Map) in an AngularJS application. If I'm in Map View and clicked on refresh button my page must get redirect to chat view after refreshing page. Experts please suggest how to implement.
very simple method I tried to implement.In test function I gave $rootScope.test=true; in chat view controller where as method called in Mapview. Whenever I reload my page value will get be undefined and and gave if condition with
if($rootScope.test==undefined)
{
$location.path('/chat');
}
you can implement you'r state navigation inside beforeunload browser event
var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
// your code for state navigation
event.preventDefault();
});
I have a page that refreshing part of the page every 10th second, and the reloaded content is using php to do a check in mysql database. If some cafeterias are met the refreshing should stop until a new button is pushed / function is called from the new content. My idea was letting the refresh function be controlled by javascript boolean but I cant get it to work.
In the main page I have the refresh function
var update = true;
function autoRefresh_div()
{
if (update)
{
$("#messagebox").load("include/messagebox.php");
}
setTimeout(autoRefresh_div, 10000);
}
function messageboxClose()
{
update = true;
$('.messagebox').hide();
}
In the php file that is loaded except from connection to database I have a link that calls function to hide this div and also enable refreshing again.
Hide
And also a script that disabling refreshing
var update = false;
The problem I have is that calling the function in the main page isn't working. When refreshing update variable is set to false and refreshing content stops. But when I click the link it doesn't start again. It seems like the sub page cant access the function on the main page. Is there a better solution to this?
I would like to detect in my angular app when a user is navigating away from or reloading a page.
App (that uses some login process) should then distinguish that it was re-loaded, so user won't lose his auth data and app should be able to restore then necessary information from localStorage.
Please suggest some best techniques to "handle" browser reloading / navigation.
All of your javascript and in memory variables disappear on reload. In js, you know the page was reloaded when the code is running again for the first time.
To handle the reload itself (which includes hitting F5) and to take action before it reloads or even cancel, use 'beforeunload' event.
var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
// do whatever you want in here before the page unloads.
// the following line of code will prevent reload or navigating away.
event.preventDefault();
});
I had the same problem, but Ben's answer didn't work for me.
This answer put me on the right track. I wanted to add a warning on some states but not all of them. Here is how I did it (probably not the cleanest way) :
window.onbeforeunload = function(event) {
if ($state.current.controller === 'ReloadWarningController') {
// Ask the user if he wants to reload
return 'Are you sure you want to reload?'
} else {
// Allow reload without any alert
event.preventDefault()
}
};
(in the ReloadWarningController definition, which had the $state injected)
I have a Login.html page from which I'm navigating to my Main.html
now when I;m doing a logout I want to navigate back to the login.html but I also want to ensure this page will be refreshed.
I don't want to disable the page cache, I just want only in this specific scenario to navigate it after refresh.
I tried the following:
window.location.replace but it doesn't refresh the page.
window.location.href - also doesn't refresh the page.
window.location.reload() - Refresh only the current page.
#Christof13 suggestion regarding passing a parameter is the only way I can see but it loading the page twice and it's very ugly,
any other suggestions?
How about setting a Timeout on the logout event? This way, the location reloads only once.
$("#myLogOutButtonOrLink").click(function() {
setTimeout(function(){
window.location.reload();
}, 1000);
});
My solution was using a global variable on the window scope as the following:
on main.html:
window.globals.RefreshRequired = true
on Login.html:
if (window.globals && window.globals.RefreshRequired) {
window.location.reload();
}
In this way the refresh will be done if I already visited main.html during the current browser instance.