- 2024-07-04前端项目部署之pushstate-server
pushstate-server 内部的原理是通过 connect 服务器，开启一个端口，将 dist/index.html 文件作为静态模板输出这种方式可以将本地的项目打包成静态文件,以服务的方式提供出去,方便后端人员调用,而自己也不影响dev的开发安装npminstallpushstate-server--save 基
- 2024-05-30监听浏览器更新URL参数，实现伪SPA单页面应用
在老的jqury项目中通常实现SPA一般都采用hash值变化来进行监听，但是有的项目中我们也想采用改变URL参数来进行监听，一般我们使用window.history.pushState方法来改变url参数；为了在使用window.history.pushState或window.history.replaceState后能够检测到浏览器的后退按钮操作，
- 2024-02-16博客园跳转编辑页面没有重新加载页面 pushState
博客园前端是用angular写的全局搜索pushState，打断点，可以看到 pushState main.6267e7d35558bee5.is:1gomain.6267e7d35558bee5.js:1setBrowserUrl main.6267e7d35558bee5.js:1 setBrowserUrl(p,I){constQ=this.urlSerializer.serialize(p)
- 2024-01-19细说JavaScript BOM之HTML5新特性
1、applicationCache对象什么是ApplicationCache呢？HTML5引入了应用程序缓存技术，意味着Web应用可进行缓存，并在没有网络的情况下使用，通过创建cachemanifest文件，可以轻松的创建离线应用。ApplicationCache带来的优势：1.离线浏览2、提升页面载入速度3、降低服务器压力需要
- 2023-12-09JavaScript-history对象
概述window.history属性指向History对象，它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。window.history.length//3由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。//后退到前一个网
- 2023-11-03Nuxt-监听浏览器返回
区分普通页面/keep-alive缓存页面1、普通页面mounted:{this.setAddListener()},destroyed(){window.removeEventListener('popstate',this.setBack,false)},methods:{//监听浏览器返回操作setAddListener(){consthasRefresh
- 2023-10-19禁止点击浏览器箭头回退
方法一:通过监听 popstatepopstate的怎么用？HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。pushState、replaceState两者用法差不多。在需求需要的文件添加window.a
- 2023-10-13burpsuite靶场----CSRF----无防御
burpsuite靶场----CSRF----无防御靶场地址https://portswigger.net/web-security/csrf/lab-no-defenses正式开始1.登录2.更改email,抓包3.创建poc<html><!--CSRFPoC-generatedbyBurpSuiteProfessional--><body><script>history.pushState(
- 2023-09-18window.history.pushState()和window.history.replaceState()
今天在项目中遇到要实现修改地址栏但是页面不可以刷新的需求查阅资料发现可以用window.history.pushState(state,title,url)和window.history.replaceState(state,title,url)三个参数：state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传
- 2023-08-14图解 history api 和 React Router 实现原理
Router是开发React应用的必备功能，那ReactRouter是怎么实现的呢？今天我们就来读一下ReactRouter的源码吧！首先，我们来学一下HistoryAPI，这是基础。什么是history呢？就是这个东西：我打开了一个新的标签页、然后访问baidu.com、sougou.com、taobao.com。长按后退按钮，就会列出
- 2023-06-15vue填坑之解决部分浏览器不支持pushState方法
前端使用vue-router做单页面路由并开启history模式时，会碰到一个问题：部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法，会导致页面加载不出来。解决这个问题的思路是：当浏览器支持pushState方法时，开启history模式，不支持则开启hash模式对链接做判断，当跳转的
- 2023-04-14popState api详解 history.pushState 案例
popStateAPI是HTML5引入的一种浏览器历史记录相关的API。它提供了一种监听浏览器历史栈发生变化的途径，当用户通过前进/后退按钮或者其他方式改变了当前的历史状态时，该API就会触发相应的事件，开发者可以在事件处理函数中通过获取到的历史状态数据做出相应的响应。在使用popStateA
- 2023-04-06vue里浏览器返回键如何禁用
1mounted(){23//禁用浏览器返回键45history.pushState(null,null,document.URL);67window.addEventListener('popstate',this.disableBrowserBack);89},1011destroyed(){1213//清除popstate事件否则会影响到其他页面
- 2023-01-19关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
设备：iOS:16.1.1User-Agent:Mozilla/5.0(iPhone;CPUiPhoneOS16_1_1likeMacOSX)AppleWebKit/605.1.15(KHTML,likeGecko)Version/16.1Mobile/15E148Safa
- 2023-01-09Vue的hash/history模式
hash路由模式URL中的hash值只是客户端的一种状态，向服务端发送请求的时候，hash部分不会被发送；hash值得改变会在浏览器的历史记增加访问记录，所以可以通过浏览器的回退
- 2022-11-27【面试题】 面试官为啥总是喜欢问前端路由实现方式？
背景从事前端开发的同学，在实际工作中，一定会接触过路由这个概念，同时在面试的过程中，经常会被问及关于前端路由的实现方式，面试官到底想考察什么？在现在SPA单页面模式盛行，前后端
- 2022-10-278.Bom
bom是什么?BOM(全称bowserobjectmodel)浏览器对象模型，他是用于操作浏览器相关的内容。BOM是一个缺乏规范的东西，为了保证他的规范性产生了一系列的共用对象来解决这个
- 2022-10-25 vue和浏览器返回操作一致
methods:{goBack(){//返回上一页this.$router.go(-1);//关闭当前页面;this.$store.dispatch("tagsView/delView",this.$route);}},moun
- 2022-10-06HashRouter 和 HistoryRouter
vue-router是vue官方提供的路由管理器,让构建单页面更容易,vue默认hash模式,还有另一种history模式原理:hash路由:核心就是依靠hashchange()事件在window监听hash的变化,
- 2022-09-27window.location.href和this.$router.push区别
使用location.href=’/url’来跳转，简单方便，但是刷新了页面；使用history.pushState(’/url’)，无刷新页面，静态跳转；引进router，然后使用router.push(’/url’)来跳转，使用了diff
- 2022-08-18小tips：怎样实现简单的前端hash与history路由方式？
前端路由实现方式，主要有两种，分别是history和hash模式。hash模式不同路由对应的hash是不一样的，如何能够监听到URL中关于hash部分发生的变化？浏览器已经暴露给我们一个现成