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

Question

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

我将 DOM 动态更改为 JavaScript，当我尝试将 return 更改为 "previous page" 时出现问题，我使用了几种方法，例如：

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

此解决方案适用于第一个 "pages" 它们随哈希一起更改，但在某些时候我不会更改哈希，但我只更改 DOM，然后单击BackButton return远远落后。

另一件事是我尝试用 jquery clone (); 克隆 "previous page" 但是有了这个，我只能退一步一次，我需要一些东西来将所有内容（历史）保存在内存中。

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

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

Answer 1

使用 jQuery 的 clone() 并将结果推送到数组中也许是您可以使用的解决方案。作为用户 'navigates' 您的应用程序，您捕获特定的 DOM 节点，它是您的 "page" 的父节点，并在整个应用程序中保持静态。

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

只要用户 'navigates' 在您的应用中，您就可以调用 appHistory 函数，将相关的 DOM 元素复制并推送到 navHistory 数组中。

要检索 "page" 内容，只需访问相关数组条目和 remove/replace 父容器的当前子项：

 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）

Back button (history) for Dynamic Document Object Model (DOM)

javascript

jquery

html

cordova

browser-history