[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但頁面不進行重新整理的操作!
相關文章
- js 禁用瀏覽器後退按鈕效果JS瀏覽器
- 點選瀏覽器後退按鈕時彈出提示資訊瀏覽器
- 瀏覽器後退操作時,表單狀態的還原瀏覽器
- history pushState 實現瀏覽器前進與後退瀏覽器
- 監聽瀏覽器的後退事件瀏覽器事件
- 瀏覽器歷史,判斷是點選了後退按鈕還是前進按鈕瀏覽器
- JS禁止瀏覽器後退鍵JS瀏覽器
- ASP.Net頁面瀏覽器“後退”功能的實現ASP.NET瀏覽器
- Chrome將強化“後退”按鈕 打擊後退至廣告頁行為Chrome
- 08-棧:如何實現瀏覽器的前進和後退功能?瀏覽器
- 禁止頁面後退JS(相容各瀏覽器)JS瀏覽器
- IOS:修改NavigationController的後退按鈕標題iOSNavigationController
- html和JavaScript,使用者點選瀏覽器後退按鈕,或者返回上一步自動重新整理方式HTMLJavaScript瀏覽器
- Google Chrome將不再允許網站劫持後退按鈕GoChrome網站
- 瀏覽器“後退”、“前進”或可以這麼去監聽瀏覽器
- 解決:在點選使用者退出登入時,再按瀏覽器的後退按鈕,仍然能夠看到之前的頁面...瀏覽器
- Ios、Android微信瀏覽器後退跳轉實現,及遇到的bugiOSAndroid瀏覽器
- win10系統瀏覽器閃退怎麼辦 win10瀏覽器閃退的方法Win10瀏覽器
- HTML5中History.back()頁面後退重新整理頁面HTML
- android 獲得後退鍵按事件Android事件
- 每日安全資訊:Google Chrome將不再允許網站劫持後退按鈕GoChrome網站
- Win10系統ie瀏覽器閃退該怎麼辦 Win10系統ie瀏覽器閃退的方法Win10瀏覽器
- 為什麼win10瀏覽器總是閃退_win10瀏覽器閃退是怎麼回事Win10瀏覽器
- js實現的點選前進和後退功能JS
- 監控頁面後退前進,瀏覽器文件載入事件之pageshow、pagehide瀏覽器事件IDE
- vue中前進重新整理、後退快取使用者瀏覽資料和瀏覽位置的實踐Vue快取
- vue router路由自定義後退事件,並通知下個路由為後退Vue路由事件
- javascript中的後退和重新整理JavaScript
- windows10 edge閃退怎麼辦_windows10 edge瀏覽器閃退修復Windows瀏覽器
- VBA命令按鈕操作
- 按鈕禁用
- vue路由前進後退動畫Vue路由動畫
- 禁用瀏覽器控制檯除錯JavaScript功能瀏覽器除錯JavaScript
- 系統盤datePicker、調整Nav後退按鈕位置調整,電話簡訊郵件分享
- 隱藏在瀏覽器背後的“黑手”瀏覽器
- [JS]bootstrapTable新增操作按鈕JSbootAPT
- vue router路由自定義後退事件Vue路由事件
- JSF是思想的進步還是後退JS