[html]history禁用浏览器的后退功能(包括其他操作后退的按钮,操作等)

简介: 禁用浏览器后退功能

前端在编写代码的时候可能会使用到禁用浏览器的后退功能,为使后退功能更加的完善,所以需要禁用掉很多的其他操作,比如键盘的按钮,组合快捷键等等。
这里是一段关于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但页面不进行刷新的操作!

相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
14天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
21天前
|
存储 移动开发 前端开发
|
1月前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中,`&lt;form&gt;`元素具备自动完成功能,可根据用户历史输入提供建议,提高输入效率并改善体验。默认情况下,浏览器会自动开启此功能,也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段,如`&lt;input&gt;`,同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入,在用户再次访问相同表单时提供相应的自动完成建议。
WK
|
2月前
|
存储 移动开发 API
哪些功能是HTML5的新增功能
HTML5作为HTML的最新版本,引入了许多新的功能和特性,这些功能极大地丰富了网页的表现力和交互性。以下是HTML5的一些新增功能:
WK
67 2
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
37 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
|
2月前
|
存储 文字识别 前端开发
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
|
2月前
|
前端开发
html遮罩功能
html遮罩功能
|
3月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
58 1
下一篇
无影云桌面