在我們的實(shí)際開(kāi)發(fā)中,我們?yōu)榱藘?yōu)化在打開(kāi)頁(yè)面之后在我們完成內(nèi)容填寫(xiě)之后沒(méi)有保存在退出之后數(shù)據(jù)為空,那么下面就為大家講講“pushstate如何使用監(jiān)聽(tīng)和返回事件?”這個(gè)問(wèn)題吧!
pushstate與監(jiān)聽(tīng)瀏覽器返回解決的問(wèn)題
因此可以使用pushstate方法,不刷新瀏覽器改變url 當(dāng)你再返回時(shí)候就會(huì)返回到這個(gè)A頁(yè)面而不是上上個(gè)頁(yè)面。但此時(shí)還需要監(jiān)聽(tīng)返回的按鈕,進(jìn)而控制組件的顯示與隱藏。這點(diǎn)也至關(guān)重要。不然組件不隱藏,也就相當(dāng)于沒(méi)效果。
pushState
使用方法(一般情況)
function pushHistory() {
var state = { title: "title", url: "#" };
window.history.pushState(state, "title", "#"); }
參數(shù)說(shuō)明:
pushState() 帶有三個(gè)參數(shù):state是js對(duì)象,title是個(gè)標(biāo)題(現(xiàn)在被忽略了),以及一個(gè)可選的URL地址。
關(guān)于pushstate的說(shuō)明
瀏覽器不會(huì)向服務(wù)端請(qǐng)求數(shù)據(jù),直接改變url地址,可以類(lèi)似的理解為變相版的hash;但不像hash一樣,瀏覽器會(huì)記錄pushState的歷史記錄,可以使用瀏覽器的前進(jìn)、后退功能作用。
監(jiān)聽(tīng)瀏覽器返回按鈕
window.addEventListener("popstate", function(e) { console.log(e); alert("我監(jiān)聽(tīng)到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能 }, false);
轉(zhuǎn)自:https://segmentfault.com/a/1190000022696823
以上就是有關(guān)于“pushstate如何使用監(jiān)聽(tīng)和返回事件?”這個(gè)問(wèn)題的解決方法!那么到此這篇文章就介紹到這了,更多與html5相關(guān)的內(nèi)容都可以在W3Cschool搜索學(xué)習(xí)!