Question

目前，我有一个使用把手模板的单页应用。它有一个由该页面的特定类控制的搜索功能，页面为/＃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，但它会加载没有动态数据的页面。

Answer 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＆＃34; content＆＃34;的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如何使用一个页面应用程序刷新/重新加载页面

1 个答案: