当前位置 : 主页 > 编程语言 > 其它开发 >

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

来源:互联网 收集:自由互联 发布时间:2022-07-14
浏览器改变url1 改变浏览器访问地址的方式1-1 不刷新页面内容,改变浏览器访问地址url1-1-1 query param location.search = '?page=2'; 1-1-2 hash window.location.hash = 'www.zhihu.com' 如果 原地址 是 http://1
浏览器改变url 1 改变浏览器访问地址的方式 1-1 不刷新页面内容,改变浏览器访问地址url 1-1-1 query param
location.search = '?page=2';
1-1-2 hash
window.location.hash = 'www.zhihu.com'

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

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

如果 原地址 是 http://127.0.0.1/noliebe/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/History/replaceState

1-1-3 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

/** *  in the end *  我们正改变着我们的世界.. */
上一篇:模块
下一篇:没有了
网友评论