[發明專利]一種網頁內容逆向渲染的方法及系統裝置

在審

• 申請號: 201810359119.6
• 申請日: 2018-04-20
• 公開（公告）號: CN108595096A
• 公開（公告）日: 2018-09-28
• 發明（設計）人: 何嵩
• 申請（專利權）人: 武漢楚鼎信息技術有限公司
• 主分類號: G06F3/0485
• 分類號: G06F3/0485;G06F17/30
• 代理公司: 暫無信息
• 代理人: 暫無信息

本發明公開了一種網頁內容逆向渲染的方法及系統裝置，其所述方法步驟如下：啟動瀏覽器，加載網頁；觸發DOMContentLoaded事件，獲取向上滾動預留高度；通過Javascript scrollTop方法將滑條定位到預留高度的位置；通過Javascript scroll事件監聽向上滾動頁面操作，獲取scrollTop值S1；創建一個新的文檔對象模型DOM存儲至瀏覽器內存變量D1中；獲取服務器發送的展示內容裝載到DOM中；計算所述DOM的高度存儲至內存變量D2中；將所述DOM插入到當前HTML文檔的頂部，同時將滑條位置向下移動；銷毀所述DOM和H4，繼續執行監聽事件。本發明能實現在瀏覽器中「由下至上」的逆向瀏覽方式。通過逆向瀏覽交互查看以前的歷史信息，相比現在大部分需要跳出頁面的交互方式更符合時間軸的連續性，操作體驗更為連貫。

技術領域

本發明本發明涉及網頁技術，特別涉及移動互聯網領域的網頁應用中，是基于瀏覽器技術的一種實現方案，主要的實現語言是超文本標記語言（HTML）、層疊樣式表（CSS）、腳本語言（Javascript）。

背景技術

網頁是現在最普遍的信息載體，它被廣泛的應用到各種手機軟件、臺式電腦軟件中，而瀏覽器是閱讀網頁內容并讓用戶與這些文件交互的一種軟件。

瀏覽器在渲染一個網頁時是按照「由上至下」順序的渲染，所以我們在瀏覽網頁時的操作都是從上至下來滾動網頁查看內容。這種瀏覽方式主要是符合人們的閱讀習慣，比如「由上至下」閱讀文章等。

如果能以網頁的形式實現在瀏覽器中「由下至上」的逆向瀏覽方式，那么這種交互方式能幫助我們在網頁中實現更多的產品形態。。

發明內容

本發明提供了一種網頁內容逆向渲染的方法及系統裝置，用于實現在瀏覽器中「由下至上」的逆向瀏覽方式，其具體技術方案如下所述：

第一方面，一種網頁內容逆向渲染的方法，其方法步驟如下：

步驟一，啟動瀏覽器，加載網頁；

步驟二，所述瀏覽器觸發 DOMContentLoaded 事件，獲取向上滾動預留高度值H3；

步驟三，所述瀏覽器通過 Javascript scrollTop 方法將滑條定位到距HTML文檔頂部H3距離的位置；

步驟四，所述瀏覽器通過 Javascript scroll 事件監聽模塊監聽向上滾動頁面操作，所述監聽模塊監聽到向上滾動頁面操作，獲取scrollTop值S1；

步驟五，所述瀏覽器獲取到所述scrollTop 值S1為0時，創建一個新的文檔對象模型DOM存儲至瀏覽器內存變量 D1 中。

步驟六，所述瀏覽器向服務器發起請求，所述瀏覽器獲取服務器發送的展示內容裝載到 所述DOM中。

步驟七，所述瀏覽器計算所述DOM的高度值H4存儲至內存變量 D2 中；

步驟八，所述瀏覽器獲取所述DOM插入到當前 HTML 文檔的頂部，同時將滑條位置向下移動H4距離；

步驟九，銷毀所述DOM和H4，繼續執行監聽事件，循環步驟三至步驟八。

結合第一方面，在所述第一方面的第一種可能的實現方式中，所述步驟2還包括：所述瀏覽器觸發 DOMContentLoaded 事件，計算網頁內容高度值H1，計算viewport（瀏覽器顯示頁面內容的區域）高度值H2，當 H1 ＜ H2 + H3 時，將網頁的最小高度min-height設置為 H2 + H3。