一種頁面跳轉方法及裝置與流程

2023-06-17 03:27:36

本申請涉及網絡技術，特別涉及一種頁面跳轉方法及裝置。

背景技術：

隨著網際網路的發展，移動用戶通過手機中的應用程式(app，application)可以隨時隨地的上網，由於app中每次只能顯示一個頁面(比如應用超文本標記語言html5頁面)，新的頁面會將歷史頁面壓入頁面堆棧，當打開的頁面過多時，不但會導致頁面堆棧滿，同時app也會消耗大量內存，造成app崩潰。另外，在用戶打開多個頁面後，如果需要使用前面頁面的功能，則需要按照頁面打開的逆序多次回退，從而降低了移動終端用戶的上網體驗。

技術實現要素：

有鑑於此，本申請提供一種頁面跳轉方法及裝置，以解決現有技術中由於通過app打開頁面過多時導致app內存消耗過大，並且回退次數過多導致用戶上網體驗差的問題。

具體地，本申請是通過如下技術方案實現的：

第一方面提供一種頁面跳轉方法，所述方法應用於應用程式客戶端，所述應用程式客戶端關聯有樹形路徑信息；所述方法包括：

在當前頁面需要跳轉到目標頁面時，確定跳轉到所述目標頁面的跳轉目標路徑；

基於所述樹形路徑信息獲取所述當前頁面跳轉的所有跳轉合法路徑；

判斷所述跳轉目標路徑是否存在於所述跳轉合法路徑中；

如果存在，則將當前頁面的頁面內容緩存到堆棧的棧頂，並通過所述跳轉目標路徑從所述當前頁面跳轉到所述目標頁面。

第二方面提供一種頁面回退方法，所述方法應用於應用程式客戶端，所述應用程式客戶端關聯有樹形路徑信息；所述方法包括：

在當前頁面需要回退到歷史頁面時，確定堆棧中棧頂緩存內容所對應的緩存頁面，並進一步確定跳轉到所述緩存頁面的回退目標路徑；

基於所述樹形路徑信息獲取所述當前頁面的所有回退合法路徑；

判斷所述目標回退路徑是否存於在所述回退合法路徑中；

如果存在，通過所述目標回退路徑回退到所述歷史頁面，並將所述緩存頁面退棧。

第三方面提供一種頁面跳轉裝置，所述裝置上安裝有應用程式客戶端，所述應用程式客戶端關聯有樹形路徑信息；所述裝置包括：

第一確定單元，用於在當前頁面需要跳轉到目標頁面時，確定第一確定單元，用於在當前頁面需要跳轉到目標頁面時，確定跳轉到所述目標頁面的跳轉目標路徑；

第一獲取單元，用於基於所述樹形路徑信息獲取所述當前頁面跳轉的所有跳轉合法路徑；

第一判斷單元，用於判斷所述跳轉目標路徑是否存在於所述跳轉合法路徑中；

跳轉單元，用於在所述第一判斷單元判斷所述跳轉目標路徑存在於所述跳轉合法路徑中時，則將當前頁面的頁面內容緩存到堆棧的棧頂，並通過所述跳轉目標路徑從所述當前頁面跳轉到所述目標頁面。

第四方面提供一種頁面回退裝置，所述裝置安裝有應用程式客戶端，所述應用程式客戶端關聯有樹形路徑信息；所述裝置包括：

獲取單元，在當前頁面需要回退到歷史頁面時，確定堆棧中棧頂緩存內容所對應的緩存頁面，並進一步確定跳轉到所述緩存頁面的回退目標路徑；

確定單元，基於所述樹形路徑信息獲取所述當前頁面的所有回退合法路徑；

判斷單元，判斷所述目標回退路徑是否存於在所述回退合法路徑中；

回退單元，用於在判斷單元判斷所述目標回退路徑是否存於在所述回退合法路徑中時，通過所述目標回退路徑回退到所述歷史頁面，並將所述緩存頁面退棧。

本申請通過控制打開頁面的路徑，限制頁面打開或回退的層次和順序，使頁面前進或回退跳轉次序化，並解決了打開頁面過多時app內存佔用過高，導致app崩潰的問題。同時也提升用戶使用網頁瀏覽插件的體驗。

應當理解的是，以上的一般描述和後文的細節描述僅是示例性和解釋性的，並不能限制本申請。

附圖說明

圖1是本申請實施例提出的一種頁面跳轉方法的流程圖；

