保持网页的相同状态

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

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

     $(function() { 

     }); 

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

     </script>

与此唯一的问题是，当，例如，到达的index.html 60秒，载荷index2.html它返回到第一个选项卡（摘要），是无论如何，即使加载了不同的文档，仍然保持在同一个标签上？

enter image description here

来源

2013-05-31 Buzz Lightyear

你可以使用'.ajax（）'加载内容到Metrics Div中，而不是重新加载整个页面吗？ –

您使用的是JQuery UI选项卡吗？如果是这样，你可以设置一个cookie来坚持选定的选项卡（不可否认，我发现它有点bug）。如果你不是，你将不得不手动设置和阅读你自己的cookie，但它不应该太难。您也可以使用querystring参数重定向到新的index.html，并选择选项卡，然后在每次页面加载时读取它... – Mansfield

@Mansfield'您也可以使用querystring参数重定向到新的index.html选定的选项卡，然后在每次页面加载时读取“ - 这听起来像是一个有趣的解决方案。你有可能发布一个例子吗？ –

由于@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-31 13:12:47

看起来像完美的解决方案，我的链接并不追加到URL！ –

这可能是因为您的选项卡的事件处理程序包含'return false'或'e.preventDefault（）'。因此，您可能需要为选项卡编写自己的Javascript代码或对其进行修改，使其不会这样做。如果您打算使用不同的标签脚本，则可以使用Twitter Bootstrap中的标签控件，该标签旨在将哈希值附加到URL。 –

它应该是'window.location.hash'，而不是'window.hash' - 现在修复我的答案。 –

保持网页的相同状态

回答

相关问题