onurlchange是做什么用的

rhdom

查看tampermonkey文档

You have to match the path without the hash parameter and make use of window.onurlchange

If a script runs on a single-page application, then it can use window.onurlchange to listen for URL changes:

没看懂什么意思，谷歌搜了一遍也没有靠谱的解释

shabby

某些网页比如 github.com/twitter.com 不需要整体刷新页面也能更改地址栏的 url

onurlchange 就是监听这种url改变事件的

rhdom

shabby 发表于 2023-3-1 14:04
某些网页比如 github.com/twitter.com 不需要整体刷新页面也能更改地址栏的 url

onurlchange 就是监听这 ...

“不需要整体刷新页面也能更改地址栏的 url”这种的原理是啥

rhdom

rhdom 发表于 2023-3-1 21:59
“不需要整体刷新页面也能更改地址栏的 url”这种的原理是啥

我看似乎也是a标签里边的href？

rhdom

顶顶，期待解答

李恒道

rhdom 发表于 2023-3-3 14:50
我看似乎也是a标签里边的href？

你指的是hash router吧
a标签写#就可以跳转了
原理其实不必深究
就是浏览器提供的实现而已
会用就可以了

rhdom

rhdom 发表于 2023-3-1 21:59
“不需要整体刷新页面也能更改地址栏的 url”这种的原理是啥

应该是history.pushState

rhdom

最近有空，调试了下

rhdom

                observeUrlChanges: {
                    allow: {
                        script: "window.onurlchange"
                    },
                    exec: (e,t,n)=>{
                        const {postMessage: r, onDisconnect: s} = e
                          , i = n.frameId
                          , o = n.tab.id
                          , a = e=>{
                            e.tabId == o && e.frameId == i && r({
                                url: e.url
                            })
                        }
                        ;
                        ul(o, a),
                        s((()=>{
                            Al(o, a)
                        }
                        ))
                    }
                },

rhdom

            onurlchange: e=>{
                const t = No("onurlchange");
                if (!t)
                    return void kn((()=>e.disconnect()), 1);
                let n = ()=>{
                    e.postMessage(St({
                        url: Jn.href
                    }))
                }
                ;
                const o = ()=>{
                    n && (Ln.removeEventListener("hashchange", n),
                    n = null)
                }
                ;
                Ln.addEventListener("hashchange", n),
                t.onMessage.addListener((t=>{
                    e.postMessage(t)
                }
                )),
                t.onDisconnect.addListener((()=>{
                    e.disconnect(),
                    o()
                }
                )),
                e.onMessage.addListener((e=>{
                    t.postMessage(e)
                }
                )),
                e.onDisconnect.addListener((()=>{
                    t.disconnect(),
                    o()
                }
                ))
            }

我并没有太理解这里的onurlchange是怎么实现的，在hashchange断点下来了（不对好像没断下来），但是似乎hashchange并不能监听pushState
看的乱七八糟的，还是VM的脚本，没法打断点，有空直接改tampermonkey的硬盘文件再调试一下