存儲介質、電子裝置、網頁內容的顯示方法和裝置與流程

本發明涉及互聯網領域，具體而言，涉及一種存儲介質、電子裝置、網頁內容的顯示方法和裝置。

背景技術：

隨著移動互聯網的高速發展，給移動通信終端用戶打開了一扇通過互聯網世界的大門，移動互聯網結合了移動通信的便利性和互聯網的豐富內容，成為通信業和互聯網業融合發展的交叉領域，具有巨大的市場前景。

其中一個表現在于移動端網頁的權重越來越高，移動端微官網、微營銷、微系統等越來越多，而且都是基于網頁形態存在的，在傳播宣傳過程中用戶可以在即時通訊應用、社交應用、微博等平臺中傳播移動網頁，且這些移動網頁的形態均是為移動終端定制優化的，但是目前移動端和計算機pc端的信息傳播存在互通的必要，移動端頁面的鏈接很可能在pc平臺中傳播并可以通過鏈接點擊訪問移動網頁。

由于這些移動網頁的形態均是為移動終端定制優化的，但是由于移動終端設備的屏幕分辨率和pc的分辨率不等、操作系統也不盡相同等原因，造成了這些移動網頁的兼容性較差，如普通的移動網頁使用pc瀏覽器瀏覽的效果不好，甚至出現亂碼而影響閱讀，針對移動端的程序代碼交互邏輯在pc端也無法實現，可用性和顯示效果均非常差。

針對相關技術中在計算機終端上瀏覽移動網頁時出現亂碼的技術問題，目前尚未提出有效的解決方案。

技術實現要素：

本發明實施例提供了一種存儲介質、電子裝置、網頁內容的顯示方法和裝置，以至少解決相關技術中在計算機終端上瀏覽移動網頁時出現亂碼的技術問題。

根據本發明實施例的一個方面，提供了一種網頁內容的顯示方法，該變顯示方法包括：在計算機終端的網頁客戶端上接收到目標指令，其中，目標指令用于指示在網頁客戶端上顯示目標網頁內容；響應于目標指令，獲取目標網頁內容；在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，其中，第一區域與移動終端的第二顯示窗口具有相同形狀，目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示。

根據本發明實施例的另一方面，還提供了一種網頁內容的顯示裝置，該顯示裝置包括：接收單元，用于在計算機終端的網頁客戶端上接收到目標指令，其中，目標指令用于指示在網頁客戶端上顯示目標網頁內容；響應單元，用于響應于目標指令，獲取目標網頁內容；第一顯示單元，用于在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，其中，第一區域與移動終端的第二顯示窗口具有相同形狀，目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示。

在本發明實施例中，在計算機終端的網頁客戶端上接收到目標指令(目標指令用于指示在網頁客戶端上顯示目標網頁內容)時，獲取目標網頁內容；在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，該目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示，通過采用與第一區域相同的顯示格式進行內容顯示，可以解決相關技術中在計算機終端上瀏覽移動網頁時出現亂碼的技術問題，進而達到在計算機終端上完整的復現移動網頁的技術效果。

附圖說明

此處所說明的附圖用來提供對本發明的進一步理解，構成本申請的一部分，本發明的示意性實施例及其說明用于解釋本發明，并不構成對本發明的不當限定。在附圖中：

圖1是根據本發明實施例的網頁內容的顯示方法的硬件環境的示意圖；

圖2是根據本發明實施例的一種可選的網頁內容的顯示方法的流程圖；

圖3是根據本發明實施例的可選的頁面整體布局的示意圖；

圖4是根據本發明實施例的可選的web系統的示意圖；

圖5是根據本發明實施例的可選的dom樹的示意圖；

圖6是根據本發明實施例的一種可選的網頁內容的顯示方法的流程圖；

圖7是根據本發明實施例的可選的移動事件和pc事件的示意圖；

圖8是根據本發明實施例的可選的生成二維碼的示意圖；

圖9是根據本發明實施例的一種可選的網頁內容的顯示裝置的示意圖；以及

圖10是根據本發明實施例的一種終端的結構框圖。

具體實施方式

為了使本技術領域的人員更好地理解本發明方案，下面將結合本發明實施例中的附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發明一部分的實施例，而不是全部的實施例。基于本發明中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都應當屬于本發明保護的范圍。

需要說明的是，本發明的說明書和權利要求書及上述附圖中的術語“第一”、“第二”等是用于區別類似的對象，而不必用于描述特定的順序或先后次序。應該理解這樣使用的數據在適當情況下可以互換，以便這里描述的本發明的實施例能夠以除了在這里圖示或描述的那些以外的順序實施。此外，術語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統、產品或設備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對于這些過程、方法、產品或設備固有的其它步驟或單元。

首先，在對本發明實施例進行描述的過程中出現的部分名詞或者術語適用于如下解釋：

url：英文全稱為uniformresourelocator，即統一資源定位器，統一資源定位符是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的url，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。

ajax即“asynchronousjavascriptandxml”(異步javascript和xml)，是指一種創建交互式網頁應用的網頁開發技術。通過在后臺與服務器進行少量數據交換，ajax可以使網頁實現異步更新。

