0

Monaca Onsen UIにおいて、ons-dialogを使用してダイアログを表示し、Android版Monacaデバッガーの戻るボタンを押下すると、ログに"Capturing backbutton-handler is failure."と記録され、ダイアログが閉じません。
ちなみに、ons-navigatorをコメントアウトすると正常にダイアログが閉じるようですが、page1-page2の画面遷移は機能しません。

なにかよい方法はないでしょうか?
よろしくお願いします。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
        function showDialog() {
            ons.createDialog("dialog.html").then(
                function(dialog) {
                    dialog.show();
                });
        }
    </script>
</head>
<body>
    <ons-navigator var="myNavigator">
        <ons-page>
            <ons-toolbar>
                <div class="center">Page1</div>
            </ons-toolbar>
            <div style="text-align: center">
                <br>
                <ons-button onclick="showDialog()">Show dialog</ons-button>
                <br>
                <br>
                <ons-button onclick="myNavigator.pushPage('page2.html')">Show page2</ons-button>
            </div>
        </ons-page>

        <ons-template id="page2.html">
            <ons-page var="page2">
                <ons-toolbar>
                    <div class="center">Page2</div>
                </ons-toolbar>
                <div style="text-align: center">
                    <br>
                    <ons-button onclick="myNavigator.popPage()">Show page1</ons-button>
                </div>
            </ons-page>
        </ons-template>

        <ons-template id="dialog.html">
            <ons-dialog var="dialog" cancelable>
                <ons-toolbar fixed-style inline>
                    <div class="center">Dialog</div>
                </ons-toolbar>
                <div style="text-align: center">
                    <br>
                    How are you?
                </div>
            </ons-dialog>
        </ons-template>
    </ons-navigator>
</body>
</html>
1
  • 先日、似たような質問がありまして、そちらの内容ではダイアログ表示中はjavascriptが動かないことが原因のようでした。onsenUIのダイアログがどのような挙動なのかわかりませんが、もしかしたら同じ不具合によるものなのかもしれません。もし同じようにOnsenUIのダイアログ使用中はプログラムが動かないようでしたらCordovaのダイアログを利用してみると良いかもしれません。
    – tutinoco
    Commented 2015年5月2日 20:46

1 件の回答 1

1

自己解決しました。
ダイアログを表示する前に戻るボタンのハンドラーを無効にして、閉じるときに有効に戻します。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
        function showDialog() {
            ons.createDialog("dialog.html").then(
                function(dialog) {
                    myNavigator.getDeviceBackButtonHandler().disable();
                    dialog.show();
                    dialog.on("posthide",
                        function() {
                            myNavigator.getDeviceBackButtonHandler().enable();
                        });
                });
        }
    </script>
</head>
<body>
    <ons-navigator var="myNavigator">
        <ons-page>
            <ons-toolbar>
                <div class="center">Page1</div>
            </ons-toolbar>
            <div style="text-align: center">
                <br>
                <ons-button onclick="showDialog()">Show dialog</ons-button>
                <br>
                <br>
                <ons-button onclick="myNavigator.pushPage('page2.html')">Show page2</ons-button>
            </div>
        </ons-page>

        <ons-template id="page2.html">
            <ons-page var="page2">
                <ons-toolbar>
                    <div class="center">Page2</div>
                </ons-toolbar>
                <div style="text-align: center">
                    <br>
                    <ons-button onclick="myNavigator.popPage()">Show page1</ons-button>
                </div>
            </ons-page>
        </ons-template>

        <ons-template id="dialog.html">
            <ons-dialog var="dialog" cancelable>
                <ons-toolbar fixed-style inline>
                    <div class="center">Dialog</div>
                </ons-toolbar>
                <div style="text-align: center">
                    <br>
                    How are you?
                </div>
            </ons-dialog>
        </ons-template>
    </ons-navigator>
</body>
</html>
2
  • 当時、上記のように回答しましたが、最善策とは思っていません。英語版のstackoverflowなども見ましたが、おそらくons-navigatorons-dialogの組み合わせで発生する可能性が高い気がします。
    – otak-lab
    Commented 2015年12月29日 6:31
  • stackoverflow.com/questions/28766130/…
    – otak-lab
    Commented 2015年12月29日 6:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。