Cordova backbutton Event Never Firing

前端 未结 3 1544
闹比i
闹比i 2021-01-24 15:08

I am overriding my device back button per the documentation that I attach event listener to backbutton with argument of false after the devicerea

相关标签:
3条回答
  • 2021-01-24 15:29

    Try This

        $(document).ready(function () {
    
            document.addEventListener("backbutton", onBackKeyDown, false);
        });
        function onBackKeyDown() {
            alert('ok backey downed');
        }
    

    Make sure these files are link in your page

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>
    
    0 讨论(0)
  • 2021-01-24 15:32

    The issue was I was importing cordova.js in an iframe even though it was already in the parent window scope. I didn't know it would break it and thought I had to import cordova.js in the iframe. Removing the from the iframe fixed it.

    0 讨论(0)
  • 2021-01-24 15:34

    Try using the normal way of using cordova events.

    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    
    // Handle the back button
    //
    function onBackKeyDown() {
        //Add your back button implementation.
    }
    

    official documentation here

    Modified code

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/html">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Tigo SMART Installation</title>
    <script type="text/javascript" src="apps/installation/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="apps/installation/js/index.js"></script>
    <script type="text/javascript" src="apps/installation/js/fastclick.min.js"></script>
    <script type="text/javascript" src="apps/installation/js/sha512.js"></script>
    <script type="text/javascript" src="bower_components/uri.js/src/URI.min.js"></script>
    <script type="text/javascript" src="js/extlogin.js"></script>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="apps/installation/css/index.css" />
    
    <script type="text/javascript" charset="utf-8">
    
    $(document).ready(function(){
        //mycode
        console.log('ok loaded');
        document.addEventListener("deviceready", onDeviceReady, false);
    });
    // Wait for device API libraries to load
    //
    /*function onLoad() {
    console.warn('ok loaded')
    document.addEventListener("deviceready", onDeviceReady, false);
    }
    */
    
    // device APIs are available
    //
    function onDeviceReady() {
    // Register the event listener
    console.log('ok device ready');
    document.addEventListener("backbutton", onBackKeyDown, false);
    }
    
    // Handle the back button
    //
    function onBackKeyDown() {
    console.log('ok backey downed');
    }
    
    </script>
    </head>
    <body>
    
    <div ng-view></div>
    <script data-main="bin/SmartApp" src="bower_components/requirejs/require.min.js"></script>
    
    <img style="opacity:0;visibility:hidden;" class="loader" src="img/loader.gif" />
    </body>
    </html>
    

    Few reference links here and here

    0 讨论(0)
提交回复
热议问题