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