Html5 監聽攔截Android返回鍵方法詳解

時間 2020-05-07

標籤 html5 html 監聽攔截 android 返回方法詳解欄目 HTML5 简体版

原文原文鏈接

瀏覽器窗口有一個history對象，用來保存瀏覽歷史。javascript

若是當前窗口前後訪問了三個網址，那麼history對象就包括三項，history.length屬性等於3。html

history對象提供了一系列方法，容許在瀏覽歷史之間移動：java

window.history.back()：移動到上一個訪問頁面，等同於瀏覽器的後退鍵。瀏覽器

window.history.forward()：移動到下一個訪問頁面，等同於瀏覽器的前進鍵。緩存

window.history.go(num)：接受一個整數做爲參數，移動到該整數指定的頁面，好比go(1)至關於forward()，go(-1)至關於back()。服務器

window.history.pushState()：HTML5爲history對象添加了兩個新方法，window.history.pushState()和window.history.replaceState()，用來在瀏覽歷史中添加和修改記錄。函數

注：1.若是移動的位置超出了訪問歷史的邊界，以上三個方法並不報錯，而是默默的失敗。url

　　2.設置時，頁面一般是從瀏覽器緩存之中加載，而不是從新要求服務器發送新的網頁。spa

重點講解下：window.history.pushState().net

window.history.pushState(state, title, utl)，在頁面中建立一個 history 實體。直接添加到歷史記錄中。

其中參數：

state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。若是不須要這個對象，此處能夠填null。

title：新頁面的標題，可是全部瀏覽器目前都忽略這個值，所以這裏能夠填null。

url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

注：pushState方法不會觸發頁面刷新，只是致使history對象發生變化，地址欄會有反應。

舉例實現：

Html5 監聽攔截Android返回鍵方法以下：

1.監聽 popstate 事件

window.addEventListener("popstate", function(){ //doSomething
}, false)

2.取消默認的返回操做，即監聽攔截返回鍵：添加一條空的 history 實體做爲替代原來的 history 實體

 window.history.pushState(null, null, "#");

舉例：

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript">
     var count = 0 ; window.history.pushState(null, null, "#"); window.addEventListener("popstate", function(e) { window.history.pushState(null, null, "#"); document.getElementById('logView').innerHTML = "用戶點擊返回" + (++count) }) </script>
<body>
  <p id="logView">test</p>
</body>
</html>