Developing a BackboneJS app with pushState
When user clicks the mouse's back button or clicks the browser's back button, how can I capture the event and do something like:
backAction: function(e){
if (someConditionIsTrue) { preventBackAndDoSomeStuff(); }
else { doNormalBackEvent() }
}
You can add a listener to window.onpopstate to get notice when the user hits the back button.
Related
I have a React application with a form component.
When a user fills in the form and tries to navigate away from the page in any way (closing tab, closing browser, refreshing page, pressing browser back button or any other navigation), I want to alert the user of unsaved changes.
I did the following -
useEffect(() => {
// do something
window.addEventListener("beforeunload", function (e) {
e.preventDefault();
e.returnValue = "";
});
return () => {
window.removeEventListener("beforeunload", function (e) {
e.preventDefault();
e.returnValue = "";
});
};
}, []);
This works when I try to close the browser, close tab or refersh the page. But when I press back button, I do not get any alert.
Is it that I cannot capture that back event due to security reasons? (FYI I am using Brave browser).
If I can, what am I doing wrong here?
you can try to subscripe onhashchange event.
Here is thread with a similar query:
How to Detect Browser Back Button event - Cross Browser
I have the following code which is supposed to prevent the back button from exiting the app and just show an alert. The alert comes up but after i hit "ok", it still exits the app. I have no idea why the preventDefault isn't working.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
e.preventDefault();
alert('Back Button is Pressed!');
}
In my ionic mobile app. I have signup page. Once a user's signup is success user will be navigated to profile page. Now what i want, once user is successfully signed up, users are not allowed to get back to signup page.
How can I make sure that back button won't navigate to signup page once signup was success ?
One solution I have is, to check for some condition every time signup page is loaded and based on that condition stay or navigate to other page. e.g.
if(userIsLoggedin()) {
$state.go('home')
}
Create a factory to store data
module.factory('DataStore', [function () {
var _local = {}, dataStore = {};
dataStore.setValue = function (field, value) {
_local[field] = value;
};
dataStore.getValue = function (field) {
return _local[field] || null;
};
return dataStore;
}])
Then once you validate that the user is registered you set the flag in DataStore
module.controller('registration', function(..., DataStore) {
...
//do all necessary logic
if(allGood) {
DataStore.setValue('RegistrationSuccessful', true);
}
});
Then anytime you can check from any other controller that imports DataStore
module.controller('home', function(..., DataStore) {
...
//do all necessary logic according to the code in your question
$scope.onbtnclick = function () {
if(DataStore.getValue('RegistrationSuccessful')) {
$state.go('home')
} else {
$state.go('registration');
}
};
});
You can do this by handling back button in ionic app. Check the app state on back button click if it's on profile page then do nothing so it will prevent default back event.
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name!="menu.profile" ){
$ionicHistory.goBack(-1);
}else{
// if state is profile then control will be here.
}
}, 100);
Put this code in app.js file.
Other suggestion: once user is register and login in to profile then he or she should be taken to profile page directly on app start.
you can do this in your register or verification function if user is not register then take it to signup page. and if user is logged in the take it to profile page.
Your solution looks good. I think you may also want to make sure you check the user session on the server side.
The default in Onsen is that the app closes/exits when the device backbutton is pressed. Is there any way to control that in Onsen to also mimic the ons-navigator action/page history?
Thanks!
In case of PhoneGap/Cordova, backbutton event is fired when the backbutton is pressed.
Therefore, you can set the eventhandler s.t.
document.addEventListener("backbutton", onBackKeyDown, false);
In eventhandler function, you can call popPage method of navigator by obtaining the navigator scope s.t.
function onBackKeyDown() {
// Handle the back button
alert("Backbutton is pressed!");
var element = document.querySelector( ".navigator-container");
var scope = angular.element( element ).scope();
scope.popPage();
}
If you are using Monaca, the hybrid application framework based on Cordova, the backbutton event
is not fired. Instead that you can use the .ui file in which the Backbutton event is defined s.t.
{
"event" : {
"onTapBackButton" : "onBackKeyDown();"
}
}
No need to handle backbutton event to prevent application being killed.
Onsen-ui Added support to android back-button on ons-navigator and ons-sliding-menu from v1.1.1.
You can check here
You can controll it with "disableDeviceBackButtonHandler" after ons.ready event. After that add a event listener for back button and do anything you want.
ons.ready(function() {
ons.disableDeviceBackButtonHandler();
// Use Cordova handler
window.document.addEventListener('backbutton', function() {
// Handle backbutton event
}, false);
});
Just check this article: https://onsen.io/guide/overview.html#HandlingBackButton
I'm making a mobile app and it has a back button in the navbar of the app. The button is used for navigating one level up in the application. Not all levels of the applications are written in the url, some of them are skipped so i cannot rely on the browser back button because not everything is written in the history. So what i want to do is to prevent the default event that happens when you click the back button (even the url change because i have a function that's manually rewriting the url when you click on some parts of the app) and i want the browser's back button to be tied to my custom function.
I'm thinking of adding a false state in the history with history.pushstate so when i'm pressing back i'll be going to the false state, but unfortunately you can't have two states with a same name.
Do you guys know any solution for this?
Thanks
We want to prevent that users can use the back button when logged off or when the token is not valid anymore.
// Prevent to use the back button.
$scope.$on('$locationChangeStart', function(event) {
if (!$scope.isAuthenticated) {
event.preventDefault();
}
});
Where the if is you can implement your url rewrite function.
Hope this helps
try this:
$rootScope.$on("$routeChangeStart", function(event, next, current) {
if(current && current.params === "example") {
$location.path("/defaultPage");
}
});
The following code should do the trick:
var allowNav = false;
var checkNav = false;
$rootScope.$on('$stateChangeSuccess', function (event, toState, toStateParams, fromState, fromStateParams) {
allowNav = checkNav;
checkNav = true;
});
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// Prevent the browser default action (Going back)
if (checkNav) {
if (!allowNav) {
event.preventDefault();
}
else {
allowNav = false;
}
}
});