圖2是本申請實施例提出的一種樹形路徑信息的結構示意圖；

圖3是本申請實施例提出的一種頁面跳轉方法的另一流程圖；

圖4是本申請實施例提出的一種頁面跳轉、回退裝置所在設備的結構示意圖；

圖5是本申請實施例提出的一種頁面跳轉裝置的結構示意圖；

圖6是本申請實施例提出的一種頁面回退裝置的結構示意圖。

具體實施方式

這裡將詳細地對示例性實施例進行說明，其示例表示在附圖中。下面的描述涉及附圖時，除非另有表示，不同附圖中的相同數字表示相同或相似的要素。以下示例性實施例中所描述的實施方式並不代表與本申請相一致的所有實施方式。相反，它們僅是與如所附權利要求書中所詳述的、本申請的一些方面相一致的裝置和方法的例子。

在本申請使用的術語是僅僅出於描述特定實施例的目的，而非旨在限制本申請。在本申請和所附權利要求書中所使用的單數形式的「一種」、「所述」和「該」也旨在包括多數形式，除非上下文清楚地表示其他含義。還應當理解，本文中使用的術語「和/或」是指並包含一個或多個相關聯的列出項目的任何或所有可能組合。

應當理解，儘管在本申請可能採用術語第一、第二、第三等來描述各種信息，但這些信息不應限於這些術語。這些術語僅用來將同一類型的信息彼此區分開。例如，在不脫離本申請範圍的情況下，第一信息也可以被稱為第二信息，類似地，第二信息也可以被稱為第一信息。取決於語境，如在此所使用的詞語「如果」可以被解釋成為「在……時」或「當……時」或「響應於確定」。

請參閱圖1，為本申請實施例提出的一種頁面跳轉方法的流程圖；所述方法應用於應用程式(app，application)客戶端，這裡的app可以是網頁瀏覽器，也可以是帶有網頁瀏覽功能的其他app(例如微信等)，對於後一種情況，app網頁瀏覽功能可以通過瀏覽器插件(例如支持html5的插件)的形式實現，所述app客戶端關聯有樹形路徑信息；其中，所述樹形路徑信息可以存儲在客戶端設備本地，也可以存儲在雲端，本實施例不作限制，所述樹形路徑信息的結構示意圖如圖2所示。所述方法包括：

步驟101：在當前頁面需要跳轉到目標頁面時，確定跳轉到所述目標頁面的跳轉目標路徑；

該步驟中，當用戶通過app客戶端(比如微信或手機瀏覽器)上網時，需要從當前頁面跳轉到該下一個新頁面(即目標頁面，比如，html5頁面等)時，首先，app上的瀏覽功能模塊通過獲取到將要跳轉到新頁面的跳轉目標路徑，其具體的獲取方法對於本領域技術人員來說，已是已知技術，在此不再贅述。

本實施例中，app中可以嵌入網絡視圖(webview)組件，以支持html5頁面瀏覽。

步驟102：基於所述樹形路徑信息獲取所述當前頁面跳轉的所有跳轉合法路徑；

其中，所有跳轉合法路徑信息可以利用列表等形式表示，本實施例不做限制。

該步驟中，一種獲取所有跳轉合法路徑的方式為：通過橋接方式的應用接口(jsbridgeapi)查詢所述樹形路徑信息，得到所述當前頁面跳轉的所有跳轉合法路徑。其中，jsbridgeapi為本領技術人員熟知，即客戶端通過橋接方式暴露的javascript應用編程接口。

其中，樹形路徑信息中包括不同級別的頁面以及頁面之間的跳轉路徑。其中頁面包括：首頁，多個業務一級頁面，多個業務二級頁面，……多個業務n級頁面，其中，n為自然數且與頁面緩存的層數相同，所述不同級別的頁面之間可以通過路徑相互跳轉，首頁可以與所有其他級別的頁面相互跳轉。也就是說，首頁就是根節點，業務一級頁面是根節點的子節點，業務二級頁面是業務一級頁面的子節點，……以此類推。

可見，樹形路徑信息的結構是將頁面的跳轉情況組織成一顆樹形結構。為了便於理解，下面以一個簡單的4層結構樹形路徑示意圖為例，如圖2所示，

第一層包括：app首頁；

第二層包括：業務一級頁面1，業務一級頁面2和業務一級頁面3；

