PhoneGap如何使用一页应用刷新/重新加载页面
Posted
技术标签:
【中文标题】PhoneGap如何使用一页应用刷新/重新加载页面【英文标题】：PhoneGap how to refresh/reload page using one page app 【发布时间】：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。它将帮助您解决这个问题，并且会以一种非常简洁的方式完成。干杯。 这很有帮助。谢谢你，我会考虑实施这个。 【参考方案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);
...
以上是伪代码。我写它只是为了给你一个想法。
我希望它有所帮助。
【讨论】：
以上是关于PhoneGap如何使用一页应用刷新/重新加载页面的主要内容，如果未能解决你的问题，请参考以下文章
用于加载联系人的Phonegap Jquery Pagination - 当用户到达最后一页时如何动态添加页面？