PhoneGap如何使用一页应用刷新/重新加载页面答案

【问题标题】：PhoneGap how to refresh/reload page using one page appPhoneGap如何使用一页应用刷新/重新加载页面
【发布时间】：2015-06-18 21:50:07
【问题描述】：

目前，我有一个使用车把模板的单页应用程序。它具有由该页面的特定类控制的搜索功能，该页面是 /#page/1 然后当您单击搜索结果时，它会将您带到另一个页面，该页面由名为 /# 的单独外部类控制参展商/432（参展商ID是末尾的数字）。

当我单击返回时，PhoneGap 在 iOS/Safari 中加载搜索页面 (#page/1)，除非我使用 location.reload() 重新加载整个 HTML 页面，否则应用程序将缓存第一个搜索输入，它不会接受新的输入。

我曾尝试使用 location.hash 在哈希末尾添加一个随机字符串，但只有在单击后退按钮时使用 location.reload() 重新加载整个 HTML 页面时才会起作用。

Android/Chrome 没有问题。

关于如何重新加载 HTML 并重新加载位于 #page/1 的搜索页面的任何反馈，我将不胜感激。我曾尝试使用 location.href = url/#page/1，但它会加载没有任何动态数据的页面。

【问题讨论】：

你有没有考虑过使用backbone.js？如果没有，我强烈建议你看看它，尤其是Router。它将帮助您解决这个问题，并且会以一种非常简洁的方式完成。干杯。
这很有帮助。谢谢你，我会考虑实施这个。

标签： javascript jquery html ios cordova

【解决方案1】：

关于这个话题的更多想法：

1) 经验法则是避免重新加载整个 HTML 页面。那么我们怎样才能做到这一点呢？在您的 HTML 页面中，您应该有一个特定的 DIV，您可以根据需要对其进行操作。例如，在/#page/1 上，您应该设置该DIV 的内容，无论#page/1 应该做什么，当用户点击搜索时，搜索内容应该显示在该字段中。（请注意，我说的是 UI 方面的事情。实际搜索可以由其他服务完成，您可以从您的页面对该服务进行 AJAX 调用）。

2) 您将监听各种事件（例如 /#page/1、用户点击搜索按钮、服务器返回搜索结果或服务器返回错误消息等）。根据发生的情况，您应该相应地装饰该 DIV。

示例 HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>

    <title>Example</title>


</head>
<body>
<div id="jQUi">
    <div id="content">
    </div>
</div>

</body>
</html>

在上面的 HTML 中，我使用 id 为“content”的 div。方法如下：

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

...

function letsGetGoing(){
   $('content').html(useTemplateNamed('page1Template'));
   $('.search').on('change', switchToSearch);
}

function switchToSearch(){
   $('content').html(useTemplateNamed('search'));
   $('.submit').on('change', verifyAndSendToServer);
}
...

以上是伪代码。我写它只是为了给你一个想法。

我希望它有所帮助。

【讨论】：