第三層包括：業務一級頁面1下的業務二級頁面11和業務二級頁面12，業務一級頁面2下的業務二級頁面21和業務二級頁面22，業務一級頁面3下的業務二級頁面31和業務二級頁面32；

第四層包括：業務二級頁面21下的業務三級頁面211，以及業務二級頁面路徑22下的業務三級頁面221。

圖中每個節點均代表一個頁面。實線箭頭代表頁面跳轉前進方向的路徑，這裡的「前進方向」是指從根節點向葉子節點方向跳轉的路徑(比如從業務一級頁面1可以前進到業務二級頁面11等)。虛線箭頭代表頁面跳轉後退方向的路徑，這裡的「後退方向」是指從葉子節點向根節點方向跳轉的路徑(比如從業務二級頁面21可以回退到業務一級頁面2等)。實際應用中，兩個不同層級的頁面之間可以既存在前進路徑又存在後退路徑，也可以僅存在前進路徑(例如業務二級頁面21與業務三級頁面221之間)或者僅存在後退路徑(例如業務三級頁面221與業務一級頁面2之間)，需要說明的是，本實施例中的圖2，只是示意圖，在實際應用中，業務中的樹形圖可以更簡單些，也可以更複雜些，本實施例不做限制。

其次，將如圖2所示的樹形路徑結構轉換為可以存儲的數據結構，以樹形結構的節點作為存儲單位，分別存儲每個節點的前進路徑和後退路徑。實際存儲時可以採用json格式(是一種輕量級的數據交換格式)，擴展標記語言(xml，extensiblemarkuplanguage)格式或者關係數據表等格式進行存儲。下面以使用json格式為例，對圖2所示的「app首頁」、「業務一級頁面路徑1」、三個節點的存儲機構進行示意性說明：

app首頁：

在上述存儲結構示意中，每個頁面節點都具有三種基本屬性：type、from、to，其中type用於表示該節點的級別；from用於表示該節點的後退路徑，對應圖2中「從該節點指出的虛線箭頭」(即該節點可以退回至哪些節點，如果不存在則from為空)；to用於表示該節點的前進路徑，對應圖2中「從該節點指出的實線箭頭」(即該節點可以前進至哪些節點，如果不存在則to為空)。

將上述步驟中將樹形路徑結構轉換為可以存儲的結構存儲在手機app客戶端中。其存儲的方式有多種：比如json格式、xml格式存儲到本地文件中，也可以放入html5提供的localstorage中；關係數據表結構的數據可以存儲到輕型(sqlite)資料庫中，也可以存儲到html5提供的indexeddb(一種為了能夠在客戶端存儲可觀數量的結構化數據)中等等，本實施例不再一一說明。

最後，提供查詢該結構的jsbridgeapi，其中，api為應用程式接口。

步驟103：判斷所述跳轉目標路徑是否存在於所述跳轉合法路徑中，如果存在，執行步驟104；否則，執行步驟105；

步驟104：將當前頁面的頁面內容緩存到堆棧中，並通過所述跳轉目標路徑從所述當前頁面跳轉到所述目標頁面；

步驟105：提示出錯。

該步驟中，判斷從本地獲取的所有跳轉合法路徑中是否包括所確定的跳轉目標路徑，如果包括，則將當前頁放入頁面的頁面路徑緩存堆棧中，然後按照跳轉目標路徑直接跳轉目標頁面。如果不包括，則提示用戶跳轉出錯信息。

本申請通過控制打開頁面的路徑，限制頁面打開的層次和順序，使頁面前進跳轉次序化，並解決了打開頁面過多時app內存佔用過高，導致app崩潰的問題。本申請方案可以有效應用於瀏覽器或其他app的瀏覽器插件(例如支持html5的插件)中。

可選的，在另一實施例中，該實施例在上述實施例的基礎上，還可以包括：

1)在當前頁面需要回退到歷史頁面時，確定堆棧中棧頂緩存內容所對應的緩存頁面，並進一步確定跳轉到所述緩存頁面的回退目標路徑；

2)基於所述樹形路徑信息獲取所述當前頁面的所有回退合法路徑；

3)判斷所述目標回退路徑是否存於在所述回退合法路徑中；如果存在，通過所述目標回退路徑回退到所述歷史頁面，並將所述緩存頁面退棧。

具體的頁面回退方法可參見下面的實施例，本實施例暫不做詳細說明。