實施例1

根據本發明實施例，提供了一種網頁內容的顯示方法的方法實施例。

可選地，在本實施例中，上述網頁內容的顯示方法可以應用于如圖1所示的由服務器102和終端104所構成的硬件環境中。如圖1所示，服務器102通過網絡與終端104進行連接，上述網絡包括但不限于：廣域網、城域網或局域網，終端104并不限定于pc、手機、平板電腦等。本發明實施例的網頁內容的顯示方法可以由終端104來執行，還可以是由服務器102和終端104共同執行。其中，終端104執行本發明實施例的網頁內容的顯示方法也可以是由安裝在其上的客戶端來執行。

圖2是根據本發明實施例的一種可選的網頁內容的顯示方法的流程圖，如圖2所示，該方法可以包括以下步驟：

步驟s202，在計算機終端的網頁客戶端上接收到目標指令，目標指令用于指示在網頁客戶端上顯示目標網頁內容。

上述的計算機終端即pc端，pc端可采用windows、linux、macosx等系統。

上述的網頁客戶端為能夠在計算機終端上顯示網頁的客戶端，包括但不局限于網頁瀏覽器、媒體應用、社交應用、游戲應用、即時通訊應用。

上述的目標網頁內容的形態是為移動終端定制優化過的，此處的定制優化至少包括：1)與移動終端的顯示屏幕(或者瀏覽器的顯示區域)尺寸適配；2)目標網頁內容的排版方式與移動終端的瀏覽器中的網頁模板適配。

針對上述的目標網頁內容，存在一個對應的統一資源定位符url(即第一鏈接地址)，上述的目標指令即用于指示訪問第一鏈接地址的指令。

步驟s204，響應于目標指令，獲取目標網頁內容。

計算機終端在目標指令的觸發下，通過https通訊協議從web服務器獲取上述的目標網頁內容。

步驟s206，在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，第一區域與移動終端的第二顯示窗口具有相同形狀，目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示。

上述的第一顯示窗口為網頁客戶端的一個窗口(可以為當前窗口)，第一區域為第一顯示窗口的一部分。

需要說明的是，上述的第一區域是移動終端進行網頁內容顯示的區域，對于任意的移動終端，只要確定了其顯示屏幕或者瀏覽器的顯示區域的尺寸大小，那么就可以生成與之相同尺寸的網頁模板(相當于第一區域)，該模板中網頁內容的排版方式(也即顯示方式)與瀏覽器的用于顯示目標網頁內容的第二顯示窗口的排版方式相同，也可直接采用上述第二顯示窗口的網頁模板。

也即在本申請中，由于網頁模板的尺寸大小和排版方式，與瀏覽器的顯示區域的尺寸大小和排版方式相同，可以直接將目標網頁內容的原始數據填充至網頁模板中，在第一區域中顯示目標網頁內容。

可選地，對于上述的網頁模板，其物理形狀與移動終端的瀏覽器的顯示區域的物理形狀相同，其尺寸大小可以是按照指定比例對瀏覽器的顯示區域進行縮小或放大得到的，此時，在網頁模板中顯示的內容也可按照指定比例縮小或者放大即可，而不用進行排版的調整。

在本申請中，第一顯示窗口內的第一區域與第二顯示窗口的尺寸相互匹配，此處的匹配包括上述的尺寸和外形相同、外形相同但尺寸成比例關系兩種情況。采用這種方式進行顯示，可以直接利用用于在移動終端顯示目標網頁內容的原始數據進行顯示，而不需要進行轉換，提高顯示的效率的同時保證了顯示的內容的完整性。

通過上述步驟s202至步驟s206，在計算機終端的網頁客戶端上接收到目標指令(目標指令用于指示在網頁客戶端上顯示目標網頁內容)時，獲取目標網頁內容；在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，該目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示，通過采用與第一區域相同的顯示格式進行內容顯示，可以解決相關技術中在計算機終端上瀏覽移動網頁時出現亂碼的技術問題，進而達到在計算機終端上完整的復現移動網頁的技術效果。

在本申請的技術方案具備以下幾個特征：以pc頁面區域渲染載入移動頁面保持移動終端大小的方式展現移動頁面；以pc頁面區域渲染交互行為全真模擬移動端交互事件的方式；以pc頁面全真模擬體驗并配合二維碼對用戶進行引導；通過url對比相對路徑的規則將第三方網頁數據外鏈接相對路徑轉為絕對路徑。下面結合步驟s202至步驟s206詳述：

在步驟s202提供的技術方案中，在計算機終端的網頁客戶端上接收到目標指令，針對目標網頁內容，存在一個對應第一鏈接地址，該目標指令包括但不局限于如下的產生方式：

1)當用戶在計算機終端點擊第一鏈接地址時產生；

2)從別的網頁跳轉至目標網頁內容時產生。

在步驟s204提供的技術方案中，響應于目標指令，獲取目標網頁內容。

