[html]history禁用瀏覽器的後退功能(包括其他操作後退的按鈕,操作等)

唐門沒有糖發表於2018-08-22

前端在編寫程式碼的時候可能會使用到禁用瀏覽器的後退功能,為使後退功能更加的完善,所以需要禁用掉很多的其他操作,比如鍵盤的按鈕,組合快捷鍵等等。
這裡是一段關於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但頁面不進行重新整理的操作!


相關文章