jQuery Mobile的后退按钮不与科尔多瓦1.9.0和Android 2.2的工作不与、科尔、按钮、多瓦

2023-09-04 05:08:22 作者:萝莉小熊

我已经花了几个小时,拉我的头发是什么应该是一个简单的问题。

I've spent the last few hours pulling my hair out on what should be a simple problem.

我想利用在jQuery Mobile的的后退按钮功能建立一个网站,其中有导航图标。 (这是我的理解是JQM只需调用window.history.back)

I'm trying to make use of the backButton feature in JQuery mobile to build a site which has navigation icons. (It is my understanding that JQM simply calls window.history.back)

该网站工作完全按预期在桌面浏览器,移动Safari浏览器。该网站没有在Android中的WebView工作。 (值得一提的是,实际的硬件清除按钮可以正常工作,并采取用户返回一个页面,但JQM图标只是强调了,去没有出路的。)

The site works perfectly as expected in a desktop browser, and mobile safari. The site does not work in Android WebView. (It's worth noting that the actual hardware 'clear' button works and takes the user back one page, but the JQM icon just highlights and goes nowhere.)

在某些时候,我说拧了,只是叫window.history.back自己,但这并没有在手机上。

At some point I said screw it, and just called window.history.back myself, but this does nothing on the phone.

下面是该软件:

在jQuery Mobile的1.1.0 在科尔多瓦/ PhoneGap的1.9.0 的Andr​​oid 2.2

我已经看了一些已经问过的问题,但他们没有提供,似乎是有效的在Android上1.1.0 / 1.9.0组合解决方案。我也试着科尔多瓦1.8和1.7,同样的问题。

I've looked at a number of questions already asked, but none of them provided solutions that appear to be valid in the 1.1.0/1.9.0 combination on Android. I've also tried Cordova 1.8 and 1.7, same problem.

下面是一个简单的页面页眉:

Here is a simple page header:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="cordova-1.9.0.js"></script>

下面是一个电话使用JQM内置功能:

Here is a call using the JQM built-in feature:

<a href="index.html" data-icon="back" data-iconpos="notext" data-direction="reverse" data-rel="back" data-transition="slide"></a>

下面是一个电话用我自己的结构:

Here is a call using my own construct:

$(document).ready(function() {
$("#backButton").click(handleBackButton);
});

function handleBackButton() {
    window.history.back(); //Cordova does something funky with this on Android
}

...

<a id="backButton" href="index.html" data-icon="back" data-iconpos="notext" data-direction="reverse" data-transition="slide"></a>

更新

对于前进导航模型的一些示例,请参阅本要点。注意数据AJAX =假去第4页

See this Gist for some examples of the forward navigation model. Notice the data-ajax="false" going to page 4.

更新2 更新要点包括呼叫 navigator.app.backHistory()为科尔多瓦返回。这适用于往返物理页之间,但未能坚持JQM页面的DOM模型。如何统一这两个任何想法? https://gist.github.com/3039722

Update 2 Updated gist to include a call to navigator.app.backHistory() as "Cordova Back". This works to go back and forth between physical pages, but fails to adhere to the JQM page DOM model. Any ideas on how to unify both? https://gist.github.com/3039722

我会preFER不要修改核心Cordova.js code,而是加入一些听众的应用程序,完成这个功能。任何想法?

I would prefer not to modify the core Cordova.js code, but rather add some listener in the app that takes care of this. Any ideas?

感谢

推荐答案

正常工作与科尔多瓦1.9和Android 2.2。使用返回在三个不同的方式:

Works fine with cordova 1.9 and Android 2.2. Using back in three different way:

覆盖后退按钮:

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

function onDeviceReady() {
    document.addEventListener("backbutton", handleBackButton, true);
}

function handleBackButton() {
    console.log("back clicked");
    window.history.back();
}

使用数据相对=回

<a data-rel="back" data-role="button">Rel Back</a>

通过单击处理程序

<a id="forceBack" data-role="button">Force Back</a>

...

$("#forceBack").click(function(){
    history.back();
});

有关完整的源代码 - https://gist.github.com/3037838

For full source - https://gist.github.com/3037838