淺談通過(guò)JS攔截 pushState和replaceState事件
更新時(shí)間：2017年07月21日 08:01:53 投稿：jingxian
下面小編就為大家?guī)?lái)一篇淺談通過(guò)JS攔截 pushState和replaceState事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
history.pushState 和 history.replaceState 可以在不刷新當(dāng)前頁(yè)面的情況下更改URL，但是這樣就無(wú)法獲取通過(guò)AJAX得到的新頁(yè)面的內(nèi)容了。
雖然各種HTML5文檔說(shuō) window.onpopstate 事件可以攔截 pushState 的消息，但在實(shí)際的測(cè)試中， onpopstate 根本沒(méi)有任何作用，無(wú)法攔截 pushState 的消息。
經(jīng)過(guò)Google一番，才找到了正確獲取 pushState 事件的代碼
https://stackoverflow.com/a/25673911
// Add this:
var _wr = function(type) {
var orig = history[type];
return function() {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');
// Use it like this:
window.addEventListener('pushState', function(e) {
console.warn('THEY DID IT AGAIN!');
});
window.addEventListener('replaceState', function(e) {
console.warn('THEY DID IT AGAIN!');
});
這段代碼改寫了 history 中原來(lái)的函數(shù)，然后自己激活一個(gè)事件
這樣就可以解決 pushState 無(wú)法激活事件的問(wèn)題了
另外記得最好將這段代碼放在文檔加載前執(zhí)行
以上這篇淺談通過(guò)JS攔截 pushState和replaceState事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
javascript ImgBox透明遮罩層背景圖片展示,就是增加了一個(gè)關(guān)閉按鈕，比較實(shí)用。2009-07-07
詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
canvas可以在頁(yè)面中設(shè)定一個(gè)區(qū)域，再利用JavaScript動(dòng)態(tài)地繪制圖像。本文將利用canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試2022-02-02
JS localStorage實(shí)現(xiàn)本地緩存的方法
JS localStorage實(shí)現(xiàn)本地緩存的方法，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了JS實(shí)現(xiàn)圖片局部放大或縮小的方法,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
JS利用ffmpeg和sharp玩轉(zhuǎn)音視頻和圖片
ffmpeg?是一個(gè)非常流行的開源軟件套件,用于處理音頻和視頻數(shù)據(jù),而要想對(duì)圖片之類的進(jìn)行壓縮,我們可以選擇?sharp?來(lái)進(jìn)行操作,所以下面我們就來(lái)學(xué)習(xí)一下前端如何利用ffmpeg和sharp玩轉(zhuǎn)音視頻和圖片吧2023-10-10
這篇文章主要介紹了基于JavaScript獲取鼠標(biāo)位置的各種方法 ,需要的朋友可以參考下2015-12-12
這篇文章主要為大家分享介紹了JavaScript頭像上傳插件源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
JS 排序輸出實(shí)現(xiàn)table行號(hào)自增前端動(dòng)態(tài)生成的tr
一個(gè)項(xiàng)目，需要對(duì)數(shù)據(jù)進(jìn)行排序輸出，要求有行號(hào)，依次遞增1.2.3.4.5，使用前端動(dòng)態(tài)生成的tr2014-08-08
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)彈性搜索框的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07