jQuery mobile：使用phonegap在Windows手机上链接下一页不起作用答案

【问题标题】：jQuery mobile : Linking next page doesn't work on Windows phone using phonegapjQuery mobile：使用phonegap在Windows手机上链接下一页不起作用
【发布时间】：2014-01-06 15:56:03
【问题描述】：

目前我正在使用 phonegap 和 jQuery Mobile 构建一个应用程序

我已经完成了在 iOS 和 Android 上完美运行的版本。但是相同的代码在 windows phone 上不起作用。当我点击任何链接时，没有加载到相应页面的重定向。它仍然显示“错误页面正在加载”。

<!DOCTYPE html>

测试

<div  id="bg">
    <div style="padding-top:14%;width:100%;text-align:center">
        <div style="float:left;text-align:center;width:50%"><a href="list.html?qs=1"><img src="pics/btn_1.png" /></a></div>
        <div style="float:left;text-align:center;width:50%"><a href="list.html?qs=2"><img src="pics/btn_2.png" /></a></div>
    </div>

    <div style="clear:both"></div>
</div>

</div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

在这方面需要帮助。

【问题讨论】：

标签： windows-phone-7 jquery-mobile cordova

【解决方案1】：

解决方案

将data-ajax=false 或rel=external 添加到您的anchor 标签。但是，如果你这样做，你将失去过渡。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。如果需要，如果传入设备是 Windows 手机，您可以启用此功能：

$(document).on("mobileinit", function () {
    //check for windows phone
    $.mobile.ajaxEnabled = false;
});

否则，将您的代码制作成单页模板。这是一个演示：http://jsfiddle.net/hungerpain/aYW2f/

编辑

目前jQM doesn't support query string parameters。您可以使用localStorage API 将参数存储在缓存中并稍后检索它们。假设你想从这里转到index.html：

<a href="list.html?qs=2" rel="external"><img src="pics/btn_2.png" /></a>

你会为它添加一个点击事件：

$(document).on("click", "a", function() {
  //gets qs=2 and changes it into ["qs",2]
  var query = this.href.split["?"][2].split["="];
  //construct an array out of that
  var paramString = { query[0]: query[1]} ;
  //store it in localstorage
  locaStorage["query"] = JSON.stringify(paramString);
  //continue redirection
  return true;
});

在你的index.html：

$(document).on("pageinit", "[data-role=page]", function() {
      //store it in localstorage
      var params = JSON.parse(locaStorage["query"]);
      //now params will contain { "qs" : 2 }
      //you could access "2" by params["qs"]
});

More info about localStorage here.

【讨论】：

谢谢..如何制作单页模板？如果您分享任何参考链接会很棒
:) 很好..如果您认为这个答案将帮助未来的访问者请支持它:)
当然..我已经更新了代码。请看一下。我需要传递查询字符串值才能根据查询字符串值显示单独的内容。我怎样才能做到这一点？

【解决方案2】：

我也遇到了同样的问题，最后用下面的代码解决了

我的 html 页面是 index.html，我在一个 html 中编写所有代码

之前

$.mobile.changePage( "#second", {});

之后

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

假设您有多个 html 页面，那么您可以使用多个页面到另一个页面

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 });

【讨论】：

【解决方案3】：

在使用 windows phone 7 的 phonegap 的 Web 应用程序中不支持查询字符串。

但是我们可以替换 ?用 # 或其他任何东西来传递数据，

喜欢转换

Sample.html?id=12312

到

Sample.html#id=12312

【讨论】：