[html]history禁用浏览器的后退功能(包括其他操作后退的按钮,操作等)
教程管理员 发布于2023-09-25 21:30 HTML教程 164
简介:
禁用浏览器后退功能
前端在编写代码的时候可能会使用到禁用浏览器的后退功能,为使后退功能更加的完善,所以需要禁用掉很多的其他操作,比如键盘的按钮,组合快捷键等等。
这里是一段关于js完全禁用浏览器后退的功能。
<script language="javascript">
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
</script>
在一般的html中使用这个功能时,对整个页面都会启用禁用的功能;
在vue等的spa项目中使用,你可以在统一的地方进行及时的后退功能的禁用。那么,我们应该这样描述:
export function disableHistory (url) {
//防止页面后退
history.pushState(null, null, url);
window.addEventListener('popstate', function () {
history.pushState(null, null, url);
})
}
同时我们在进入某个页面的时候就可以去执行这个函数:
import { disableHistory } from ‘./disableHistory’
export default {
beforeCreate () {
disableHistory(document.URL)
},
// ...
}
虽然我们不能直接一起禁用掉我们想禁用的所有页面,但是我们的页面显示也是互斥的,即一个浏览器tab不能一次显示多个页面,只能含有一个url。只要我们在想禁用的页面显示之前或者用户操作后退之前禁用掉即可。
当然你也可以使用这个函数来实现更改url但页面不进行刷新的操作!
相关推荐
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序,Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 10-04 腾讯视频生成的Html代码
- 10-04 ie下tbody的innerhtml属性只读
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-