重写history.pushState添加自定义事件

自定义事件"/>

重写history.pushState添加自定义事件

1. 添加自定义事件的方法

var event = new CustomEvent('xxx', { detail: {...略});

注意要dispatch一下:

window.dispatchEvent(event);

2. 使用自定义事件

// 监听路由变化
        window.addEventListener("my-popstate", ev => {
            console.log("my-popstate:", ev)
            const detail = ev.detail;

                ...略
        })
    

3. 重写history.pushState添加自定义事件

const oriPushState = history.pushState;
// 重写pushState
history.pushState = function (state, title, url) {// 触发原事件oriPushState.apply(history, [state, title, url]);// 自定义事件var event = new CustomEvent("my-popstate", {detail: {state,title,url}});window.dispatchEvent(event);
}

4. 使用"my-popstate"自定义事件:

// 监听路由变化listenerHistory() {// 导航的路由切换window.addEventListener("popstate", ev => {console.log("onpopstate:", ev)const url = location.pathname.endsWith(".html") ? "/" : location.pathname;// todo});// pushState或者replaceStatewindow.addEventListener("my-popstate", ev => {console.log("my-popstate:", ev)const detail = ev.detail;// todo})}