Question

我正在制作一个与Cordova / Phonegap一起使用的小型网络应用程序，因此我需要可以在任何WebView中实现的解决方案，主要是Android和iOS，还有一些BlackBerry OS 10 ......

我使用JavaScript动态更改DOM，当我尝试返回“上一页”时出现问题，我使用了几个东西，例如：

if (typeof (navigator.app) !== "undefined")
{
    navigator.app.backHistory();
}
else
{
    window.history.back();
}

此解决方案适用于使用哈希值更改的第一个“页面”，但在某些时候我不会更改哈希值，但只有我更改了DOM，然后通过单击BackButton它会远远落后。

另一件事是我尝试使用jquery clone ();克隆“上一页”但是这样，我只能退一步，我需要一些东西来保存记忆中的所有内容。

你建议我做什么？是否有一个不严格使用HTML5的插件？（因为较旧的WebVies Android和iOS不支持某些功能）。

感谢阅读，请原谅我的英语不好。

Answer 1

使用jQuery的clone（）并将结果推送到数组中可能是您可以使用的解决方案。当用户“导航”您的应用时，您捕获特定的DOM节点，该节点是您“页面”的父节点，并在整个应用中保持静态。

 <html>
  <head>
  <title>Your App</title> 
  <script></script>
  </head>
  <body>
    <header>Your header here</header>
    <div id='container'>
          <-- the content you want to save in history here  -->
    </div>
    <footer>Your footer here</footer>

使用这样一个简单的脚本：

  var navHistory = []

  function appHistory(){
     var cloned = $('#container').clone();
     navHistory.push(cloned);
 }

每当用户在您的应用中“导航”时，您都可以调用appHistory函数，将相关的DOM元素复制并推送到navHistory数组中。

要检索“页面”内容，只需访问相关的数组条目并删除/替换父容器的当前子项：

 function navBackOne(){
     //assuming you write the contents of the last page only when you
     //navigate away from it...
     var i = navHistory.length - 1;
     $('#container').children().remove()
     $(navHistory[i]).appendTo('#container')
     navHistory.pop();  
 }

动态文档对象模型（DOM）的后退按钮（历史记录）

1 个答案: