保持网页的相同状态

Question

所以我制作了一个网络应用程序，如下图所示。该应用程序有几个选项卡，其中包含不同的信息，如图形和指标。该应用程序是使用HTML＆amp; Javascript并且是一个文档。我已经实现了一个Javascript计时器，每隔60秒，加载完全相同的webapp但在不同的HTML文档中，只是为图表的不同值等。这只是为了让我很容易，因为我没有很多现在的时间。因此，每隔一分钟，Web应用程序图表将刷新来自不同文档的不同数据。所以基本上我有index.html，index2.html和index3.html，都使用相同的代码/ webapp，但在图表中加载不同的值。下面是计时器的代码：

<script type="text/javascript">
         var myVar=setInterval(function(){myTimer()},60000);

         $(function () {

         });

         function myTimer()
            {
            window.location.replace("index2.html");
            }

         </script>

唯一的问题是，例如，当index.html达到60秒并加载index2.html它会回到第一个标签（摘要）时，无论如何都要保留在同一个标​​签上，即使它是加载不同的文件？

Answer 1

正如@JoshuaM指出的那样，最好的解决方案是使用AJAX，但是由于你似乎对你当前的方法感到满意，你可以在URL上使用哈希来指示哪个选项卡应该是活动的，例如：

index.html#/metrics
index2.html#/metrics
etc...

（我喜欢为这类事情添加一个前导斜杠，以区别于常规锚链接或意外跳转到具有相同ID的元素，但在这样的简单情况下，index.html#metrics可以同样工作）。

“指标”标签的链接如下所示：

<a href="#/metrics">Metrics</a>

（保留您在其上设置的任何Javascript以使标签生效。）

然后，在加载下一页时，将哈希附加到它：

var nextPage = 'index2.html';
window.location = nextPage + window.location.hash;

最后，在第一次加载页面时检查哈希：

var hash = window.location.hash;
//hashes indicating which tab to make active should begin with a slash, e.g. #/metrics
if (hash[1]=='/') {
    var currentTab = hash.substr(2);
    //activate current tab...
}

另一种替代方法是使用iframe作为图形内容，但这可能需要对代码进行更多的重新处理。