實現網頁原路返回 從哪個頁面跳轉過來就返回哪個頁面

2022-04-06 04:14:38 字數 1195 閱讀 9672

一、需求

導航對於pc**或wap**有著相當重要的作用,它有利於提公升使用者體驗,不至於讓使用者迷路。而「返回」就是導航的功能之一,主要體現在wap網頁左上角的「返回」按鈕或鏈結。這裡「返回」是指原路返回,即從哪個頁面跳轉過來就返回哪個頁面。或許你會想,瀏覽器不是有返回按鈕嗎?js不是提供了history.go(-1)或history.back(-1)來實現這個功能嗎?對於簡單情況這是有用的,但是有兩種情況或許不太適用:

(2)瀏覽器返回按鈕和

history物件提供的方法,可能造成無限迴圈。如:初始在a頁面,點選鏈結進入b頁面,然後再點選鏈結進入a頁面,此時在a頁面點選「返回」回到b頁面,而在b頁面點選「返回」又回到a頁面,如此迴圈;又如:初始在a頁面,點選鏈結進入b頁面(因b頁面需要登入故自動跳轉到登入頁),此時在登入頁點選「返回」將先跳轉到b頁面又跳回登入頁,如此反覆。

二、方案

要實現該功能,我們可以先配置每個頁面可能的**頁面列表,並在跳轉後根據**頁面去匹配關聯配置,如果存在則跳轉回此**頁面,否則跳回預設頁面或停留在當前頁面。

(1)服務端實現:將配置儲存在記憶體或持久儲存,服務端程式獲取當前頁面url和**頁面url,通過比對判斷設定「返回」鏈結的href;

(2)瀏覽器端實現:將配置儲存在記憶體、cookie或localstorage中,js獲取當前頁面url和**頁面url,通過比對判斷設定「返回」鏈結的href。

無論服務端實現還是瀏覽器端實現,核心思路都是配置頁面關聯,比對當前頁面**頁面與關聯配置,設定「返回」鏈結的href,不同之處就是配置儲存在服務端還是瀏覽器端,本文以瀏覽器端為例。

三、實現

var config = 

};

2、頁面載入完成後呼叫該方法獲取返回url並設定「返回」鏈結的href。

//defaultbackurl:未找到匹配時的預設返回相對路徑

var getbackurl = function(defaultbackurl)

});return defaultbackurl;

}

3、對於登入頁,可以傳遞**頁面的**url用於返回,傳遞**頁面用於登入成功後自動跳轉。若不想在url中傳遞,當然也可將這兩個url(即登入頁的最近資訊)存入在localstorage或cookie中。

網頁請求從URL到返回資料

從使用者在瀏覽器輸入網域名稱開始,到web頁面載入完畢,這是乙個說複雜不複雜,說簡單不簡單的過程,下文暫且把這個過程稱作網頁載入過程。下面我將依靠自己的經驗,總結一下整個過程。如有錯漏,歡迎指正。閱讀本文需要讀者已有一定的計算機知識,了解tcp dns等。眾所周知,開啟乙個網頁的過程中,瀏覽器會因頁...

wap頁面的返回實現以及go任務

wap規範裡要求每個頁面都必須有 返回 和 返回首頁 兩個選項,在此,用動作來實現 其中屬性的功能及用法介紹如下 1 href 該屬性用於指定目標 url位址,比如讓瀏覽器顯示的卡片的位址及名稱等。該屬性是必選的,其他屬性為可選。2 sendreferer 該屬性用於指定是否傳遞呼叫 href 所指...

網頁中「返回頂部」按鈕的功能及樣式實現

首先,需要把在頁面排版頂部的標籤設定為top 網頁中 回到頂部 按鈕的樣式以及功能的實現 外層用a標籤巢狀,內層設定乙個div,其中包含乙個,div設定大小以及背景顏色,然後a標籤的position屬性設定為fixed,然後right設定20px bottom設定20px 且href設定此頁面頂部標...