首页 > 其他分享 >window.onpopstate事件和history

window.onpopstate事件和history

时间:2023-02-09 18:58:10浏览次数:58  
标签:http 地址 window onpopstate 浏览器 history 页面

在支持H5的浏览器中,有一个window.onpopstate事件,该事件可以监听如下操作:

  1. 点击浏览器的前进按钮/后退按钮
  2. 执行js代码:history.go(n) / history.forward() /

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())

 window.addEventListener('popstate', function (e) {
     let goHref = window.location.href;
     console.log('即将跳转目标路径为:', goHref );
     // 走到这一步,页面还没有跳转
});

history.pushState()只会改变当前地址栏的路径,并不会更新页面内容,也就是说,执行下面代码:

window.history.pushState({target:  "mobile"}, "", 'http://www.baidu.com');

地址显示的是http://www.baidu.com,但页面内容依然是原来的内容,并不是百度页面。
还需要注意,当你的url参数是绝地地址的时候,地址栏显示你的绝对地址,当你写的是相对地址的时候,那么相对的就是当前的地址。
比如,当前地址:http://localhost:9090/index.html#/home
你执行:window.history.pushState({target: "mobile"}, "", '#/about');
地址栏显示的是:http://localhost:9090/index.html#/about
不但如此,其实它还改变了历史记录,本来最新的记录是#/home,现在则变成了#/about,虽然页面内容并没有改变。这个历史记录你是可以到浏览器>历史记录中查看到的。
history.replaceState()就是把当前的历史记录改成目标路径,比如:

window.history.replaceState({target:  "mobile"}, "", 'http://www.baidu.com');

这句代码也不会刷新页面,页面内容不变,地址发生了变化,但是如果你再点一次刷新按钮,内容就变成百度了,路径也是和pushstate一样的,唯一不同的就是,它修改的当前历史记录,本来当前历史记录是http://localhost:9090/index.html#/home,现在这条记录的地址变成了http://www.baidu.com



作者:IamaStupid
链接:https://www.jianshu.com/p/2ad099667327
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:http,地址,window,onpopstate,浏览器,history,页面
From: https://www.cnblogs.com/chinasoft/p/17106700.html

相关文章

  • linux/Windows操作系统中的host文件作用
    前言①访问网站,要首先通过DNS服务器把网络域名(www.XXXX.com)解析成XXX.XXX.XXX.XXX的IP地址后,我们的计算机才能访问。②Windows操作系统下host文件的位置:C:\Windows\Syste......
  • 内网穿透windows
    无需安装、注册,一行命令搞定内网穿透!关键是完全免费播报文章程序那点事2022-06-0107:59湖南科技领域创作者关注 内网穿透,即NAT穿透,网络连接时术语。......
  • windows搭建django开发环境
    windows如何搭建django开发环境pycharm搭建django运行环境虚拟环境搭建前置条件,下载安装python如3.11.1下载安装pycharm社区版下载安装git在gitee上新建用户,搭建......
  • Adobe 和微软通过微软边缘为 1 亿 Windows 用户带来 Acrobat PDF 体验
    原标题:Adobe和微软通过微软边缘为1亿Windows用户带来行业领先的AcrobatPDF体验。Adobe和Microsoft已迈出下一步,致力于通过向超过1亿MicrosoftEdge中的Micr......
  • 由浅入深学习新模块之window_manager(一)
    作者:王清前言:作为一个开发人员,随着时代和行业的发展,总会不断的接触不同的新任务,新模块,这就需要不断的学习与沉淀。因为工作的需求,笔者需要对一些自己负责模块之外的模块进......
  • linux查看历史命令history
    [root@bogon~]#history2ls-al3cdpublic/4ls-al5cd..6ls-al7cd..8ls-al9cd..10ls-al11cd..12......
  • window系统使用virtualBox+vagrant 安装centos
    1,virtualbox官网下载地址:https://www.virtualbox.org/wiki/Downloads下载windows版新电脑可能缺少c++库,导致无法安装,通过bing搜索“MicrosoftVisualC++可再发行程序......
  • 【Windows】Microsoft Store无法打开:关闭自动更新(请联系系统管理员更改此设置)
    ✨MicrosoftStore无法打开/关闭自动更新自动更新应用选项无法更改提示请联系你的系统管理员以更改此设置此现象可能为使用以下命令重新安装MicrosoftStore后出现get......
  • Windows离线安装.net Framework3.5
    写在前面本文主要介绍在Windows离线情况下安装.NETFramework3.5运行环境使用场景在日常开发C#程序中,经常会遇到开发过程中无任何问题,但是安装到目标电脑是会无法打开......
  • MinGW-w64离线安装包,环境配置(Windows)
    1、下载很慢的官网:https://osdn.net/projects/mingw/releases/离线的版本:https://sourceforge.net/projects/mingw-w64/files/选择x86_64-posix-seh下载2、使用解压到指定......