HTML頁面回退

 

onpageshow 監聽頁面是否是緩存頁面

  需求:點擊A頁面跳轉至B頁面,在B頁面點擊手機物理回退鍵或者history.back回退時,需要在A頁面判斷當前頁面是否是回退回來的頁面,而不是新加載的。這裏用到一個

onpageshow 事件。

定義和用法

onpageshow 事件在用戶瀏覽網頁時觸發。

onpageshow 事件類似於 onload 事件,onload 事件在頁面第一次加載時觸發, onpageshow 事件在每次加載頁面時觸發,即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發。

爲了查看頁面是直接從服務器上載入還是從緩存中讀取,你可以使用 PageTransitionEvent 對象的 persisted 屬性來判斷。 如果頁面從瀏覽器的緩存中讀取該屬性返回 ture,否則返回 false

 

是否支持冒泡: No
是否可以取消: No
事件類型: PageTransitionEvent
支持的 HTML 標籤: <body>

以下是幾種使用方式:

1。直接在HTMl中使用,注意只能在body上進行事件註冊

<body οnpageshοw="myFunction(event)">

<p>該實例演示瞭如何向 body 元素添加 "onpageshow" 事件。</p>
<h1 id="demo"></h1>
<script>
function myFunction() {

alert("頁面是否從瀏覽器緩存中加載? " + event.persisted);


}
</script>

2.JS中通過元素獲取綁定在body上

document.getElementsByTagName("BODY")[0].onpageshow = function() {myFunction()};

3.在window上註冊這個方法

window.addEventListener("pageshow", myFunction);
function myFunction(event) {

alert("頁面是否從瀏覽器緩存中加載? " + event.persisted);

}.

通過以上方法,可以滿足需求,也能判斷當前頁面是否是緩存頁面。。。event的很多屬性都有點意思。。

轉載地址:https://www.cnblogs.com/leolovexx/p/7026022.html

(侵權刪)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章