基于jsoiip的Web頁面自適應轉換系統的實現

顧問+曹陽

摘要

本文針對傳統Web應用程序無法適配移動終端的問題，設計了一種基于jsoup的Web頁面自適應轉換系統，暑重對系統中文本信息提取和前端頁面重組技術進行了研究分析，討論了具體的實施方法，解決了Web頁面自適應轉換技術限制，為傳統Web應用程序升級過程中提供了一種降低成本的有效方法。

【關鍵詞】jsoup 自適應 轉換系統

隨著移動互聯網的快速發展，Web應用程序能夠適配多種終端己成為一種趨勢。雖然已有一部分Web應用程序在升級改版過程中直接采用了響應式設計的方式，但由于系統升級改版存在的工作量大、成本高等問題，國內仍然有很多Web應用程序僅支持PC端訪問，針對移動終端的開發工作進展十分緩慢。這也就意味著當用戶使用PC的瀏覽器訪問網頁時能夠正常顯示，當用戶使用移動終端的瀏覽器訪問網頁時，會出現文字和圖片縮小顯示的情況，導致用戶只能在移動終端上對Web頁面進行拖曳、放大等手勢操作，與Web頁面交互極為不便，用戶體驗較差。針對以上問題，本文提出了一種基于jsoup的Web頁面自動轉換系統，通過Web頁面信息抽取、前端處理等相關技術將傳統的Web頁面轉換為響應式Web頁面，從而打破了移動終端無法適配傳統Web網頁的技術性限制。

1系統總體設計

Web應用程序都部署在應用所有者的專用服務器中，非應用所有者無法對該應用程序直接進行修改，用戶通過移動終端直接訪問Web應用程序無法達到Web頁面自動轉換目的。因此，本文提出的Web頁面自適應轉換系統需要通過用戶終端訪問網頁轉換代理服務器來完成對目標Web應用程序的資源請求任務，網頁轉換代理服務器對請求返回的資源進行信息提取和頁面重構工作，僅做資源加工處理而不進行資源存儲，代理服務器直接將轉碼結果反饋給用戶的訪問終端。Web頁面自適應技術方案的整體結構如圖1所示。

Web頁面自適應轉換系統的具體運行流程如圖2所示。用戶使用移動終端訪問己部署Web應用程序轉換系統的代理服務器，設置目標Web應用程序網絡地址，網頁轉換系統通過Web頁面的iframe浮動框架技術請求加載Web應用程序，方便用戶觀察目標Web應用程序是否能夠正常訪問。當Web應用程序加載完成后，網頁轉換系統的信息提取模塊基于jsoup對Web頁面進行信息提取工作，主要分為文本信息提取和資源路徑的提取。文本信息提取是指提取目標網頁中的重要文本內容，例如導航、信息列表、正文等；為了保證轉換完成的網頁繼承目標網頁的整體風格，資源路徑提取是指通過代理服務器提取目標網頁中資源路徑，例如網頁頭部加載的CSS，Javascript以及文本內容對應的超鏈接。最后，基于Web前端處理技術將目標網頁重構為適合移動終端訪問的響應式頁面，同時加載提取的資源路徑，將最終生成的移動端頁面反饋給用戶。

2關鍵技術分析

2.1文本信息提取技術

