小猿圈web前端之監聽攔截Android返回鍵方法

現在IT發展迅速,大多數朋友無論是什么行業或者崗位都在或多或少的學習一些IT方面的知識,而lweb前端又是最受歡迎的一種。今天小猿圈web前端老師為你分享一下web前端之監聽攔截Android返回鍵方法,感興趣的朋友一起看看吧。

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

如果當前窗口先后訪問了三個網址,那么history對象就包括三項,history.length屬性等于3。

history對象提供了一系列方法,允許在瀏覽歷史之間移動:

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、如果移動的位置超出了訪問歷史的邊界,以上三個方法并不報錯,而是默默的失敗。

2、設置時,頁面通常是從瀏覽器緩存之中加載,而不是重新要求服務器發送新的網頁。

重點講解下: window. history.pushState()

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>

最后想要了解更多關于web前端方面內容的小伙伴,請關注小猿圈官網,小猿圈竭力為你提供更全面更有競爭力的視頻web前端自學②群:738735873,希望對你有所幫助。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 引言 最近心氣比較浮躁,潛意識告訴自己慢一點,再慢一點,感覺只是說給自己聽的。 為了緩和一下自己扭曲的心態,寫篇博...
    OzanShareing閱讀 2,799評論 0 0
  • 本節介紹各種常見的瀏覽器事件。 鼠標事件 鼠標事件指與鼠標相關的事件,主要有以下一些。 click 事件,dblc...
    許先生__閱讀 2,494評論 0 4
  • Web前端技術由html、css和 javascript三大部分構成,是一個龐大而復雜的技術體系,其復雜程度不低于...
    web佳閱讀 520評論 0 1
  • 路由 根據不同的url地址,展示不同的內容或頁面。 前端路由 定義:在單頁面應用,大部分頁面結構不變,只改變部分內...
    焦邁奇閱讀 1,019評論 1 3
  • “除夕佳人節家家齊,爆竹煙花齊齊升?!?隨著冬日的散去,春天的來臨,中國人心中的節日-春節,來到我們身旁,相隔...
    123流行前線閱讀 501評論 0 0