web-dev-qa-db-ja.com

PhoneGap-Android戻るボタンで終了

Jquery mobileとcordovaを使用してRSSリーダーをプログラムしようとしています。 RSSリーダーは3ページで構成されています(同じHTMLドキュメント:page1、page2、page3)。 (ハードウェア)バックボタンの動作をオーバーライドして、プログラムを終了しようとしています。プロジェクトのセットアップで間違いをしていないことを確認するために、PhoneGapサンプルプロジェクトを使用してEclipseにロードしました。すべてのサンプル関数が機能したため、index.htmlおよびresフォルダーをphonegapの例に移動しました。 index.htmlで、次のスクリプトをインポートします。

<script src="res/jquery-1.7.1.min.js"></script>
<script src="res/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>

そして、私のmain.jsファイルは次のようになります。

document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
    e.preventDefault();
    navigator.app.exitApp();
}
else {
    navigator.app.backHistory()
}
}, false);

最初のコードサンプルでスクリプトのバージョンを確認できます。 Xperia Arcでバックボタンを押すとアプリが終了するようにコードを機能させる方法についてのアイデアはありますか?必要に応じて、完全なコードをアップロードできます。

編集:私はAndroid携帯電話でphonegap(cordova)ビープ機能をテストし、それが動作するので、これは悪いスクリプト実装で何もありません。それはmain.jsファイルにあるに違いありません。 jquerymobileバックボタン関数とphonegapバックボタン関数の問題。

41
horin

デバイスがイベントリスナーを追加する準備ができるまで待機する必要があります。

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
       if($.mobile.activePage.is('#homepage')){
           e.preventDefault();
           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory();
       }
    }, false);
}
85
mornaner

ライブラリを使用したくない場合は、window.location.hashを使用して、アプリの「パネル」を取得できます。例:

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
        if(window.location.hash=='#home'){
            e.preventDefault();
            navigator.app.exitApp();
        } else {
            navigator.app.backHistory()
        }
    }, false);
}
document.addEventListener("deviceready", onDeviceReady, false);
12
EtienneWan

Jquery Mobileを使用したくない場合は、次のコードのように、@ mornanerの回答で$ .mobile.activePage.is( '#homepage')をdocument.getElementById( '#homepage')に変更します。

document.addEventListener( "deviceready"、onDeviceReady、false);

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
       if(document.getElementById('#homepage')){
           e.preventDefault();
           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory()
       }
    }, false);
}

この方法で、この目的のためだけにJquery Mobileの意味不明なものをダウンロードする必要はありません。 また、activePageはJQuery mobile 1.4.0で非推奨になりました 。1.5.0から削除されます。 ( 代わりにpagecontainerウィジェットのgetActivePage()メソッドを使用

7
shabang

Androidデバイスで戻るボタンのデフォルトの動作を無効にするには、戻るボタンのイベントハンドラーを登録するだけです。これにより、戻るボタンがアプリケーションを閉じられなくなります。

以下に示すコードは、Framework7専用です

$(document).on('page:beforeinit', function (e) {
if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length > 1 ){
    document.addEventListener( "backbutton", disableBackButton, false );
}
});

function disableBackButton( e ){
    if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length < 3 ){
        document.removeEventListener("backbutton", disableBackButton );
    }

if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length > 1 ){
    $.fn.hyellaIMenu.mainView.router.back();
}
};

デフォルトの戻るボタンの動作をオーバーライドするには、戻るボタンイベントのイベントリスナーを登録します。

注:戻るボタンの動作をオーバーライドするために他のメソッドを呼び出す必要はなくなりました。

https://cordova.Apache.org/docs/en/latest/cordova/events/events.html#backbutton

1
function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    //enter code here enter code heredevice APIs are available
    //enter code here
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown() {
    }
0
dev