在獲取目標網頁內容時，計算機終端可以按照如下方式：獲取目標指令所指示的第二鏈接地址(該第二鏈接地址可以為上述的第一鏈接地址，也可以為專用于pc訪問目標網頁內容的地址)，第二鏈接地址為目標網頁內容的來源地址；終端發送內容請求至第二鏈接地址所指示的網頁服務器，內容請求用于向網頁服務器請求目標網頁內容；接收網頁服務器響應內容請求所返回的目標網頁內容。下面結合如下的子步驟進行詳述：

步驟s2042，判斷設備ua。

ua的英文全稱為useragent，中文名為用戶代理，它是一個特殊字符串頭，使得服務器能夠識別客戶端使用的操作系統類型及版本、cpu類型、瀏覽器類型及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。

在終端的客戶端上，通過預先適配的javascript引擎，獲取設備ua信息，從而便于客戶端或者服務器判斷是移動終端還是pc終端。

一種可選的ua判斷終端類型的方法如下，若ua中存在字符串android、iphone、ipad則設定用戶訪問該頁面的設備為蘋果或安卓移動終端設備。對于其他類型的設備，也可以類似的方式根據其ua標志字符串來判斷具體的終端設備類型。

步驟s2044，若為pc終端則跳轉到pc頁面地址。

若根據ua判斷出需要顯示移動網頁(即目標網頁內容)的終端為pc終端，則跳轉到pc頁面數據轉換頁面地址，該頁面是隨機生成的一個頁面，頁面整體布局如圖3所示，包括第一顯示窗口(即網頁模板)和第二顯示窗口，第一區域用于顯示移動網頁，第二區域用于顯示有該移動網頁的鏈接地址的二維碼。

可選地，第二區域與第一區域包括但不局限于如下形式：

(1)第二區域和第一區域為相互獨立的兩個區域；

(2)第二區域部分或全部地與第一區域重合，但是第二區域以半透明或全透明的方式顯示，避免對第一區域內的顯示內容造成干擾。

步驟s2046，獲取移動網頁數據文件。

可以預先編寫好用于獲取ua的javascript代碼，并將編寫好的代碼保存為一個html文件，在html文件的“<body>”處加上js事件(即允許加載上述的javascript代碼中所執行的事件)，以讓上面的js事件運行。

在js事件執行時，通過javascript獲取來路url(即目標頁面內容的來路頁面的url)，通過ajax請求來請求該來路url獲取這個頁面的html字符串數據信息。

可選地，可以用“document.referrer”方法來路url；可使用javascript向服務器提出請求(xmlhttprequest，也即內容請求)，通過這個請求，javascript可在不重載頁面的情況與web服務器交換數據。

在執行步驟s2046時，如圖4所示，當用戶在web網頁界面點擊網頁鏈接時，調用ajax引擎來獲取網頁內容，ajax引擎通過xmlhttprequest向web服務器發起請求，web服務器的servlet(全稱為serverapplet)模塊對請求進行響應，從數據庫查詢到對應的網頁數據并生成動態web內容(即網頁內容)，并將生成的網頁內容返回給ajax引擎，觸發回調函數利用網頁內容對web界面顯示的內容進行更新，具體是直接將網頁內容的原始數據填充到第一區域的網頁模板中。

可選地，在網頁內容發生更新時，傳統的網頁(不使用ajax)如果需要更新內容，必須重載整個網頁頁面。在本申請中，ajax在瀏覽器與web服務器之間使用異步數據傳輸，這樣就可使網頁從服務器請求少量的信息，而不是整個頁面，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，從而可以降低流量消耗。

在步驟s206提供的技術方案中，在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，其中，目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示。

上述的將目標網頁內容顯示到第一區域，即利用目標網頁內容渲染到網頁模板(也即pc頁面模擬框)。

獲取請求到的html字符串數據，字符串轉換為dom樹(一種可選的網頁內容的dom樹如圖5所示)模擬渲染到模擬框中，再通過利用dom樹的特點，找出所有外鏈接，匹配來路url和外鏈接路徑，將這個請求過來移動頁面的外部鏈接由相對路徑全部轉換為相對路徑。

一種可選的網頁內容的dom樹如圖5和如下的代碼所示：

上述的“<>”相當于定義一個元素，如“<html>”相當于定義根源素html，“</>”相當于表示一個元素的子節點到此為止，如“</html>”表示根源素html的終結，以后定義的元素不再是其子節點。

上述的文本包括元素“title”的“htmldom”、元素h1的“dom的結構”、元素body的“鏈接”。另外，還定義了屬性href的值為“href”。

需要說明的是，dom是documentobjectmodel文檔對象模型的縮寫。根據w3cdom規范，dom是一種與瀏覽器，平臺，語言無關的接口，使得可以訪問頁面中其他的標準組件。簡單理解，dom解決了netscape的javascript和microsoft的javascript之間的沖突，給予web設計師和開發者一個標準的方法，來訪問他們站點中的數據、腳本和表現層對象。

通過使用dom樹，可以直接從目標網頁內容中原始數據中獲取相應的內容來填充至網頁模板中進行渲染和顯示。