本文提出的Web頁面自適應技術通過網頁轉換代理服務器來向目標Web應用程序請求資源，每一次資源正確加載完成后，網頁轉換系統需要執行Web頁面信息提取任務，其可以分解為Web頁面文本提取和資源路徑提取兩項子任務。Web應用程序整體的資源路徑通常會定義在Web頁面頭部，通過對頁面頭部進行HTML標簽解析很容易能夠獲得。Web頁面文本提取相對比較復雜，這也正是本文研究的Web頁面自適應轉換系統的關鍵技術之一。對國內外的文獻進行分析可以發現，Web頁面的文本提取技術基本可以分為兩類：基于DOM的Web頁面文本提取技術和非基于DOM的Web頁面提取技術。通常很多研究者會采用基于DOM的Web頁面文本提取技術，其技術發展比較成熟。Web頁面的標簽和標簽之間、標簽和內容之間都存在著層次關系，DOM樹是描述Web頁面結構的常用方法，DOM樹的葉子節點通常就是要提取的文本信息。因此，通過一定的算法對Web頁面的DOM樹進行遍歷，進行相應的篩查降噪處理之后，可以得到目標的文本內容。在實際的應用過程中，利用Web頁面解析工具進行頁面解析，并修正其中不規范的地方，構建Web頁面的DOM樹并進行遞歸遍歷，識別其中的非主要文本信息，比如廣告、圖像等內容，將噪聲節點移除即得到文本信息。比較經典的方法如2007年劉秉權等人提出的基于結構樹解析的網頁正文抽取方法。該算法除了把分散的Web頁面解析為有序的DOM樹以外，還利用了中文網頁頁面結構相似及文本信息分布聚集的特性，在移動平臺的新聞信息自動分類系統中得到了很好的應用。文獻2《網頁信息提取與凈化的研究》提出了一種讓用戶設置參數來對Web頁面構建的DOM樹進行節點篩查處理方法，并實現了對同一模板的Web頁面集合可進行自動降噪處理，增強了系統的通用性和交互性。孫明柱等人提出了基于結構樹的網頁正文內容抽取方法，該算法思路是先需要對Web頁面進行分塊處理，處理結果同樣利用DOM樹原理進行解析，然后集合閾值計算和正則表達式，對于處理網頁正文準確率較高。非基于DOM的Web頁面提取技術比較著名就是微軟亞洲研究院提出的VIPS基于視覺的網頁分塊算法。該算法從用戶的視覺感官體驗出發，根據Web頁面的背景色、前景色、元素之間的間距來對Web頁面進行視覺劃分，建立相應的分割條和網頁分塊集，基于此基礎再進行文本信息的抽取，算法規則十分復雜。目前很多Web頁面的視覺特點也很復雜，VIPS算法針對此類頁面時準確率和效率較差。因此，高樂等人提出一種改進的VIPS算法，算法針對標簽的處理進行優化處理，并通過實驗證明了改進算法正確率得到了提升。此外，還有一些不基于DOM樹對網頁文本提取的方法，例如《基于權值優化的網頁正文內容提取算法》的通過統計分析Web頁面正文內容特點，得到頁面中各個文本內容塊屬性特征，并使用粒子群優化算法對特征權值及閾值進行了確定及優化。

綜上所述，兩大類Web頁面的文本提取技術各有優缺點。基于DOM的Web頁面文本提取技術相對成熟，可選擇應用工具較多，例如HTMLparser、jsoup、nsoup都是常用的基于DOM的Web頁面解析工具，通過對工具進行了系列的分析比較之后，最終選用了jsoup作為基礎的文本信息提取工具。jsoupHTML解析器，可直接解析某個URL地址、HTML文本內容。提供了一套非常省力的API，可通過DOM，CSS以及類似于jQueiy的操作方法來取出和操作數據。同時，jsoup還支持對HTML文檔進行清理，十分有利于Web頁面轉換系統的實現。為了降低研究對象的復雜度，選擇了市場占有率較高的商用CMS系統（WebPlus）作為研究對象，該網站系統支持用戶自定義網站模板，Web頁面分塊中的ID或者NAME屬性值部分遵循Web標準的語義，例如頁面的導航部分會出現“nav”關鍵字，處理相對比較容易，系統中建立關鍵詞庫進行自動匹配和識別；還有一部分頁面分塊ID或者NAME屬性僅是定義模板時的專用編碼，屬性值并不遵循語義，可以根據編碼的大小來決定文本信息出現的排列順序，但也需要人為干預來進行辨識頁面分塊是否為預期的文本內容。

2.2前端處理技術

本文研究Web頁面自適應轉換系統最終目的是將傳統的Web頁面轉換為響應式Web頁面，當頁面文本信息和資源提取完成后，還需要通過前端處理技術進行Web頁面重構，因此前端處理技術也是系統的關鍵技術之一。構建響應式Web頁面一般主要以使用原生代碼和基于前端框架兩種方式。使用原生代碼可以使得轉換系統的前端響應式處理部分顯得更為簡潔，但是開發調試和頁面集成測試工作量較大。基于前端開發框架成熟度較高，可以減少很多開發工作量，但是其中很多內容是不需要用到的，會導致系統代碼臃腫，需要花費時間去做裁剪。對于Web頁面自適應轉換系統而言，原始的文本信息己經過處理，不需要考慮很多復雜情況，使用原生代碼的方式更為合適。因此，首先需要將提取得到的信息內容進行單元劃分，每一個單元中的內容相互關聯，利用HTML標記將單元進行結構化定義，使用CSS3MediaQuery功能進行Web頁面布局方面的自適應調整，并使用CSS設定文字大小和加載背景圖片，給用戶在多終端上提供良好的使用體驗。

