天天看點

[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但頁面不進行重新整理的操作!

繼續閱讀