可選地，在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容的同時或之后，在計算機終端上檢測到第一事件；按照預設關系確定與第一事件對應的第二事件，預設關系中保存有在計算機終端上觸發的事件與在移動終端上觸發的事件之間的對應關系，在移動終端上觸發的第二事件用于指示在第二顯示窗口中執行任務；在第一顯示窗口中執行第二事件所指示執行的任務。

上述的第一事件即用戶在計算機終端上通過輸入設備(如鍵盤、鼠標、攝像頭等)觸發的事件，也即，在計算機終端上，可以將在計算機終端上觸發的事件轉換為在移動終端上觸發的事件，而不用改變網頁本申請的交互邏輯，即可實現網頁與用戶之間的交互。

可選地，按照預設關系確定與第一事件對應的第二事件包括以下幾種情況：

(1)在第一事件為在第一顯示窗口的輸入控件中通過鍵盤輸入內容的事件時，根據預設關系確定與第一事件對應的第二事件，第二事件為在第二顯示窗口的輸入控件中通過觸控操作輸入內容的事件，如在搜索欄輸入搜索關鍵詞、在評價欄輸入評價信息等。

(2)在第一事件為在第一顯示窗口中通過鼠標觸發的事件時(如在圖3中點擊“上一屏”或“下一屏幕”的事件)，根據預設關系確定與第一事件對應的第二事件，第二事件為在第二顯示窗口中通過觸控操作進行內容切換的事件，如在手機屏幕上的滑動。

(3)在第一事件為通過第一顯示窗口中的虛擬按鈕觸發的事件(如窗口中修改排版格式、字體、字體顏色的按鈕，或者調整顯示方向的按鈕等)時，根據預設關系確定與第一事件對應的第二事件，第二事件為在移動終端上觸發的用于修改目標網頁內容的內容屬性的事件，如在設置中的顯示方式調整、排版格式、字體、字體顏色等。

對應的，在第一顯示窗口中執行第二事件所指示執行的任務包括以下即種情況：

(1)在第一事件為鼠標或者鍵盤觸發的調整當前顯示的網頁內容的事件時，在第一顯示窗口中執行與第一事件對應的第一任務，以將第一顯示窗口內顯示的網頁內容從第一網頁內容調整為第二網頁內容，目標網頁內容包括第一網頁內容和第二網頁內容，第一網頁內容和第二網頁內容不完全相同。

(2)在第一事件為鼠標或者鍵盤觸發的調整內容屬性的事件時，在第一顯示窗口中執行與第一事件對應的第二任務，以更改第一顯示窗口內顯示的目標網頁內容的內容屬性，內容屬性包括目標網頁內容字體、字號、顏色以及排版方式。

(3)在第一事件為鼠標或者鍵盤觸發的輸入信息的事件時，在第一顯示窗口中執行第三任務，以從第一顯示窗口的輸入控件中獲取輸入的內容，輸入控件用于輸入內容。

可選地，在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容的同時或之后，在第一顯示窗口內的第二區域內顯示圖像信息，圖像信息中攜帶有用于在移動終端上獲取網頁內容的第一鏈接地址。

如圖3所示，在第二區域顯示二維碼的圖片，在用戶瀏覽的同時，可通過掃描該二維碼圖片在移動終端上進行瀏覽。

本申請提供了一種在pc端瀏覽移動網頁的方案，通過構建一個pc頁面平臺，在pc頁面中設定一個移動終端(如手機、平板燈)大小的顯示框，并將所訪問的移動頁面整體請求并注入該顯示框中，使在移動終端設備顯示的小屏頁面在pc顯示框中顯示，通過將pc事件轉換為移動網頁事件，使原有移動端的交互得以還原，還可在右側生成移動頁面網址二維碼引導用戶通過手機掃碼進入移動網頁。通過該方案提升了移動頁面在pc端的可訪問性與用戶體驗，并且引導用戶手機掃碼進入移動頁面，增加網頁入口，降低了傳播過程中的跳出率。

本發明還提供了一種優選實施例，該優選實施例如圖6所示：

場景說明，對于在手機上顯示移動網頁(也即目標網頁內容)，需要在pc端進行顯示：

步驟s602，pc終端上的網頁客戶端根據ua判斷終端類型，即判斷是手機還是pc端，若是pc端則跳轉到pc頁面地址(也即上述的第一鏈接地址)。

步驟s604，客戶端發送內容請求到web服務器，并接收服務器響應該請求所返回的移動頁面(也即網頁數據文件或目標網頁內容的原始數據)。

步驟s606，將得到的網頁數據文件渲染到pc頁面模擬框。

步驟s608，檢測到用戶的pc事件。

步驟s610，將pc事件轉換為移動事件。

(1)對于移動端的oninput事件(輸入事件)，如圖7所示：

oninput事件：當用戶向“<input>”中嘗試輸入時執行對應的javascript，oninput事件在用戶輸入時觸發，如在“<input>”或“<textarea>”元素的值發生改變時觸發。

對于上述的oninput事件可以用計算機的鍵盤相關的事件來替代，如onkeypress事件、onkeyup事件以及onkeydown事件。

onkeypress事件在用戶按下并放開任何字母數字鍵時發生。

