如何使用JavaScript管理後退按鈕

我有一個單頁面網站使用<div>標籤移動，隱藏，等..我需要能夠有後退按鈕控制運行我的div功能。如何使用JavaScript管理後退按鈕

我一直在做我的研究沒有如何做到這一點，並遇到this文章。

我已將此代碼包含在我的網站中，並且每次用戶單擊具有附加的doclick（）函數的按鈕時，它都可用於更新URL並增加hashtag數字。

var times = 0; 
function doclick() { 
    times++; 
    location.hash = times; 
} 
window.onhashchange = function() {  
    if (location.hash.length > 0) {   
     times = parseInt(location.hash.replace('#',''),10);  
    } else { 
     times = 0; 
    } 
    document.getElementById('message').innerHTML =  
     'Recorded <b>' + times + '</b> clicks'; 
}

我有我的網站上），4個按鈕調用doclick（我沒有足夠的經驗來看看怎麼做我需要什麼儘管

<div onClick="edit(); doclick()">Editorial</div> 
<div onClick="vfx(); doclick()">VFX</div> 
<div onClick="audio(); doclick()">Audio</div> 
<div onClick="color(); doclick()">Color</div>

。

既然我正在將每個點擊存儲在一個新的散列中，那麼如何使用該數據來調用我已經設置的特定函數？或者，也許有更好的方法來調整，而不是僅僅添加＃1，＃2等。URL將反映頁面名稱。像www.site.com/vfx - 我可以使用這些信息來調用一個函數。

實例應用：

我們開始主頁www.site.com
用戶在點擊寫在前面BTN - div的轉出，上編輯，網址讀取www.site.com/editorial
用戶點擊VFX BTN - divs切換，現在在VFX頁面上。 URL讀取www.site.com/vfx
用戶點擊後退按鈕 - 現在調用相同的功能編輯（），並返回到www.site.com/editorial

來源

2017-10-05 NewCodeMan

我認爲這應該有所幫助 - https://stackoverflow.com/questions/1844491/截距荷蘭國際集團，號召性的，後退按鈕功能於我，Ajax的應用程序 - 我 - 不要想學就到 – sahutchi

隨着HTML5，有一個歷史API ，它允許您更改瀏覽器的狀態，並更改URL路徑名，但不重新加載頁面，當單擊按鈕forward或backward時，頁面將會像您的頁面一樣重新加載，但它是不。

請檢查下面的例子：

var target = document.querySelector(".content"); 

//Initiate the state. 
history.replaceState({ 
    title: document.title, 
    content: target.innerHTML, 
}, document.title); 

//When the buttons forward or backward is clicked, change the state of 
//browser, and replace the target's content. 
window.onpopstate = function(e) { 
    if (e.state) { 
     document.title = e.state.title; 
     target.innerHTML = e.state.content; 
    } 
}; 

//Assuming you're using Ajax to load remote data. 
$.get("/something", function(data){ 
    history.pushState({ 
     title: data.title, 
     content: data.content, 
    }, data.title, data.url); 
    document.title = data.title; 
    target.innerHTML = data.content; 
});

如果你仍然不明白我在說什麼，請查看我最近的項目的網站，但它使用的WebSocket加載遠程數據，你可以看到當你點擊文件的項目，頁面將不會被重新加載，但內容和URL將被修改。

http://cool-node.hyurl.com:3000/Docs

爲方便起見，我裹這個API一個插件，你可以在

https://github.com/Hyurl/soft-loader

檢查出來或者，順便說一句，你實際上並不需要重新加載遠程數據，這只是一個例子，你可以存儲你想要的任何地方，在<body>等遠程或本地內容

來源

2017-10-05 05:17:01

如何使用JavaScript管理後退按鈕

回答

相關問題