web-dev-qa-db-ja.com

Ionic application？

Cordovaアプリの[戻る]ボタンを無効にしようとしています。私はAngularJS + Ionic Frameworkを使用しています。これに関するトピックを見つけて、以下のコードを試しましたが、まったく効果がありません。

index.html

<head>
    <script>
      document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            document.addEventListener("backbutton", function (e) {
                e.preventDefault();
                console.log("hello");
            }, false );
        }
    </script>
</head>

[戻る]ボタンを押すと、コンソールに「hello」と表示されることに注意してください。

androidangularjscordovaionic-frameworkdom-events
29
David D.

this Ionicフォーラムスレッド：

$ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    handle back action!
  }
}, 100);

$ionicPlatform.registerBackButtonActionは、戻るボタンの動作を完全に上書きできます。最初のパラメータはコールバック関数で、2番目のパラメータは優先度です（優先度が最も高いコールバックのみが実行されます）。

39
David D.
$ionicPlatform.registerBackButtonAction(function (event) {
    event.preventDefault();
}, 100);

これにより、戻るボタンの機能が妨げられます。

23
Muhammad Faizan Khan

David Dの答えを拡張するために、go back実装を含めました。

これをアプリケーションに入れます.run 関数：

$ionicPlatform.registerBackButtonAction(function (event) {
  if ($ionicHistory.currentStateName() === 'someStateName'){
    event.preventDefault();
  } else {
    $ionicHistory.goBack();
  }
}, 100);

これはコントローラーでは機能せず、アプリケーション全体に適用されます。

13
Weston Ganger

その簡単なトリックは、単一のページに戻ることを防ぎます。

  `.controller('DashCtrl', function($scope,$ionicHistory) {
                $ionicHistory.clearCache();
                $ionicHistory.clearHistory();

       })`
4
Niv Kapade

アプリがデバイスの戻るボタン機能を使用できないようにするには、

      $ionicPlatform.registerBackButtonAction(function (event) {
           event.preventDefault();
      }, 100);

特定のページが使用されないようにするには、

       $ionicPlatform.registerBackButtonAction(function (event) {
           event.preventDefault();
           if ($location.path() === "/pagename" || $location.path() === "pagename") {
             navigator.app.exitApp();
           } else {
             $ionicHistory.goBack();
           }
        }, 100);
2
S.M.Priya

docs の例は、ドキュメントdevicereadyイベントが発生した後に添付されるイベントリスナー（onloadを含む）を示しています。

コードの使用：

function onDeviceReady() {
  document.addEventListener("backbutton", function (e) {
    e.preventDefault();
    console.log("hello");
  }, false);
}

document.onload = function () {
  document.addEventListener("deviceready", onDeviceReady, false);
};
2
Tautologistics

Ionic 3：の場合

// root component
export class MyApp {

  constructor(platform: Platform) {
    platform.ready().then(() => {
      platform.registerBackButtonAction(() => {
        this.customBackButtonHandler();
      }, 100)
    });
  }

  customBackButtonHandler() {
    ...
  }

}
1
Prashant Ghimire

コントローラー（またはコンポーネントのコントローラー）のIonicアプリケーション）でハードウェアバックボタンを無効にするには、次の回避策を実行できますが、最初はコントローラー自体ではなく、コントローラーと状態の組み合わせです、コントローラーで、通常のコードを追加します。

  var deRegisterHardBack = $ionicPlatform.registerBackButtonAction(
      function (event) {
        if (youConditionHere) {
          event.preventDefault();
          // do something
        } else {
          $ionicHistory.goBack();
        }
      }, 100);

しかし、$stateProviderdisableHardwareBackButtonを次のように追加します。

$stateProvider
      .state('app.stateB', {
        url: '/page-b/:id',
        template: '<ion-view><ion-nav-title>Sub Page </ion-nav-title>Hello</ion-view>',
        disableHardwareBackButton : true
      });

Module（ 'app'）。run関数内：

$ionicPlatform.registerBackButtonAction(function(event){
   if ($state.current.disableHardwareBackButton){
      event.preventDefault();
   } else {
      $ionicHistory.goBack();
   }
}

このようにして、「サブセクション」または「内部コントローラー」の問題を回避できます

0
Al-Mothafar