onkeyup事件在用戶放開任何先前按下的鍵盤鍵時發生。

onkeydown事件在用戶按下任何鍵盤鍵(包括系統按鈕，如箭頭鍵和功能鍵)時發生。

(2)對于移動端的觸控事件

touchstart事件，當手指觸摸屏幕時候觸發，即使已經有一個手指放在屏幕上也會觸發。

touchmove事件，當手指在屏幕上滑動的時候連續地觸發，在這個事件發生期間，調用preventdefault()事件可以阻止滾動。

touchend事件，當手指從屏幕上離開的時候觸發。

對于上述移動終端上的事件，可分別用電腦端的如下事件替代：

當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生mousedown事件。與click事件不同，mousedown事件僅需要按鍵被按下，而不需要松開即可發生。可用于替代touchstart事件。

當鼠標指針在指定的元素中移動時，就會發生mousemove事件。mousemove()方法可用于觸發mousemove事件，可規定當發生mousemove事件時運行的函數。

當點擊元素時，會發生click事件。當鼠標指針停留在元素上方，然后按下并松開鼠標左鍵時，就會發生一次click。click()方法觸發click事件，可規定當發生click事件時運行的函數。

mousemove事件或mousemove事件和click事件的結合可用于替代touchmove事件。

當在元素上放松鼠標按鈕時，會發生mouseup事件。與click事件不同，mouseup事件僅需要放松按鈕。當鼠標指針位于元素上方時，放松鼠標按鈕就會觸發該事件。mouseup()方法觸發mouseup事件，可規定當發生mouseup事件時運行的函數。mouseup事件可用于替代touchend事件。

devicemotion事件能夠提供設備的加速信息，表示為定義在設備上的坐標系中的卡爾迪坐標，其還提供了設備在坐標系中的自轉速率。

在瀏覽器中，往往能夠通過devicemotion事件確定移動終端的朝向或者傾斜方向，以調整瀏覽器的窗口方向，從而保證用戶能夠正確閱讀網頁內容。

對于devicemotion事件，可以在電腦端設置虛擬按鈕，用戶可以通過點擊虛擬按鈕實現瀏覽器的窗口方向的調整。

步驟s612，生成并注入二維碼到第二區域。

jquery.qrcode.js是一個能夠在客戶端生成矩陣二維碼qrcode的jquery插件，使用它可以很方便的在頁面上生成二維條碼。

如圖8所示，具體可利用jquery插件對網址進行處理，生成對應的二維碼返回給網頁客戶端，并渲染到pc頁面(即第一顯示窗口)的指定區域(即第二區域)。

此插件是能夠獨立使用的，體積也比較小，因為它是直接在客戶端生成的條碼，所以不會有圖片下載的過程，能夠實現快速生成，它是基于一個多語言的類庫封裝的，也不依賴于其他額外的服務。因此，利用該插件能夠快速生成二維碼，且不會對網頁加載造成多余影響。

在本申請的實施例中，通過構建一個pc頁面平臺，在pc頁面中設定一個移動終端(如手機)大小的顯示框(第一區域)，并將訪問的手機頁面進行整體請求并注入該框中，使在移動終端設備顯示的小屏頁面在pc顯示框中顯示，通過重置移動網頁事件轉換為pc事件使原有移動端交互還原，通過在右側生成移動頁面網址二維碼引導用戶可以通過手機掃碼進入。該優化方案提升了移動頁面在pc端的可訪問性與用戶體驗，并且引導用戶手機掃碼進入移動頁面，增加網頁入口，降低傳播過程中的跳出率。

需要說明的是，對于前述的各方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領域技術人員應該知悉，本發明并不受所描述的動作順序的限制，因為依據本發明，某些步驟可以采用其他順序或者同時進行。其次，本領域技術人員也應該知悉，說明書中所描述的實施例均屬于優選實施例，所涉及的動作和模塊并不一定是本發明所必須的。

通過以上的實施方式的描述，本領域的技術人員可以清楚地了解到根據上述實施例的方法可借助軟件加必需的通用硬件平臺的方式來實現，當然也可以通過硬件，但很多情況下前者是更佳的實施方式。基于這樣的理解，本發明的技術方案本質上或者說對現有技術做出貢獻的部分可以以軟件產品的形式體現出來，該計算機軟件產品存儲在一個存儲介質(如rom/ram、磁碟、光盤)中，包括若干指令用以使得一臺終端設備(可以是手機，計算機，服務器，或者網絡設備等)執行本發明各個實施例所述的方法。

實施例2

根據本發明實施例，還提供了一種用于實施上述網頁內容的顯示方法的網頁內容的顯示裝置。圖9是根據本發明實施例的一種可選的網頁內容的顯示裝置的示意圖，如圖9所示，該裝置可以包括：接收單元92、響應單元94以及第一顯示單元96。

接收單元92，用于在計算機終端的網頁客戶端上接收到目標指令，目標指令用于指示在網頁客戶端上顯示目標網頁內容。

上述的計算機終端即pc端，pc端可采用windows、linux、macosx等系統。

