不刷新页面内容,改变浏览器访问地址url

javascript 文章 2022-07-15 14:27 512 0 全屏看文

AI助手支持GPT4.0

浏览器改变url

1 改变浏览器访问地址的方式

1-1 不刷新页面内容,改变浏览器访问地址url

1-1-1 query param

location.search = '?page=2';

1-1-2 hash

window.location.hash = 'www.2233.com'

如果 原地址 是 http://127.0.0.1oliebe/template.html
运行 window.location.hash = 'www.2233com'
url地址将变为 http://127.0.0.1oliebe/template.html#www.2233.com

1-1-3 replaceState

window.history.replaceState(undefined, '', nU)// 参数 nU 应该是历史记录实体的 URL. 新的 URL 跟当前的 URL 必须是同源; 否则 replaceState 抛出一个异常。

如果 原地址 是 http://127.0.0.1oliebe/template.html
运行 window.history.replaceState(undefined, '', '/box')
url地址将变为 http://127.0.0.1/box
且不会从新地址重新加载页面,也不会留下访问记录

再举一个栗子
用户在 http://www/aaa 下点击了登录,跳转到了 http://www/login
login页面运行了 window.history.replaceState(undefined, '', '/box')
此时url地址是 http://www/box,但页面内容是 http://www/login 的内容
用户如果点击浏览器的返回按钮,url 地址将会是 http://www/aaa, 页面内容还是 http://www/login 的内容
只有主域 www 变了的时候,浏览器才会重新从超链接加载页面数据
参考 https://developer.mozilla.org/zh-CN/docs/Web/API/HistoryeplaceState

1-1-4 pushState

window.history.pushState(undefined, '', nU)

pushState 大致同 replaceState, 但是会留下访问记录。
改一下之前的栗子
用户在 http://www/aaa 下点击了登录,跳转到了 http://www/login
login页面运行了 window.history.pushState(undefined, '', '/box')
此时url地址是 http://www/box,但页面内容是 http://www/login 的内容
用户如果点击浏览器的返回按钮,url 地址将会是 http://www/login, 页面内容还是 http://www/login 的内容
只有主域 www 变了的时候,浏览器才会重新从超链接加载页面数据
参考 https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

-EOF-

AI助手支持GPT4.0


国内超级便宜服务器

摸鱼人热门新闻聚合

钻级赞助商 我要加入

开发者在线工具

第三方支付技术请加QQ群

相关文章
ES6中class方法及super关键字
使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 ?
打开网页自动下载exe的代码
javascript将wordpress,wecenter中的网易云音乐地址解析成播放器
网页导出table到excel的方法(支持IE和谷歌浏览器)
随便看看
wx.request 放在onload这些没有执行,放在事件处理方法中又可以执行 ? 672
app可以跳转到公众号,进行关注吗? 1248
发个建议:社区的私聊框,能加个发送时间框吗? 677
小程序页面中图片太长,需要做成点击收缩--展开的效果,请问怎么 做? 754
怎样才能每月多发文章? 625
UnionID 解释? 775
scroll-view scroll-x无效? 643
我有小程序账户我想绑定公众号并且获取UnionID 有什么要求吗? 647
这么获取pc 微信 内测版? 626
小程序授权头像域名为什么会不一样? 1628