「无刷新跳转」window.history两个新方法pushState和replaceState详解

无跳转重写url

  • HTML5新接口,可以改变网址而不刷新页面
  • 存在跨域问题,不支持重写到另一个域名下
  • 仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面

一、window.history.pushState(data, title, targetURL);

  • @状态对象:传给目标路由的信息,可为空
  • @页面标题:目前所有浏览器都不支持,填空字符串即可
  • @可选url:目标url,不会检查url是否存在,且不能跨域。如不传该项,即给当前url添加data

二、window.history.replaceState(data, title, targetURL);

  • @类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

三、为了让大家更好的理解两者的区别,我以下面链接为例:

  • http://hd.platform.com2.test/huodong/2020wzry/?game_id=60&agent=1180#felix

1、相同点:都不支持跨域

「无刷新跳转」window.history两个新方法pushState和replaceState详解_第1张图片


2、不同点:是否会留下记录

「无刷新跳转」window.history两个新方法pushState和replaceState详解_第2张图片

「无刷新跳转」window.history两个新方法pushState和replaceState详解_第3张图片

 

 

你可能感兴趣的:(高级前端,js)