上述的網頁客戶端為能夠在計算機終端上顯示網頁的客戶端，包括但不局限于網頁瀏覽器、媒體應用、社交應用、游戲應用、即時通訊應用。

上述的目標網頁內容的形態是為移動終端定制優化過的，此處的定制優化至少包括：1)與移動終端的顯示屏幕(或者瀏覽器的顯示區域)尺寸適配；2)目標網頁內容的排版方式與移動終端的瀏覽器中的網頁模板適配。

針對上述的目標網頁內容，存在一個對應的統一資源定位符url(即第一鏈接地址)，上述的目標指令即用于指示訪問第一鏈接地址的指令。

響應單元94，用于響應于目標指令，獲取目標網頁內容。

計算機終端在目標指令的觸發下，通過https通訊協議從web服務器獲取上述的目標網頁內容。

第一顯示單元96，用于在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，其中，目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示。

上述的第一顯示窗口為網頁客戶端的一個窗口(可以為當前窗口)，第一區域為第一顯示窗口的一部分。

需要說明的是，上述的第一區域是與移動終端視頻的區域，對于任意的移動終端，只要確定了其顯示屏幕或者瀏覽器的顯示區域的尺寸大小，那么就可以生成與之相同尺寸的網頁模板(相當于第一區域)，該模板中網頁內容的排版方式與瀏覽器的用于顯示目標網頁內容的第二顯示窗口的排版方式相同，也可直接采用上述第二顯示窗口的網頁模板。

也即在本申請中，由于網頁模板的尺寸大小和排版方式，與瀏覽器的顯示區域的尺寸大小和排版方式相同，可以直接將目標網頁內容的原始數據填充至網頁模板中，在第一區域中顯示目標網頁內容。

可選地，對于上述的網頁模板，其物理形狀與移動終端的瀏覽器的顯示區域的物理形狀相同，其尺寸大小可以是按照指定比例對瀏覽器的顯示區域進行縮小或放大得到的，此時，在網頁模板中顯示的內容也可按照指定比例縮小或者放大即可，而不用進行排版的調整。

在本申請中，第一顯示窗口內的第一區域與第二顯示窗口的尺寸相互匹配，此處的匹配包括上述的尺寸和外形相同、外形相同但尺寸成比例關系兩種情況。采用這種方式進行顯示，可以直接利用用于在移動終端顯示目標網頁內容的原始數據進行顯示，而不需要進行轉換，提高顯示的效率的同時保證了顯示的內容的完整性。

需要說明的是，該實施例中的接收單元92可以用于執行本申請實施例1中的步驟s202，該實施例中的響應單元94可以用于執行本申請實施例1中的步驟s204，該實施例中的第一顯示單元96可以用于執行本申請實施例1中的步驟s206。

此處需要說明的是，上述模塊與對應的步驟所實現的示例和應用場景相同，但不限于上述實施例1所公開的內容。需要說明的是，上述模塊作為裝置的一部分可以運行在如圖1所示的硬件環境中，可以通過軟件實現，也可以通過硬件實現。

通過上述模塊，在計算機終端的網頁客戶端上接收到目標指令(目標指令用于指示在網頁客戶端上顯示目標網頁內容)時，獲取目標網頁內容；在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，該目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示，通過采用與第一區域相同的顯示格式進行內容顯示，可以解決相關技術中在計算機終端上瀏覽移動網頁時出現亂碼的技術問題，進而達到在計算機終端上完整的復現移動網頁的技術效果。

可選地，響應單元包括：獲取模塊，用于獲取目標指令所指示的第二鏈接地址，其中，第二鏈接地址為目標網頁內容的來源地址；發送模塊，用于發送內容請求至第二鏈接地址所指示的網頁服務器，其中，內容請求用于向網頁服務器請求目標網頁內容；接收模塊，用于接收網頁服務器響應內容請求所返回的目標網頁內容。

可選地，本申請的裝置還可以包括：第二顯示單元，用于在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容的同時或之后，在第一顯示窗口內的第二區域內顯示圖像信息，其中，圖像信息中攜帶有用于在移動終端上獲取網頁內容的第一鏈接地址。

可選地，本申請的裝置還可以包括：檢測單元，用于在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容的同時或之后，在計算機終端上檢測到第一事件；確定單元，用于按照預設關系確定與第一事件對應的第二事件，其中，預設關系中保存有在計算機終端上觸發的事件與在移動終端上觸發的事件之間的對應關系，在移動終端上觸發的第二事件用于指示在第二顯示窗口中執行任務；執行單元，用于在第一顯示窗口中執行第二事件所指示執行的任務。

可選地，執行單元包括：第一執行模塊，用于在第一顯示窗口中執行第一任務，以將第一顯示窗口內顯示的網頁內容從第一網頁內容調整為第二網頁內容，其中，目標網頁內容包括第一網頁內容和第二網頁內容，第一網頁內容和第二網頁內容不完全相同；第二執行模塊，用于在第一顯示窗口中執行第二任務，以更改第一顯示窗口內顯示的目標網頁內容的內容屬性，其中，內容屬性包括目標網頁內容字體、字號、顏色以及排版方式；第三執行模塊，用于在第一顯示窗口中執行第三任務，以從第一顯示窗口的輸入控件中獲取輸入的內容，其中，輸入控件用于輸入內容。

