H5如何解監聽頁面退出需求???

2022-05-05 05:09:11 字數 1415 閱讀 1110

事發背景(時間較久)

在乙個陽光明媚的一天,這天lz正在工位上悠閒的敲著**;說時遲那時快,運營小姐姐箭步過來,讓lz做乙個挽留彈窗;我當時一聽這tm不是流氓麼。於是便有了以下的故事。。。

如何實現

眾所周知,我們一般是無法去監聽瀏覽器的返回事件的;更別說是使用者裝置的物理返回鍵了;依稀記得瀏覽器確實是有個關閉事件----onbeforeunload;但是這個原意是使用者是否確定關閉此頁面,會有個彈窗出現;所以,這條路是走不了了。omg折磨人,於是又想了想,如果我們新增乙個中間頁,在這個頁面進行跳轉;如果使用者返回必將回到這個頁面,然後在進行挽留的需求;思路貌似是可以的;但這樣使用者體驗以及與我們需求的初衷是不符合的,於是又被pass;接著又想了想用hash去做監聽呢,而且頁面也不會有重新整理,感覺還挺好;實踐了後發現,頁面進去改變了hash值後就會觸發一次,當使用者返回時,就不再觸發這個hashchange事件了;於是就想在瀏覽器的瀏覽記錄去動手;於是就用到了history 介面中的pushstate完成這個需求;

如何使用:pushstate /onpopstate

pushstate見名知意就是往歷史記錄條目新增一條歷史狀態;使用方法:

state:'',//可以用在popstate事件中,可以通過locaton.state獲取 k

title: 'pushstate',//為跳轉的state傳遞乙個短標題

url: '#'//該引數定義了新的歷史url記錄window.history.pushstate(state, title,url);

onpopstate監聽就比較簡單:

window.addeventlistener('popstate', (e) =>, 

false)

相容性:

這個是h5新特性,目前的相容性也不是特別好;但是至少我們能夠把這個需求能夠完成,至於其他的監聽思路,lz暫時還沒想出來;也請各路大神集思廣益。。

最後lz貼上我之前寫的方法:

class _browserback  =param;

this.callback =callback;

this

.pushhistory()

this

.listenevent()

} listenevent () , false)}}

pushhistory () 

window.history.pushstate(state, 'title', '#');

} ifhashash ()

}

文章的結尾lz推薦一篇大神的文章:

小弟不才,還望指教!

H5及H5頁面是什麼意思?如何製作H5頁面?

h5是html5的簡稱。html5是html最新的修訂版本,是一種超文字標記語言。h5有兩大特點 首先,強化了 web 網頁的表現效能。其次,追加了本地資料庫等 web 應用的功能。第二步 選擇 高階模式 點 建立應用。第三步 進入製作頁面。九個控制項,通過點選新增到製作介面,控制項的選擇使用按照你...

H5的頁面元素

details語義 詳情 summary語義 概要,摘要 details元素可以實現類似顯示 隱藏的功能,summary用於顯示details的標題或者間接 注意 1 如果details下面沒有summary元素,瀏覽器會自動新增,同時內容是 詳細資訊 2 details預設是關閉狀態的,我們可以通...

h5頁面的寫法 移動端h5頁面寫法

1.頁面寬度320,所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640,元素尺寸正常 暫未發現問題 3.頁面寬度640,js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...