在 phonegap 应用程序的退出(硬件按钮)上显示确认框

Posted

技术标签:

【中文标题】在 phonegap 应用程序的退出(硬件按钮)上显示确认框【英文标题】:Show confirmation box on exit(hardware button) in phonegap app 【发布时间】:2017-04-25 17:11:13 【问题描述】:

我正在 phonegap 上开发 iframe android 应用程序。我使用 phonegap build 在线编译我的代码。一天,我正在寻找一个弹出确认框的代码,显示“你想退出吗?”是|不是??我用这些代码出来了。但它不起作用。你能帮忙吗?我们必须在 config.xml 中添加任何插件吗?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <script type="text/javascript" charset="utf-8">

            document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() 
    document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button

function onBackKeyDown(e) 
    e.preventDefault();
    navigator.notification.confirm("Are you sure you want to exit ?", onConfirm, "Confirmation", "Yes,No"); 
    // Prompt the user with the choice

function onConfirm(button) 
    if(button==2)//If User selected No, then we just do nothing
        return;
    else
        navigator.app.exitApp();// Otherwise we quit the app.
    

        </script>
        <style type="text/css">
            body, html
            
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            
            #content
            
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            
        </style>

    </head>
    <body>
        <div id="content">
            <iframe   frameborder="0" src="#" />
        </div>
    </body>
</html>

【问题讨论】:

【参考方案1】:

对于 Apache Cordova / Phonegap,您不需要任何用于本地事件的插件(例如 devicereadybackbutton),但您需要 cordova-plugin-dialogs plug-in 来显示本地警报。

所以,我猜你的问题不是捕捉事件,而是显示警报。

请尝试打印一个经典的window.alert(),以验证事件是否被捕获,之后您可以尝试使用对话框插件。

【讨论】:

【参考方案2】:

我认为您的代码中有两个变化

首先,如果您还没有添加cordova.js,请将其添加到文件的标题部分

其次,在调用后退按钮事件之前你需要给一些时间来完成页面的加载,否则它不会理解后退按钮点击事件

所以在这里我只是为你的函数添加了超时

function onDeviceReady() 
    setTimeout(function()
        document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button
    ,500);

这也是我的工作代码。

$(document).ready(function()
    setTimeout(function()
        document.addEventListener('backbutton', function(e)    
            if (confirm("Are you sure you want to exit app?"))
            
                navigator.app.exitApp();
               
        , false);
    , 500);

【讨论】:

【参考方案3】:

这是我按下后退按钮的工作代码,它会要求退出

document.addEventListener("backbutton", function (e) 
    e.preventDefault();
    navigator.notification.confirm("Are you sure want to exit from App?", onConfirmExit, "Confirmation", "Yes,No");
, false);


function onConfirmExit(button) 
    if (button == 2)  //If User select a No, then return back;
        return;
     else 
        navigator.app.exitApp(); // If user select a Yes, quit from the app.
    

【讨论】:

以上是关于在 phonegap 应用程序的退出(硬件按钮)上显示确认框的主要内容,如果未能解决你的问题,请参考以下文章

如何处理phonegap应用程序中iphone上丢失的硬件后退按钮?

Phonegap-2.10:硬件后退按钮无法正常工作

在Phonegap / iOS中按下主页按钮时访问localStorage

播放后退出视频问题(ios phonegap 应用程序)

如何在一个页面上禁用 Android 后退按钮并在所有其他页面上更改为退出按钮

退出phonegap/返回Android