js实现无刷新监听URL的变化示例代码详解
作者：互联网
js实现无刷新监听URL的变化示例代码详解
更新时间：2020年06月03日 15:49:54 作者：zpfei 这篇文章主要介绍了js如何无刷新监听URL的变化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下 <iframe data-google-container-id="a!2" data-google-query-id="CJXv092T__cCFX-FfwQdaaAI3g" data-load-complete="true" frameborder="0" height="280" id="aswift_1" marginheight="0" marginwidth="0" name="aswift_1" scrolling="no" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-6384567588307613&output=html&h=280&slotname=3921475131&adk=1931977407&adf=2062698613&pi=t.ma~as.3921475131&w=820&fwrn=4&fwrnh=100&lmt=1653636424&rafmt=1&psa=0&format=820x280&url=https%3A%2F%2Fwww.jb51.net%2Farticle%2F187970.htm&fwr=0&rpe=1&resp_fmts=3&wgl=1&uach=WyJtYWNPUyIsIjEyXzRfMCIsIng4NiIsIiIsIjg5LjAuNDM4OS45MCIsW10sbnVsbCxudWxsLCIiLFtdLGZhbHNlXQ..&dt=1653636424504&bpp=2&bdt=7822&idt=340&shv=r20220525&mjsv=m202205240101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D982b2e7f66265936-228d78527fd30038%3AT%3D1653548694%3ART%3D1653548694%3AS%3DALNI_MaIKpdxGj2QicwfqzvdiP-t-6EJjA&gpic=UID%3D000005c2656e5284%3AT%3D1653548694%3ART%3D1653548694%3AS%3DALNI_MYs10HnfMOTDwJ2-KJjiPtoZ_g14A&prev_fmts=0x0&nras=1&correlator=271290840918&frm=20&pv=1&ga_vid=1752160750.1653636425&ga_sid=1653636425&ga_hid=922097583&ga_fc=0&u_tz=480&u_his=1&u_h=900&u_w=1440&u_ah=804&u_aw=1440&u_cd=30&u_sd=2&dmc=8&adx=128&ady=797&biw=1425&bih=722&scr_x=0&scr_y=1097&eid=44759876%2C44759927%2C44759842%2C44763507%2C44761043%2C31067757%2C31067769%2C31064018&oid=2&pvsid=2957700775271408&pem=771&tmod=1147709227&uas=3&nvt=1&ref=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DanKEQ5dJZcE67ytPKk37IBa2UvkN2S5EpNK-7j-Wsp8e3XWWklD5l75In461ZS8OI0R9gPoWxKR-VwVtHX7Qpa%26wd%3D%26eqid%3D96e9636b000211b60000000262907cde&eae=0&fc=1920&brdim=0%2C25%2C0%2C25%2C1440%2C25%2C1440%2C801%2C1440%2C722&vis=1&rsz=%7C%7CeE%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=2&uci=a!2&fsb=1&xpc=oIiBNZpVSc&p=https%3A//www.jb51.net&dtd=348" width="820"></iframe>无刷新改变路由的两种方法通过hash改变路由
代码
| 1 |
window.location.hash='edit'
|
效果
通过history改变路由
- history.back(): 返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同
- history.forward():指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同
- history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页
- history.pushState()可以将给定的数据压入到浏览器会话历史栈中，该方法接收3个参数，对象，title和一串url。pushState后会改变当前页面url
- history.replaceState()将当前的会话页面的url替换成指定的数据，replaceState后也会改变当前页面的url
监听url变化
监听hash变化
| 1 2 3 4 5 6 7 |
window.onhashchange=function(event){
console.log(event);
}
//或者
window.addEventListener('hashchange',function(event){
console.log(event);
})
|
监听back/forward/go
如果是history.back(),history.forward()、history.go()那么会触发popstate事件
| 1 2 3 |
window.addEventListener('popstate', function(event) {
console.log(event);
})
|
但是，history.pushState()和history.replaceState()不会触发popstate事件，所以需要自己手动增加事件
监听pushState/replaceState
history.replaceState和pushState不会触发popstate事件，那么如何监听这两个行为呢。可以通过在方法里面主动的去触发popstate事件。另一种就是在方法中创建一个新的全局事件。
改造
| 1 2 3 4 5 6 7 8 9 10 11 12 |
const _historyWrap = function(type) {
const orig = history[type];
const e = new Event(type);
return function() {
const rv = orig.apply(this, arguments);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _historyWrap('pushState');
history.replaceState = _historyWrap('replaceState');
|
监听
| 1 2 3 4 5 6 |
window.addEventListener('pushState', function(e) {
console.log('change pushState');
});
window.addEventListener('replaceState', function(e) {
console.log('change replaceState');
});
|
总结
到此这篇关于js如何无刷新监听URL的变化的文章就介绍到这了,更多相关js 无刷新监听url变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
标签：function,replaceState,示例,URL,js,window,pushState,监听,history 来源： https://www.cnblogs.com/sexintercourse/p/16318409.html