可選地，確定單元包括：第一確定模塊，用于在第一事件為在第一顯示窗口的輸入控件中通過鍵盤輸入內容的事件時，根據預設關系確定與第一事件對應的第二事件，其中，第二事件為在第二顯示窗口的輸入控件中通過觸控操作輸入內容的事件；第二確定模塊，用于在第一事件為在第一顯示窗口中通過鼠標觸發的事件時，根據預設關系確定與第一事件對應的第二事件，其中，第二事件為在第二顯示窗口中通過觸控操作進行內容切換的事件；第三確定模塊，用于在第一事件為通過第一顯示窗口中的虛擬按鈕觸發的事件時，根據預設關系確定與第一事件對應的第二事件，其中，第二事件為在移動終端上觸發的用于修改目標網頁內容的內容屬性的事件。

本申請提供了一種在pc端瀏覽移動網頁的方案，通過構建一個pc頁面平臺，在pc頁面中設定一個移動終端(如手機、平板燈)大小的顯示框，并將所訪問的移動頁面整體請求并注入該顯示框中，使在移動終端設備顯示的小屏頁面在pc顯示框中顯示，通過將pc事件轉換為移動網頁事件，使原有移動端的交互得以還原，還可在右側生成移動頁面網址二維碼引導用戶通過手機掃碼進入移動網頁。通過該方案提升了移動頁面在pc端的可訪問性與用戶體驗，并且引導用戶手機掃碼進入移動頁面，增加網頁入口，降低了傳播過程中的跳出率。

在上述裝置實施例中，所涉及的模塊或單元與前述方法實施例中的方法步驟對應，本實施例中的模塊或單元的具體實施方式可參照前述方法實施例中對應的方法步驟的實施方式，在此不再贅述。

此處需要說明的是，上述模塊與對應的步驟所實現的示例和應用場景相同，但不限于上述實施例1所公開的內容。需要說明的是，上述模塊作為裝置的一部分可以運行在如圖1所示的硬件環境中，可以通過軟件實現，也可以通過硬件實現，其中，硬件環境包括網絡環境。

實施例3

根據本發明實施例，還提供了一種用于實施上述網頁內容的顯示方法的服務器或終端(也即電子裝置)。

圖10是根據本發明實施例的一種終端的結構框圖，如圖10所示，該終端可以包括：一個或多個(圖10中僅示出一個)處理器1001、存儲器1003、以及傳輸裝置1005(如上述實施例中的發送裝置)，如圖10所示，該終端還可以包括輸入輸出設備1007。

其中，存儲器1003可用于存儲軟件程序以及模塊，如本發明實施例中的網頁內容的顯示方法和裝置對應的程序指令/模塊，處理器1001通過運行存儲在存儲器1003內的軟件程序以及模塊，從而執行各種功能應用以及數據處理，即實現上述的網頁內容的顯示方法。存儲器1003可包括高速隨機存儲器，還可以包括非易失性存儲器，如一個或者多個磁性存儲裝置、閃存、或者其他非易失性固態存儲器。在一些實例中，存儲器1003可進一步包括相對于處理器1001遠程設置的存儲器，這些遠程存儲器可以通過網絡連接至終端。上述網絡的實例包括但不限于互聯網、企業內部網、局域網、移動通信網及其組合。

上述的傳輸裝置1005用于經由一個網絡接收或者發送數據，還可以用于處理器與存儲器之間的數據傳輸。上述的網絡具體實例可包括有線網絡及無線網絡。在一個實例中，傳輸裝置1005包括一個網絡適配器(networkinterfacecontroller，nic)，其可通過網線與其他網絡設備與路由器相連從而可與互聯網或局域網進行通訊。在一個實例中，傳輸裝置1005為射頻(radiofrequency，rf)模塊，其用于通過無線方式與互聯網進行通訊。

其中，具體地，存儲器1003用于存儲應用程序。

處理器1001可以通過傳輸裝置1005調用存儲器1003存儲的應用程序，以執行下述步驟：在計算機終端的網頁客戶端上接收到目標指令，其中，目標指令用于指示在網頁客戶端上顯示目標網頁內容；響應于目標指令，獲取目標網頁內容；在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，其中，目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示。

處理器1001還用于執行下述步驟：在第一事件為在第一顯示窗口的輸入控件中通過鍵盤輸入內容的事件時，根據預設關系確定與第一事件對應的第二事件，其中，第二事件為在第二顯示窗口的輸入控件中通過觸控操作輸入內容的事件；在第一事件為在第一顯示窗口中通過鼠標觸發的事件時，根據預設關系確定與第一事件對應的第二事件，其中，第二事件為在第二顯示窗口中通過觸控操作進行內容切換的事件；在第一事件為通過第一顯示窗口中的虛擬按鈕觸發的事件時，根據預設關系確定與第一事件對應的第二事件，其中，第二事件為在移動終端上觸發的用于修改目標網頁內容的內容屬性的事件。

