瀏覽器自帶返回與自帶返回強制刷新和錨點功能


一般來說

 a頁面點擊跳轉到b頁面,b頁面點擊瀏覽器的返回,回到剛才a頁面到點擊位置 是一般瀏覽器都會這樣做的
但是如果你在返回時不得不給瀏覽器刷新那么他返回就沒法回到之前點擊的位置了那么我們就需要用到錨點功能了,但是很可恥的是我們沒法獲取到瀏覽器自帶的返回事件
那怎么辦啊?
問了群了的大牛們他們給了個思路

分為幾種情況1,瀏覽器不清除緩存的話,你返回的頁面,會自動跳回之前你點擊的地方

如:

監控返回按鈕,刷新父頁面

由子頁面返回父頁面時沒有刷新父頁面。

解決方法:

首先我考慮用JS去監控返回按鈕事件,然后發現JS並不能監控返回按鈕

然后我采用window.onpopstate的事件

代碼:

<script type="text/javascript" >
window.onpopstate = function (event) {
if (event.state == null) {
window.location.href = "prolist.aspx?type=" + type + "&categoryId=" + categoryId + "&img=" + img;
}
};
//綁定事件處理函數. 
history.pushState({ page: 1 }); 
history.pushState({ page: 2 }); 
history.back(); 
history.back();
</script>

2你把頁面刷新了,或者瀏覽器把你頁面刷新了

第一個解決方法:

讓頁面臨時緩存一個文件到本地,其實也就是一個值
讓js去判斷這個值是多少,自動鏈接到頁面的某一個位置,這部份跟投錨一樣

要的解決方法就是第2個但是具體怎么實現呢,我沒去驗證過但是理論是可以實現的,因為我找到了更好的方法去實現所有沒做這個看下面的

第2個解決方法:

我看這篇文章后想到了http://zhanchaojiang.iteye.com/blog/1462994

利用瀏覽器的History

可以使用back(),forward(),和go()方法可以在用戶的歷史記錄中前進和后退

window.history.back()
window.history.forward();

向后移動一頁:

window.history.go(-1);

向前移動一頁:

window.history.go(1);
過檢查瀏覽器歷史記錄的length屬性來找到歷史記錄堆棧中的頁面總數window.history.length;

上面題外話哈哈。
我們要用的是添加和修改history實體

Gecko2開始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histtory.pushState()和history.replaceState()這兩個方法,他們允許添加和修改history實體。同時,這些方法會和window.onpostate事件一起工作。

使用history.pushState()方法來修改referrer,這種方法可以被用在經過修改狀態后而為xmlhttpRequest對象創建的http header中。這個referrer會是創建XMLHttpRequest 時document的URL。

pushState 用於向 history 添加當前頁面的記錄,而 replaceState 和 pushState 的用法完全一樣,唯一的區別就是它用於修改當前頁面在 history 中的記錄。

例子

假設http://mozilla.org/foo.html頁面執行了一下JS

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");

這種方法將會使url地址欄顯示http://mozilla.org/bar.html,但瀏覽器不會加載bar.html頁面,即使這個頁面存在也不會加載。

現在再次假設用戶繼續訪問http://google.com,然后點擊后退。這時,url地址欄將會,http://mozilla.org/bar.html,頁面會得到popstate事件(chrome),這個狀態對象會包含一個stateObj的copy。這個頁面看起來像foo.html。+

這時,我們再次點擊后退,URL將變成http://mozilla.org/foo.html,document將得到另一個popstate事件和為null的state對象。這次的返回動作並沒有改變文檔的內容。(也許會過一會嘗試加載…chrome)

pushState方法

pushState()有三個參數:state對象,標題(現在是被忽略,未作處理),URL(可選)。具體細節:

·        state對象 –state對象是一個JavaScript對象,它關系到由pushState()方法創建出來的新的history實體。用以存儲關於你所要插入到歷史 記錄的條目的相關信息。State對象可以是任何Json字符串。因為firefox會使用用戶的硬盤來存取state對象,這個對象的最大存儲空間為640k。如果大於這個數 值,則pushState()方法會拋出一個異常。如果確實需要更多的空間來存儲,請使用本地存儲。

·        title—firefox現在回忽略這個參數,雖然它可能將來會被使用上。而現在最安全的使用方式是傳一個空字符串,以防止將來的修改。或者可以傳一個簡短的標題來表示state

·        URL—這個參數用來傳遞新的history實體的URL,注意瀏覽器將不會在調用pushState()方法后加載這個URL。但也許會過一會嘗試加載這個URL。比如在用戶重啟了瀏覽器后,新的url可以不是絕對路徑。如果是相對路徑,那么它會相對於現有的url。新的url必須和現有的url同域,否則pushState()將拋出異常。這個參數是選填的,如果為空,則會被置為document當前的url。

某種意義上來說,調用pushState()方法很像設置了window.location = “#foo”,這兩者都會創建和激活另一個關聯到當前document的history實體,但pushState()另外有一些優點:

l 新的url可以是任何和當前url同域的url,相比之下,如果只設置hash,window.location會保持在同一個document。

l 如果不需要,你可以不修改url。對比而言,設置window.location = “#foo”;僅產生新的history實體,如果你當前的hash不是#foo

l 你可以將任意的數據與你的新history實體關聯。使用基於hash的方法,需要將所有相關的數據編碼為一個短字符串。

注意,pushState()方法不會使hashchange時間發生,即使是新舊url只是hash不同。

replaceState()方法

history.replaceState() 用起來很像pushState(),除了replaceState()是用來修改當前的history實體而不是創建一個新的。這個方法有時會很有用,當 你需要對某些用戶行為作反應而更新一個state對象或者當前history實體時,可以使用它來更新state對象或者當前history實體的url。

popstate事件

當history實體被改變時,popstate事件將會發生。如果history實體是有pushState和replaceState方法產生的,popstate事件的state屬性會包含一份來自history實體的state對象的拷貝

詳見window.onpopstate

讀取當前的state

讀取現有state

當頁面加載時,它可能會有一個非空的state對象。這可能發生在當頁面設置一個state對象(使用pushState或者replaceState)之后用戶重啟了瀏覽器。當頁面重新加載,頁面將收到onload事件,但不會有popstate事件。然而,如果你讀取history.state屬性,將在popstate事件發生后得到這個state對象

var currentState = history.state;

Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM