返回按鈕以從javascript模板加載相關的html

Question

我正在為我的應用程序使用JavaScript模板，類似於以下內容：

<script id="my-template" type="text/template">
    <!-- Template here -->
</script>

根據用戶執行的操作將每個此類模板的內容加載到#container div中。

問題是這一切都發生在同一頁面上，因此，當用戶在瀏覽器中單擊后退和前進按鈕時，他們將轉到他們所在的上一個網頁，而不是我的應用程序中的相關屏幕。 有沒有辦法說在加載#my-template-id時是否在我的URL中添加#my-template-id字符串，或者是否知道要轉到哪個頁面/要加載哪個模板？

Answer 1

是的，只需將window.location.hash設置為您要添加的哈希（不包括＃）。 要查看當前的哈希值是什么，只需使用window.location.hash字符串（請參見下面的示例）。 如果要基於哈希更改視圖，也可以偵聽哈希更改。 為此，請使用onhashchange偵聽器。 請注意，當您通過window.location.hash更改哈希時，它將觸發onhashchange。 使用標志將避免混淆，例如

//making hash change
imChangingHash = true;
window.location.hash = 'thisPage';

$(window).on('hashchange',function(){
    if(imChangingHash) {
       imChangingHash = false;
       return;
    }

    //this is now a back/forward button hash change
    console.log('back - forward button moved page to: ' + window.location.hash);
});

Answer 2

您可能想看看歷史記錄js

Answer 3

是的，您需要在應用程序中使用某種路由器，它將為您處理片段。

這是全棧框架中使用的2個示例：

• 在Ember中路由
• 角度布線