Android Disable hardware back button in Ionic application?
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26548418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable hardware back button in Ionic application?
提问by David D.
I'm trying to disable the back button on my Cordova app. I'm using AngularJS + Ionic Framework. I found topics about this and tried the code bellow, but it has absolutely no effect. Any idea?
I'm trying to disable the back button on my Cordova app. I'm using AngularJS + Ionic Framework. I found topics about this and tried the code bellow, but it has absolutely no effect. Any idea?
index.html
index.html
<head>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
console.log("hello");
}, false );
}
</script>
</head>
Note that when I push back button, I have "hello" displayed in my console.
Note that when I push back button, I have "hello" displayed in my console.
回答by David D.
Finally found the answer on thisIonic Forum thread:
Finally found the answer on thisIonic Forum thread:
$ionicPlatform.registerBackButtonAction(function () {
if (condition) {
navigator.app.exitApp();
} else {
handle back action!
}
}, 100);
$ionicPlatform.registerBackButtonActionallows to completly overwrite back button behavior.
First param is a callback function and the secondone a priority (only the callback with the highest priority gets executed).
$ionicPlatform.registerBackButtonActionallows to completly overwrite back button behavior.
First param is a callback function and the secondone a priority (only the callback with the highest priority gets executed).
回答by Muhammad Faizan Khan
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
}, 100);
this will prevent back button functionality.
this will prevent back button functionality.
回答by Weston Ganger
To expand upon David D's answer I have included the go back implementation.
To expand upon David D's answer I have included the go back implementation.
Put this in your applications .runfunction:
Put this in your applications .runfunction:
$ionicPlatform.registerBackButtonAction(function (event) {
if ($ionicHistory.currentStateName() === 'someStateName'){
event.preventDefault();
} else {
$ionicHistory.goBack();
}
}, 100);
This will not work in controllers, it is application wide.
This will not work in controllers, it is application wide.
回答by Niv Kapade
Its simple trick prevent go back to single page:
Its simple trick prevent go back to single page:
`.controller('DashCtrl', function($scope,$ionicHistory) {
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
})`
回答by S.M.Priya
To prevent App from device back button functionality use,
To prevent App from device back button functionality use,
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
}, 100);
If you want to prevent the particular page use,
If you want to prevent the particular page use,
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
if ($location.path() === "/pagename" || $location.path() === "pagename") {
navigator.app.exitApp();
} else {
$ionicHistory.goBack();
}
}, 100);
回答by Tautologistics
The example in the docsshows the event listeners — even the deviceready— being attached after the document onloadevent has fired.
The example in the docsshows the event listeners — even the deviceready— being attached after the document onloadevent has fired.
Using your code:
Using your code:
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
console.log("hello");
}, false);
}
document.onload = function () {
document.addEventListener("deviceready", onDeviceReady, false);
};
回答by Prashant Ghimire
For Ionic 3:
For Ionic 3:
// root component
export class MyApp {
constructor(platform: Platform) {
platform.ready().then(() => {
platform.registerBackButtonAction(() => {
this.customBackButtonHandler();
}, 100)
});
}
customBackButtonHandler() {
...
}
}
回答by Al-Mothafar
To disable hardware back button in Ionic application for controller (or controller of component), you can make the following workaround, but first it is actually not for controller itself, but it combination between controllers and state, in your controller, add your normal code:
To disable hardware back button in Ionic application for controller (or controller of component), you can make the following workaround, but first it is actually not for controller itself, but it combination between controllers and state, in your controller, add your normal code:
var deRegisterHardBack = $ionicPlatform.registerBackButtonAction(
function (event) {
if (youConditionHere) {
event.preventDefault();
// do something
} else {
$ionicHistory.goBack();
}
}, 100);
But in your $stateProvideradd disableHardwareBackButtonlike the following:
But in your $stateProvideradd disableHardwareBackButtonlike the following:
$stateProvider
.state('app.stateB', {
url: '/page-b/:id',
template: '<ion-view><ion-nav-title>Sub Page </ion-nav-title>Hello</ion-view>',
disableHardwareBackButton : true
});
Inside your module('app').run function:
Inside your module('app').run function:
$ionicPlatform.registerBackButtonAction(function(event){
if ($state.current.disableHardwareBackButton){
event.preventDefault();
} else {
$ionicHistory.goBack();
}
}
In this way you get around the issue with "sub section" or "inside controller"
In this way you get around the issue with "sub section" or "inside controller"