本申請通過控制打開頁面的路徑，限制頁面回退的層次和順序，使頁面回退跳轉次序化，並解決了打開頁面過多時app內存佔用過高，導致app崩潰的問題，本申請方案可以有效應用於瀏覽器或其他app的瀏覽器插件(例如支持html5的插件)中。

還請參閱圖3，為本申請實施例提供的一種頁面回退方法的流程圖，所述方法應用於應用程式app客戶端，所述app客戶端關聯有樹形路徑信息；其中，樹形路徑信息的結構示意圖如圖2所示，該樹形路徑信息可以存儲在客戶端設備本地，也可以存儲在雲端，本示例不作限制。具體詳見上述，在此不再贅述。所述方法包括：

步驟301：在當前頁面需要回退到歷史頁面時，確定堆棧中棧頂緩存內容所對應的緩存頁面，並進一步確定跳轉到所述緩存頁面的回退目標路徑；

與普通的頁面「跳轉」操作不同，頁面「回退」並不是針對一個特定的目標頁面，而是針對當前頁面的歷史頁面，即跳轉到當前頁面的「前一個」頁面，根據前面實施例的描述，該「前一個」頁面會被緩存至堆棧的棧頂。那麼，根據本實施例，在當前頁面需要回退到歷史頁面時，首先確定堆棧中棧頂緩存內容所對應的緩存頁面，並進一步確定跳轉到所述緩存頁面的回退目標路徑。

步驟302：基於所述樹形路徑信息獲取所述當前頁面的所有回退合法路徑；

其中，所有回退合法路徑信息可以利用列表的形式標識，當然，也可以是其他的形式，本實施例不做限制。

該步驟中，一種獲取所有回退合法路徑的方式為：通過jsbridgeapi查詢所述樹形路徑信息，得到所述當前頁面跳轉的所有回退合法路徑。

其中，樹形路徑信息的結構示描述具體詳見上述，在此不再贅述。

步驟303：判斷所述目標回退路徑是否存於在所述回退合法路徑中，如果存在，執行步驟304；否則，執行步驟305；

步驟304：通過所述目標回退路徑回退到所述歷史頁面，並將所述緩存頁面退棧；

步驟305：回退到合法回退路徑對應的頁面。

該步驟303-305中，如果用戶需要在當前頁做回退操作時，比如該用戶通過掃描二維碼打開的頁面後需要回退，可以通過jsbridgeapi查到該頁面的回退合法路徑(即from屬性所對應的頁面)，然後判斷堆棧棧頂所對應的頁面的跳轉路徑(即回退目標路徑)是否於在所述回退合法路徑中，如果是，則通過所述目標回退路徑回退到所述歷史頁面，並將所述緩存頁面退棧。否則回退到某個合法回退路徑對應的頁面。

本申請通過控制打開頁面的路徑，限制頁面回退的層次和順序，使頁面回退跳轉次序化，並解決了打開html5頁面過多時app內存佔用過高，導致app崩潰的問題。本申請方案可以有效應用於瀏覽器或其他app的瀏覽器插件(例如支持html5的插件)中。

與前述頁面跳轉方法和/或頁面回退方法的實施例相對應，本申請還提供了一種頁面跳轉裝置和/或頁面回退裝置的實施例。

本申請提供的頁面跳轉裝置和/或頁面回退裝置的實施例可以應用在設備上。裝置實施例可以通過軟體實現，也可以通過硬體或者軟硬體結合的方式實現。以軟體實現為例，作為一個邏輯意義上的裝置，是通過其所在設備的處理器將非易失性存儲器中對應的電腦程式指令讀取到內存中設備的一種硬體結構圖，除了圖4所示的處理器、內存、網絡接口、以及非易失性存儲器之外，實施例中裝置所在的設備通常根據該設備的實際功能，還可以包括其他硬體，對此不再贅述。

請參考圖5，為本申請實施例提供的一種頁面跳轉裝置的結構示意圖，所述裝置上安裝有app客戶端，所述app客戶端關聯有樹形路徑信息；所述裝置包括：第一確定單元51，第一獲取單元52，第一判斷單元53和跳轉單元54，其中，

所述第一確定單元51，用於在當前頁面需要跳轉到目標頁面時，確定跳轉到所述目標頁面的跳轉目標路徑；

所述第一獲取單元52，用於基於所述樹形路徑信息獲取所述當前頁面跳轉的所有跳轉合法路徑；

所述判斷單元53，用於判斷所述跳轉目標路徑是否存在於所述跳轉合法路徑中；

