[發明專利]一種網頁同屏方法與系統

在審

• 申請號: 202111168319.1
• 申請日: 2021-10-10
• 公開（公告）號: CN113868575A
• 公開（公告）日: 2021-12-31
• 發明（設計）人: 姜波;路玉太;韓文博
• 申請（專利權）人: 青島希望鳥科技有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F16/957
• 代理公司: 暫無信息
• 代理人: 暫無信息

1.一種網頁同屏方法，所述方法應用于服務端，其特征在于，包括：

在所述服務端創建一個瀏覽器實例，在所述瀏覽器實例中加載目標網頁，生成目標網頁實例，在所述目標網頁實例中注入第一腳本，并啟動頁面監聽；

在所述目標網頁實例內容加載完成或者監聽到所述目標網頁實例內容發生變化后，序列化所述目標網頁實例DOM生成序列化后的DOM數據，將所述序列化后的DOM數據作為同屏數據向客戶端發送，或者，將所述目標網頁實例顯示內容在第一Canvas上執行繪制，基于所述第一Canvas獲取Canvas數據，將所述Canvas數據作為同屏數據向所述客戶端發送，或者，基于所述目標網頁實例顯示內容生成圖片數據，將所述圖片數據作為同屏數據向所述客戶端發送；

還包括：

接收所述客戶端發送的網頁操作事件，執行其包含的網頁操作；

其中，所述目標網頁為用于同屏的網址或網頁文件；所述第一腳本至少包括啟動頁面監聽、DOM序列化處理和/或第一Canvas繪制與獲取Canvas數據和/或生成圖片數據、基于接收的網頁操作事件執行網頁操作功能；所述Canvas數據包括基于所述第一Canvas的繪制生成繪制數據或基于所述第一Canvas顯示內容生成圖片數據；所述客戶端通過訪問同屏網頁實現對所述目標網頁實例內容的同屏瀏覽與操作。

2.根據權利要求1所述的網頁同屏方法，其特征在于，還包括：

將預先制作的網頁配置為同屏網頁，或者，基于所述目標網頁實例信息計算生成所述同屏網頁；

基于所述同屏網頁的網址，和/或，所述同屏網頁與所述目標網頁實例之間的對應關系生成同屏網頁鏈接；

根據所述目標網頁實例，向所述客戶端返回對應的所述同屏網頁鏈接；

其中，預置或生成所述同屏網頁，所述同屏網頁中均需包含第二腳本，所述第二腳本至少包括接收與處理所述同屏數據、采集與發送網頁操作事件功能；每一個目標網頁實例，均存在一個同屏網頁鏈接與之對應，所述同屏網頁鏈接包括同屏網頁網址和/或參數信息；將預先制作的網頁配置為同屏網頁，所述同屏網頁對應于多個目標網頁并提供服務，所述同屏網頁鏈接中包含參數信息，所述第二腳本基于所述參數信息計算識別與之對應的所述目標網頁實例；基于所述目標網頁實例信息計算生成所述同屏網頁，所述同屏網頁對應于所述目標網頁實例并提供服務。

3.根據權利要求1所述的網頁同屏方法，其特征在于，還包括：

所述瀏覽器為無頭瀏覽器(Headless browser)。

4.根據權利要求1所述的網頁同屏方法，其特征在于，在所述服務端瀏覽器加載所述目標網頁，注入所述第一腳本之后，還包括：

在所述服務端對應實例化同屏服務實例；

所述同屏服務實例接收所述服務端瀏覽器實例發送的同屏數據，向所述客戶端發送；所述同屏服務實例接收所述客戶端發送的所述網頁操作事件，向所述服務端瀏覽器實例發送；

其中，在所述目標網頁實例，通過所述第一腳本執行，建立與所述同屏服務實例之間的通信連接；在所述同屏網頁，通過所述第二腳本執行，建立與所述同屏服務實例之間的通信連接。

5.根據權利要求1所述的網頁同屏方法，其特征在于，基于所述目標網頁實例生成同屏數據，還包括：

將所述目標網頁實例中發生變化的DOM節點序列化處理，生成序列化后的DOM數據，將所述序列化后的DOM數據生成為所述同屏數據；或者，基于所述第一Canvas的變化，將兩次變化之間的差異化部分生成差異化圖片數據，將所述差異化圖片數據生成為所述同屏數據；或者，基于所述第一Canvas的變化生成繪制數據，將所述繪制數據生成為所述同屏數據；或者，基于所述目標網頁實例顯示內容發生變化的部分生成差異化圖片數據，將所述差異化圖片數據生成為所述同屏數據。