0

所以我制作了一个网络应用程序，如下图。该应用程序有几个选项卡，其中包含不同的信息，例如图表和指标。该应用程序是使用 HTML 和 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 时，它会返回到第一个选项卡（摘要），即使它正在加载不同的选项卡，是否仍然保留在同一个选项卡上文档？

在此处输入图像描述

4

1 回答 1

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，但这可能需要对代码进行更多的修改。

于 2013-05-31T13:12:47.770 回答