所述跳轉單元54，用於在所述第一判斷單元判斷所述跳轉目標路徑存在於所述跳轉合法路徑中時，則將當前頁面的頁面內容緩存到堆棧的棧頂，並通過所述跳轉目標路徑從所述當前頁面跳轉到所述目標頁面。

可選的，在另一實施例中，所述第一獲取單元52，具體用於通過橋接方式的應用接口(jsbridgeapi)查詢所述樹形路徑信息，得到所述當前頁面跳轉的所有跳轉合法路徑。

其中，樹形路徑信息所述樹形路徑信息中包括：不同級別的頁面以及頁面之間的跳轉路徑，其中頁面包括：首頁，多個業務一級頁面，多個業務二級頁面，……多個業務n級頁面，其中，n為自然數且與頁面緩存的層數相同，不同級別的頁面之間通過路徑相互跳轉，首頁與所有其他級別的頁面通過路徑相互跳轉。其結構的示意圖具體詳見上述，在此不再贅述。

可選的，在另一實施例，所述裝置還可以包括：第二獲取單元，第三獲取單元，第二判斷單元和回退單元(圖中未示)，其中，

第二獲取單元，用於在當前頁面需要回退到歷史頁面時，確定堆棧中棧頂緩存內容所對應的緩存頁面，並進一步確定跳轉到所述緩存頁面的回退目標路徑；

第三獲取單元，用於基於所述樹形路徑信息獲取所述當前頁面需要回退的所有回退合法路徑；

第二判斷單元，用於判斷所述目標回退路徑是否存於在所述回退合法路徑中；

回退單元，用於通過所述目標回退路徑回退到所述歷史頁面，並將所述緩存頁面退棧。

上述裝置中各個單元的功能和作用的實現過程具體詳見上述方法中對應步驟的實現過程，在此不再贅述。

還請參閱圖6，為本申請實施例提供的一種頁面回退裝置的結構示意圖，所述裝置安裝有app客戶端，所述app客戶端關聯有樹形路徑信息；所述裝置包括：獲取單元61，確定單元62，判斷單元63和回退單元64，其中，

所述獲取單元61，用於在當前頁面需要回退到歷史頁面時，確定堆棧中棧頂緩存內容所對應的緩存頁面，並進一步確定跳轉到所述緩存頁面的回退目標路徑；

確定單元62，用於基於所述樹形路徑信息獲取所述當前頁面的所有回退合法路徑；

判斷單元63，用於判斷所述目標回退路徑是否存於在所述回退合法路徑中；

回退單元64，用於在判斷單元判斷所述目標回退路徑是否存於在所述回退合法路徑中時，通過所述目標回退路徑回退到所述歷史頁面，並將所述緩存頁面退棧。

可選的，在另一實施例中，所述獲取單元62，具體用於通過橋接方式的應用接口(jsbridgeapi)查詢所述樹形路徑信息，得到所述當前頁面跳轉的所有回退合法路徑。

其中，樹形路徑信息詳見上述，在此不再贅述。

上述裝置中各個單元的功能和作用的實現過程具體詳見上述方法中對應步驟的實現過程，在此不再贅述。

本申請方案可以有效應用於瀏覽器或其他app的瀏覽器插件(例如支持html5的插件)中，通過規劃webview打開html5路徑，限制html5頁面打開的層次和順序，使html5頁面前進和後退跳轉次序化，並解決打開html5頁面過多時app崩潰的問題。

也就是說，通過控制webview打開頁面的順序，使頁面前進和後退完全有序，不再依賴相對隨意的用戶操作，另外會控制頁面堆棧的層次，解決堆棧中頁面過多的問題，從而提升html5插件的用戶體驗。當用戶通過其他app進入活動app的html5頁面後，點擊後退鍵，將返回到我們希望用戶停留的頁面，從而有效提升用戶對活動頁面的關注度。

對於裝置實施例而言，由於其基本對應於方法實施例，所以相關之處參見方法實施例的部分說明即可。以上所描述的裝置實施例僅僅是示意性的，其中所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位於一個地方，或者也可以分布到多個網絡單元上。可以根據實際的需要選擇其中的部分或者全部模塊來實現本申請方案的目的。本領域普通技術人員在不付出創造性勞動的情況下，即可以理解並實施。

以上所述僅為本申請的較佳實施例而已，並不用以限制本申請，凡在本申請的精神和原則之內，所做的任何修改、等同替換、改進等，均應包含在本申請保護的範圍之內。