Web頁面響應式布局通常需要meta標簽定義、Media Query適配對應樣式、內容響應化、圖像響應化四個步驟。meta標簽定義主要解決讓視圖寬度等于設備的寬度，在頭部區域中加入標簽代碼：，默認的屬性和屬性值的含義如表1所示。

Media Query適配對應樣式是Web響應式布局的核心部分，此功能能夠和瀏覽器進行交流，MediaQuery通知了瀏覽器如何去呈現頁面。例如需要兼容平板電腦和手機視圖，可以定義如下：

/*平板電腦**/@mediaonlyscreenand（min-width：768px）and（max-width：1024px）{}

/**手機**/@mediaonlyscreenand（width：320px）and（width：768px）{}

根據訪問終端的寬度來適配對應的樣式，括號里面的樣式會覆蓋掉默認所定義的樣式。此外，內容響應化和圖像響應化也非常重要，例如多數傳統Web應用程序用到的字體單位大部分都是像素，雖然在PC端上能夠正常訪問，但是在移動終端不做處理很容易出現自動換行問題，一般響應式的字體應關聯的父容器的寬度才能適配移動終端屏幕。

3系統的實現

在研究過程中為了觀察實驗效果，增加了文本信息提取結果頁面，需要用戶點擊轉換按鈕進行下一步轉換功能。在實際的應用場景中，此操作對于用戶來說應當是透明的，可以直接通過頁面轉換系統將傳統網頁轉換為移動終端頁面。圖3中展示了基于jsoup對商用CMS系統（WebPlus）的某站點首頁進行信息提取的結果。頁面導航部分將二級菜單也進行了文本提取，因此在構建響應式頁面時還需要進一步的處理。其余的文本內容塊按文檔流依次在頁面中進行顯示。

關鍵代碼：

//通過ID獲取網站導航eleNav=doc.getElementById（"wp_nav_wl"）.getElementsByClass（"nav-item"）.tagName（"div"）；

myNavText=elementsNav.text（）；

//通過ID獲取新聞列表eleLeftl=doc.getElementById（”wp—news—wl1"）.getElementsByTag（"a"）；

mytext=elementsLeftl.text（）；

頁面轉換系統通過對頁面重新進行響應式布局。使得頁面能夠適配移動終端的屏幕和分辨率的大小，轉換得到的移動端頁面如圖4所示。移動終端頁面中的背景圖片、樣式以及Javascript來源于目標網頁。

4結束語

本文提出Web頁面轉換系統主要是基于jsoup針對商用CMS系統進行目標信息提取，然后利用HTML5和CSS3的相關技術進行頁面轉換，屬于定制化轉換方法，存在一定的局限性，不適用于其他一些Web應用程序，在今后的研究中需要在通用性方面進行加強。此外，還需要研究如何更快更準確地對傳統Web頁面進行實時轉換，使系統運行效率和正確率進一步提高。

參考文獻

[1]劉秉權，王喻紅，葛冬梅，李佳.基于結構樹解析的網頁正文抽取方法[A].黑龍江省計算機學會.黑龍江省計算機學會2007年學術交流年會論文集[C]：2007：4.

[2]董之茵.網頁信息提取與凈化的研究[D].吉林大學，2008.

[3]孫明柱，魏海平.基于結構樹的網頁正文內容抽取方法[J].科學技術與工程，2011（28）：6990-6993.

[4]高樂，張健，田賢忠.基于視覺的Web頁面分塊算法的改進與實現[J].計算機系統應用，2009（04）：65-69.

[5]吳麒，陳興蜀，譚駿.基于權值優化的網頁正文內容提取算法[J].華南理工大學學報（自然科學版），2011（04）：32-37.

[6]史晶，吳慶波，楊沙洲.移動終端個性

化頁面顯示優化技術研究[J].計算機工程，2012，38（18）：277-279，281.

[7]Su Junming，Tseng Shian-Shyong，LinHuanyu，et al.A personalized learning content adaptation mechanism to meetdiverse user needs in mobile learning environments[J].User Modeling and User-adapted Interaction，2011，21（1/2）：5-49.endprint