覆盖 Android Backbutton 行为仅适用于具有 PhoneGap 的第一页

Posted

技术标签:

【中文标题】覆盖 Android Backbutton 行为仅适用于具有 PhoneGap 的第一页【英文标题】:Override Android Backbutton behavior only works on the first page with PhoneGap 【发布时间】:2012-03-26 18:41:06 【问题描述】:

我正在使用 PhoneGap 1.5.0、jQuery 1.7.1 和 jQuery mobile 1.0.1 并尝试覆盖 android 中的后退按钮,如 here 或 here 所述。

document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap loaded

function onDeviceReady() 
console.log("PhoneGap Ready!");
// waiting for button
document.addEventListener("backbutton", handleBackButton, false);


// handle the back button
function handleBackButton() 
console.log("Back Button Pressed!");
navigator.app.exitApp();

但它只适用于我的应用程序的第一页。切换到不同的页面后,后退按钮什么也不做。该应用程序由这样的标签视图组成:

<body>
<div data-role="page" id="pilotTab">
    <div data-role="header">
        <h1>Pilot</h1>
    </div>
    <div data-role="content" id="pilotContent">
content be here ;)
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="pilotTab.html" data-transition="none">Lotse</a>
                </li>
                <li><a href="bookingTab.html" data-transition="none">Verkehr</a>
                </li>
                <li><a href="mainListTab.html" data-transition="none">B&ouml;rt</a>
                </li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>
    <!-- /footer -->
</div>

这是一个愚蠢的错误,还是我必须考虑一些特别的事情才能使其正常工作?提前致谢。

【问题讨论】:

代码对我来说可以正常工作。当您单击其他页面上的返回按钮时,您是否看到日志消息?? 遗憾的是,除了第一个页面之外,我在其他页面的日志文件中没有得到任何输出 :( 感谢帮助 :) 我已将我的测试代码放在一个 gist gist.github.com/2006096 您可以查看并检查是否缺少任何内容 您是否将所需的javascript文件放在/js目录中。没有它是行不通的 我使用的是 1.4。我检查了新版本(1.5),似乎后退按钮功能被破坏了。 【参考方案1】:

我浏览了新的 Phonegap 源代码并进行了以下更改以使后退按钮起作用。

HTML测试代码

<script type="text/javascript">
    $("#home").click(function()
        $.mobile.changePage("home.html");
    );

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

    function onDeviceReady() 
        console.log("PhoneGap Ready!");
    

    function handleBackButton() 
        console.log("Back Button Pressed!");
        navigator.app.exitApp();
    
</script>

将以下代码放入document.addEventListenercordova-1.5.0.jselse块中,在第507行之后

if (e === 'backbutton') 
    var exec = require('cordova/exec')
    exec(null, null, "App", "overrideBackbutton", [true]);

将以下代码放入cordova定义中cordova-1.5.0.jsfireDocumentEvent方法中,在第592行之后

if(type == "backbutton")
    var e = document.createEvent('Events');
    e.initEvent(type);
    if (data) 
        for (var i in data) 
            e[i] = data[i];
        
    
    document.dispatchEvent(e);
    return;

我已将整个 cordova-1.5.0.js 放在这个 gist 中,并更新了代码 https://gist.github.com/2020325

虽然它对我有用,但它仍然可能需要一些更改才能在所有可能的情况下工作。

编辑

将以下代码放入cordova定义的cordova-1.5.0.jsfireDocumentEvent方法中,在第592行之后

if(type == "backbutton" || type == "menubutton" || type == "searchbutton")
        var e = document.createEvent('Events');
        e.initEvent(type);
        if (data) 
            for (var i in data) 
                e[i] = data[i];
            
        
        document.dispatchEvent(e);
        return;
    

【讨论】:

就像一个魅力。非常感谢! :) 通过这些更改在 ios 下启动应用程序,弹出“idllbackbutton,app0,true”启动。但正如你所说,一些修改应该可以摆脱它。您是否偶然知道,我如何在 phonegap 源代码中创建诸如“仅在 ios 上执行”之类的内容? 我会在 ios 中签入,但通常会在 JS 和原生库版本不同时弹出。你确定iOS项目使用的是Phonegap 1.5原生库 其实 backbutton 事件不应该在 iOS 上触发 cordova android 和 iOS js 文件之间存在代码差异,因此您可能不想为两个项目复制相同的 js 文件。 啊,我明白了,这并不是我对 phoneGap 之类的“一次编写,到处运行”的期望。但好吧......再次感谢。【参考方案2】:

Bryce Curtis 建议在 that page 上更改线路:

channel.onNativeReady.subscribe(_self.boot);

到:

channel.onNativeReady.subscribeOnce(_self.boot);

在文件末尾。

这似乎对我有用,并修复了后退按钮、菜单按钮和搜索按钮!

【讨论】:

嗨,这解决了我的菜单按钮点击问题。但我在控制台上收到以下错误消息。 “未捕获的类型错误:对象 [object Object] 在 file:///android_asset/www/thirdparty/cordova-2.4.0.js:6524 处没有方法 'subscribeOnce'”请对此有所了解!也可以忽略此错误而没有任何副作用吗?【参考方案3】:

@dhaval : 我对 Android 中的 cordova-1.5.0.js 做了如下改动。

我没有处理后退按钮的页面工作正常,但我处理后退按钮的地方不工作。

它甚至无法选择功能

function handleBackButton() 

  console.log("Back Button Pressed!");
    navigator.app.exitApp();

【讨论】:

使用cordova 2.0,后退按钮处理工作如所述,无需在框架中进行任何必要的更改(至少对我而言)。我是这样做的: document.addEventListener("deviceready", onDeviceReady, false);函数 onDeviceReady() document.addEventListener("backbutton", handleBackButton, false); function handleBackButton() yourBackButtonHandlingFunction(); (顺便说一句:有什么方法可以在 cmets 中获得像样的格式?:/) @Redfox 您可以使用反引号 (`) 进行代码格式化,like this

以上是关于覆盖 Android Backbutton 行为仅适用于具有 PhoneGap 的第一页的主要内容,如果未能解决你的问题,请参考以下文章

Swift getter 覆盖非计算变量

覆盖 Android 中的 Activity/Task 行为

Android Lint:如何忽略故意仅覆盖某些默认翻译的区域语言环境字符串文件中缺少的翻译警告?

在移动设备上选择文本时覆盖本机行为

如何覆盖NullReferenceException行为以获得更好的信息性错误?

通知示例仅显示在 Android 上收到的最后一个