采用本發明實施例，在計算機終端的網頁客戶端上接收到目標指令(目標指令用于指示在網頁客戶端上顯示目標網頁內容)時，獲取目標網頁內容；在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，該目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示，通過采用與第一區域相同的顯示格式進行內容顯示，可以解決相關技術中在計算機終端上瀏覽移動網頁時出現亂碼的技術問題，進而達到在計算機終端上完整的復現移動網頁的技術效果。

可選地，本實施例中的具體示例可以參考上述實施例1和實施例2中所描述的示例，本實施例在此不再贅述。

本領域普通技術人員可以理解，圖10所示的結構僅為示意，終端可以是智能手機(如android手機、ios手機等)、平板電腦、掌上電腦以及移動互聯網設備(mobileinternetdevices，mid)、pad等終端設備。圖10其并不對上述電子裝置的結構造成限定。例如，終端還可包括比圖10中所示更多或者更少的組件(如網絡接口、顯示裝置等)，或者具有與圖10所示不同的配置。

本領域普通技術人員可以理解上述實施例的各種方法中的全部或部分步驟是可以通過程序來指令終端設備相關的硬件來完成，該程序可以存儲于一計算機可讀存儲介質中，存儲介質可以包括：閃存盤、只讀存儲器(read-onlymemory，rom)、隨機存取器(randomaccessmemory，ram)、磁盤或光盤等。

實施例4

本發明的實施例還提供了一種存儲介質。可選地，在本實施例中，上述存儲介質可以用于執行網頁內容的顯示方法的程序代碼。

可選地，在本實施例中，上述存儲介質可以位于上述實施例所示的網絡中的多個網絡設備中的至少一個網絡設備上。

可選地，在本實施例中，存儲介質被設置為存儲用于執行以下步驟的程序代碼：

s11，在計算機終端的網頁客戶端上接收到目標指令，其中，目標指令用于指示在網頁客戶端上顯示目標網頁內容；

s12，響應于目標指令，獲取目標網頁內容；

s13，在網頁客戶端的第一顯示窗口內的第一區域上顯示目標網頁內容，其中，第一區域與移動終端的第二顯示窗口具有相同形狀，目標網頁內容還用于以目標網頁內容在第一區域上的顯示格式在移動終端的第二顯示窗口內顯示。

可選地，存儲介質還被設置為存儲用于執行以下步驟的程序代碼：

s21，在第一事件為在第一顯示窗口的輸入控件中通過鍵盤輸入內容的事件時，根據預設關系確定與第一事件對應的第二事件，第二事件為在第二顯示窗口的輸入控件中通過觸控操作輸入內容的事件；

s22，在第一事件為在第一顯示窗口中通過鼠標觸發的事件時，根據預設關系確定與第一事件對應的第二事件，第二事件為在第二顯示窗口中通過觸控操作進行內容切換的事件；

s23，在第一事件為通過第一顯示窗口中的虛擬按鈕觸發的事件時，根據預設關系確定與第一事件對應的第二事件，第二事件為在移動終端上觸發的用于修改目標網頁內容的內容屬性的事件。

可選地，本實施例中的具體示例可以參考上述實施例1和實施例2中所描述的示例，本實施例在此不再贅述。

可選地，在本實施例中，上述存儲介質可以包括但不限于：u盤、只讀存儲器(rom，read-onlymemory)、隨機存取存儲器(ram，randomaccessmemory)、移動硬盤、磁碟或者光盤等各種可以存儲程序代碼的介質。

上述本發明實施例序號僅僅為了描述，不代表實施例的優劣。

上述實施例中的集成的單元如果以軟件功能單元的形式實現并作為獨立的產品銷售或使用時，可以存儲在上述計算機可讀取的存儲介質中。基于這樣的理解，本發明的技術方案本質上或者說對現有技術做出貢獻的部分或者該技術方案的全部或部分可以以軟件產品的形式體現出來，該計算機軟件產品存儲在存儲介質中，包括若干指令用以使得一臺或多臺計算機設備(可為個人計算機、服務器或者網絡設備等)執行本發明各個實施例所述方法的全部或部分步驟。

在本發明的上述實施例中，對各個實施例的描述都各有側重，某個實施例中沒有詳述的部分，可以參見其他實施例的相關描述。

在本申請所提供的幾個實施例中，應該理解到，所揭露的客戶端，可通過其它的方式實現。其中，以上所描述的裝置實施例僅僅是示意性的，例如所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現時可以有另外的劃分方式，例如多個單元或組件可以結合或者可以集成到另一個系統，或一些特征可以忽略，或不執行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，單元或模塊的間接耦合或通信連接，可以是電性或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網絡單元上。可以根據實際的需要選擇其中的部分或者全部單元來實現本實施例方案的目的。

另外，在本發明各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實現，也可以采用軟件功能單元的形式實現。

以上所述僅是本發明的優選實施方式，應當指出，對于本技術領域的普通技術人員來說，在不脫離本發明原理的前提下，還可以做出若干改進和潤飾，這些改進和潤飾也應視為本發明的保護范圍。