歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Html5 監(jiān)聽攔截Android返回鍵方法詳解

發(fā)布時(shí)間:2018-04-15 23:33  回復(fù):0  查看:3451   最后回復(fù):2018-04-15 23:33  
本文和大家分享的主要是使用html5 監(jiān)聽攔截 android 返回鍵的相關(guān)內(nèi)容,一起來看看吧,希望對(duì)大家 學(xué)習(xí)html5 有所幫助。   
  瀏覽器窗口有一個(gè)history 對(duì)象,用來保存瀏覽歷史。
  如果當(dāng)前窗口先后訪問了三個(gè)網(wǎng)址,那么history 對(duì)象就包括三項(xiàng), history.length 屬性等于 3
  history 對(duì)象提供了一系列方法,允許在瀏覽歷史之間移動(dòng):
  window.history.back() :移動(dòng)到上一個(gè)訪問頁面,等同于瀏覽器的后退鍵。
  window.history.forward() :移動(dòng)到下一個(gè)訪問頁面,等同于瀏覽器的前進(jìn)鍵。
  window.history.go(num) :接受一個(gè)整數(shù)作為參數(shù),移動(dòng)到該整數(shù)指定的頁面,比如 go(1) 相當(dāng)于 forward() , go(-1) 相當(dāng)于 back() 。
  window.history.pushState() HTML5 history 對(duì)象添加了兩個(gè)新方法, window.history.pushState() window.history.replaceState() ,用來在瀏覽歷史中添加和修改記錄。
  注:1. 如果移動(dòng)的位置超出了訪問歷史的邊界,以上三個(gè)方法并不報(bào)錯(cuò),而是默默的失敗。
  2. 設(shè)置時(shí),頁面通常是從瀏覽器緩存之中加載,而不是重新要求服務(wù)器發(fā)送新的網(wǎng)頁。
  重點(diǎn)講解下:  window. history.pushState()
  window.history.pushState(state, title, utl) ,在頁面中創(chuàng)建一個(gè)  history  實(shí)體。直接添加到歷史記錄中。
  其中參數(shù):
  state :一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對(duì)象, popstate 事件觸發(fā)時(shí),該對(duì)象會(huì)傳入回調(diào)函數(shù)。如果不需要這個(gè)對(duì)象,此處可以填 null 。
  title :新頁面的標(biāo)題,但是所有瀏覽器目前都忽略這個(gè)值,因此這里可以填 null 。
  url :新的網(wǎng)址, 必須與當(dāng)前頁面處在同一個(gè)域 。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址。
  注:pushState 方法不會(huì)觸發(fā)頁面刷新,只是導(dǎo)致 history 對(duì)象發(fā)生變化,地址欄會(huì)有反應(yīng)。
  舉例實(shí)現(xiàn):
  Html5  監(jiān)聽攔截 Android 返回鍵方法如下:
  1.  監(jiān)聽  popstate  事件
  window.addEventListener("popstate",  function(){
  //doSomething
  }, false)
  2. 取消默認(rèn)的返回操作,即監(jiān)聽攔截返回鍵:添加一條空的  history  實(shí)體作為替代原來的  history  實(shí)體
  window.history.pushState( nullnull, "#");
  舉例:
<!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 = " 用戶點(diǎn)擊返回 " + (++count)
     })
  </script>
<body>
  <p id="logView">test</p>
</body>
</html>
來源:網(wǎng)絡(luò)
您還未登錄,請(qǐng)先登錄

熱門帖子

最新帖子

?