Перекрывающая Android кнопка "Назад" - это вызов Cordova

Я занимаюсь разработкой гибридного мобильного приложения с использованием JQuery Mobile в оболочке Cordova.

Моя версия Jquery - 2.1.4, а версия Jquery Mobile - 1.4.5. Точно так же моя версия Cordova CLI - 5.3.3.

Мне нужно переопределить поведение кнопки возврата Android, которое убивает активность. Так что я использовал backbutton слушатель кордова. Я называю это событие на deviceready, Но, тем не менее, при касании Android назад, событие, которое я не вызываю, и приложение убивают.

Мой index.html есть,

<html>
<head>

    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">


    <link rel="stylesheet" href="css/jquery.mobile.theme.min.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.icons.min.css"/>

    <link rel="stylesheet" type="text/css" href="libs/JQuery/jquery.mobile.icons-1.4.5.min.css"/>
    <link rel="stylesheet" type="text/css" href="libs/JQuery/jquery.mobile.structure-1.4.5.min.css"/>


    <!-- PAGE/APPLICATION STYLE SHEETS -->

    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script src="libs/JQuery/jquery-2.1.4.min.js"></script>
    <script src="libs/JQuery/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    <title>Override Back</title>

</head>

<body>

<div id="page-index" data-role="page">


    <div role="main">

        <div class="ui-content"></div>

    </div>

</div>


</body>

</html>

И мой index.js есть,

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {

        app.receivedEvent('deviceready');

        document.addEventListener("backbutton", function (e) {
            e.preventDefault();
        }, false );

        app.OrganizationInformation();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        /*var parentElement = document.getElementById(id);
         var listeningElement = parentElement.querySelector('.listening');
         var receivedElement = parentElement.querySelector('.received');

         listeningElement.setAttribute('style', 'display:none;');
         receivedElement.setAttribute('style', 'display:block;');

         console.log('Received Event: ' + id);*/

    }
};

app.initialize();

Плагин, который я использую,

com.phonegap.plugins.facebookconnect 0.4.0 "Facebook Connect"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"
phonegap-plugin-push 1.4.4 "PushPlugin"

Может ли кто-нибудь помочь мне понять, почему этого слушателя не вызывают. Я следил за многими блогами и ответами, но не смог добиться успеха. Спасибо за помощь в Advance.

1 ответ

Решение

@ Джозеф,
У вас есть три вопроса. Один имеет меньший эффект, но однажды наверстает упущенное. Другая проблема - неспособность поймать [backbutton], проще увидеть.

На # 1, e.preventDefault(); ничего не делает Событие НЕ связано с браузером и не подвергается обычному "пузырьковому событию". Смотрите Порядок событий - и более старый пост на тему

На #2 вам нужно подождать, пока deviceready событие срабатывает, прежде чем делать НИЧЕГО. Это включает в себя вызов других библиотек.

Как указано в документации для deviceready событие:

Cordova состоит из двух кодовых баз: родной и JavaScript. Пока загружается собственный код, отображается пользовательское изображение загрузки. Однако JavaScript загружается только после загрузки DOM. Это означает, что веб-приложение может потенциально вызвать функцию JavaScript Cordova до того, как станет доступен соответствующий нативный код.

deviceready событие происходит, когда Cordova полностью загружена. После того, как событие сработало, вы можете безопасно звонить в API Cordova. Приложения обычно прикрепляют прослушиватель событий с document.addEventListener как только DOM документа HTML загрузится.

deviceready Событие ведет себя несколько иначе, чем у других. Любой обработчик событий, зарегистрированный после deviceready У событий пожара функция обратного вызова вызывается немедленно.

Я настоятельно призываю вас реорганизовать свой код.

На #3 в вашем коде есть распространенная ошибка. this в вашем коде, когда вызывается событие, выходит за рамки. Это означает, что следующий код не работает:

bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},

Есть несколько способов исправить это.

  1. Сделать onDeviceReady() функция глобальная, потому что это то, что ваш код вызывает.
  2. Сделайте прямой вызов в библиотеку, как если бы он был внешним по отношению к библиотеке.

Как это:

bindEvents: function() {
    document.addEventListener('deviceready', app.onDeviceReady, false);
},

Чтобы было ясно, когда this.onDeviceReady() наконец-то сделано, оно "выходит за рамки" и глобально.

Для более подробного объяснения читайте следующий пост SO:
PhoneGap IOS - настройка плагинов

Удачи

Другие вопросы по тегам