淺談通過JS攔截 pushState和replaceState事件

更新時(shí)間：2017年07月21日 08:01:53 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談通過JS攔截 pushState和replaceState事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

history.pushState 和 history.replaceState 可以在不刷新當(dāng)前頁面的情況下更改URL，但是這樣就無法獲取通過AJAX得到的新頁面的內(nèi)容了。

雖然各種HTML5文檔說 window.onpopstate 事件可以攔截 pushState 的消息，但在實(shí)際的測(cè)試中， onpopstate 根本沒有任何作用，無法攔截 pushState 的消息。

經(jīng)過Google一番，才找到了正確獲取 pushState 事件的代碼

// 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ù)，然后自己激活一個(gè)事件

這樣就可以解決 pushState 無法激活事件的問題了

另外記得最好將這段代碼放在文檔加載前執(zhí)行

以上這篇淺談通過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透明遮罩層背景圖片展示
javascript ImgBox透明遮罩層背景圖片展示,就是增加了一個(gè)關(guān)閉按鈕，比較實(shí)用。
2009-07-07
詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
canvas可以在頁面中設(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)圖片局部放大或縮小的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片局部放大或縮小的方法,涉及javascript事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-08-08
JS利用ffmpeg和sharp玩轉(zhuǎn)音視頻和圖片
ffmpeg?是一個(gè)非常流行的開源軟件套件,用于處理音頻和視頻數(shù)據(jù),而要想對(duì)圖片之類的進(jìn)行壓縮,我們可以選擇?sharp?來進(jìn)行操作,所以下面我們就來學(xué)習(xí)一下前端如何利用ffmpeg和sharp玩轉(zhuǎn)音視頻和圖片吧
2023-10-10
基于JavaScript獲取鼠標(biāo)位置的各種方法
這篇文章主要介紹了基于JavaScript獲取鼠標(biāo)位置的各種方法 ,需要的朋友可以參考下
2015-12-12
JavaScript頭像上傳插件源碼分享
這篇文章主要為大家分享介紹了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)生成的tr
2014-08-08
Bootstrap實(shí)現(xiàn)彈性搜索框
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)彈性搜索框的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07