保持網頁的相同狀態

所以我製作了一個網絡應用程序，下圖。該應用程序有幾個選項卡，其中包含不同的信息，如圖形和指標。該應用程序使用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' - 現在修復我的答案。 –

保持網頁的相同狀態

回答

相關問題