Library: Additional DOM Window History-Stack Events (pushstate, replacestate)

UserScript | Library: DOM Window History Stack Events (pushstate/replacestate)

To complement the <window> 'popstate' event, this library adds 'pushstate'/'replacestate' events. Also adds corresponding 'onpushstate'/'onreplacestate' event handlers.

目前為 2021-05-01 提交的版本，檢視最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/425774/926819/UserScript%20%7C%20Library%3A%20DOM%20Window%20History%20Stack%20Events%20%28pushstatereplacestate%29.js

發表問題、評論、或檢舉該腳本。

換行

// ==UserScript==
// @name            UserScript | Library: DOM Window History Stack Events (pushstate/replacestate)
// @namespace       de.sidneys.userscripts
// @homepage        https://gist.githubusercontent.com/sidneys/fb1cdcf6fa7eef8df903cc8c178e4144/raw/
// @version         0.0.7
// @description     To complement the <window> 'popstate' event, this library adds 'pushstate'/'replacestate' events. Also adds corresponding 'onpushstate'/'onreplacestate' event handlers.
// @author          sidneys
// @icon            https://i.imgur.com/nmbtzlX.png
// @include         *://*/*
// ==/UserScript==

/**
 * @overview
 *
 * @see {@link https://stackoverflow.com/a/4585031/1327892}
 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/History/pushState}
 */

/**
 * @public
 *
 * Emits a 'pushstate' event from <window> by Monkey-Patching History.pushState().
 * Calls corresponding window#onpushstate event handler.
 *
 * @mixin window.onpushstate
 */
const originalPushState = window.history.pushState
window.history.pushState = (state, title = '', url) => {
    // Create event
    const event = new Event('pushstate', { bubbles: false, composed: false })
    event.state = state

    // Emit event
    window.dispatchEvent(event)

    // Call 'on'-prefixed event handler method
    if (typeof window.onpushstate === 'function') {
        window.onpushstate(event)
    }
    
    // Call original method
    originalPushState.call(window.history, state, title, url)
}

/**
 * @public
 *
 * Emits a 'replacestate' event from <window> by Monkey-Patching History.replaceState().
 * Calls corresponding window#onreplacestate event handler.
 *
 * @mixin window.onreplacestate
 */
const originalReplaceState = window.history.replaceState
window.history.replaceState = (state, title = '', url) => {
    // Create event
    const event = new Event('replacestate', { bubbles: false, composed: false })
    event.state = state

    // Emit event
    window.dispatchEvent(event)

    // Call 'on'-prefixed event handler method
    if (typeof window.onreplacestate === 'function') {
        window.onreplacestate(event)
    }
    
    // Call original method
    originalReplaceState.call(window.history, state, title, url)
}