事發背景(時間較久):
在乙個陽光明媚的一天,這天lz正在工位上悠閒的敲著**;說時遲那時快,運營小姐姐箭步過來,讓lz做乙個挽留彈窗;我當時一聽這tm不是流氓麼。於是便有了以下的故事。。。
如何實現:
眾所周知,我們一般是無法去監聽瀏覽器的返回事件的;更別說是使用者裝置的物理返回鍵了;依稀記得瀏覽器確實是有個關閉事件----onbeforeunload;但是這個原意是使用者是否確定關閉此頁面,會有個彈窗出現;所以,這條路是走不了了。omg折磨人,於是又想了想,如果我們新增乙個中間頁,在這個頁面進行跳轉;如果使用者返回必將回到這個頁面,然後在進行挽留的需求;思路貌似是可以的;但這樣使用者體驗以及與我們需求的初衷是不符合的,於是又被pass;接著又想了想用hash去做監聽呢,而且頁面也不會有重新整理,感覺還挺好;實踐了後發現,頁面進去改變了hash值後就會觸發一次,當使用者返回時,就不再觸發這個hashchange事件了;於是就想在瀏覽器的瀏覽記錄去動手;於是就用到了history 介面中的pushstate完成這個需求;
如何使用:pushstate /onpopstate
pushstate見名知意就是往歷史記錄條目新增一條歷史狀態;使用方法:
state:'',//可以用在popstate事件中,可以通過locaton.state獲取 konpopstate監聽就比較簡單:title: 'pushstate',//為跳轉的state傳遞乙個短標題
url: '#'//該引數定義了新的歷史url記錄window.history.pushstate(state, title,url);
window.addeventlistener('popstate', (e) =>,相容性:false)
這個是h5新特性,目前的相容性也不是特別好;但是至少我們能夠把這個需求能夠完成,至於其他的監聽思路,lz暫時還沒想出來;也請各路大神集思廣益。。
最後lz貼上我之前寫的方法:
class _browserback =param;this.callback =callback;
this
.pushhistory()
this
.listenevent()
} listenevent () , false)}}
pushhistory ()文章的結尾lz推薦一篇大神的文章:window.history.pushstate(state, 'title', '#');
} ifhashash ()
}
小弟不才,還望指教!
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寫...