jquery mobile $.mobile.changePage() Windows phone 8 不工作 Cordova/PhoneGap答案

【问题标题】：jquery mobile $.mobile.changePage() Windows phone 8 not working Cordova/PhoneGapjquery mobile $.mobile.changePage() Windows phone 8 不工作 Cordova/PhoneGap
【发布时间】：2013-09-25 15:49:20
【问题描述】：

代码索引.html

<div data-role="page" id="index">
    <div data-role="header">
        <h3>
            First Page
        </h3>
    </div>
    <div id="data">

    </div>
    <div data-role="content">
        <button data-role="button" id="changePage">Pass parameters with changePage function</button>
        <a href="second.html"  data-role="button">Or through a basic link</a>
    </div>
</div>

还有我的js文件

 $(document).on('tap', "#changePage",function () {     
              $.mobile.changePage('second.html', { reloadPage : false, changeHash : true });
    });

还有第二个.html

<div data-role="page" id="second">
    <div data-role="header">
        <h3>
            Second Page
        </h3>
    </div>
    <div data-role="content">
<div id="data"></div>
    <div data-role="button" id="clickBtn">click me</div>
    <div data-role="button" id="paqeBtn">change Page</div>
  </div>
 </div>

所有这些文件都使用 PhoneGap/Cordova 打包并在设备上运行。

基本上，我试图通过绑定到我的 JS 文件中的 ID #changePage 在点击事件上使用 $.mobile.changePage("second.html") 将 second.html 加载到 index.html 页面中。

这在

中运行良好

Android 手机
Internet Explorer 9 和 10
Webkit 浏览器

但问题是上面的代码在 Windows Phone 8 上不起作用

我正在测试的设备是 Nokia Lumia 920 使用的jquery框架是

jquery.mobile-1.3.2.js
jquery-2.0.3.js

我还尝试使用 $.ajax 作为 dataType:"html" 和 $.load 函数，所有这些在上面提到的其他环境中都可以正常工作，除了 Window Phone 8（上面提到的设备）

我也关注了这个

StackOverflow solution for Window phones

没有用！！！！！！

【问题讨论】：

使用 jquery 1.9.1 而不是 2.0.3。另外，使用vclick 而不是tap，它比点击更快。
没用...奥马尔还是不行！！！
github.com/jquery/jquery-mobile/pull/5235
嗨 Omar，我根据 jquery mobile 中的拉取请求差异进行了修改。仍然没有工作...您可以看到链接 “Windows 手机的 StackOverflow 解决方案” 我已经在我的问题中发布了相同的链接。 --> stackoverflow.com/a/17831415/1848109
嗨，奥马尔，谢谢……它成功了

标签： javascript jquery jquery-mobile cordova windows-phone-8

【解决方案1】：

var url = window.location.href;
                            url = url.split('#').pop().split('?').pop();
                            url = url.replace(url.substring(url.lastIndexOf('/') + 1),"second.html");
                            $.mobile.changePage(url, { reloadPage : false, changeHash : false });

我使用了 OMAR jquery 1.9.1 建议的 Jquery。并且仍然需要在将 URL 传递到移动更改页面之前对其进行解析。上面的代码运行良好。

上面的代码仍然不能用于 Jquery 2.0+，请改用 1.9.x 版本！！ -

我的建议是不要在 Windows Phone 上使用 jquery 2.0+

它不适用于 Window Phone 的包括 Ajax 调用，如 $.ajax、$.load、$.get

【讨论】：

【解决方案2】：

前几天我也遇到了同样的问题。 $.mobile.changePage('second.html', { reloadPage : false, changeHash : true });中的changeHash必须设置为false

在较旧的 android 设备上也存在类似问题。

【讨论】：

【解决方案3】：

@Nirus 的解决方案在以下环境中非常有效：

jQuery 1.9.1
jQM 1.3.2
Phonegap 3.5.0-0.21.14
Windows Phone 8.1

我希望 Phonegap 或 jQM 的团队能在不久的将来解决这个问题。

【讨论】：

我的解决方案在 1.10.x 之前一直有效，永远不要使用 Jquery 2.0

【解决方案4】：

我刚开始的工作有点类似于@conor 的答案。也许尝试使用页面 css id 作为选择器。

使用 jquery mobile 1.3

jQuery:

$(document).ready(function () {

              $(".myinfo").on("tap", function(){
                                 $.mobile.changePage("#MyInfo", { transition: "none", reverse: false, changeHash: true});
                                   });

HTML：

 <div data-role="page" id="MyInfo">
        <div data-role="header" data-theme="e">

链接：

     <li><a href="#" data-icon="custom" class="myinfo">My Info</a></li>

【讨论】：