TW201616338A - 網頁版面與瀏覽器相容性之自動偵測方法、系統及其電腦程式、電腦裝置 - Google Patents

Abstract

本發明係關於一種網頁版面與瀏覽器相容性之自動偵測方法、系統及其電腦程式、電腦裝置，其偵測方法係擷取一待偵測網站上網頁版面之網頁圖形，藉以分別作為一正常網頁版型圖及一比對用網頁版型圖。並利用比對多個不同時間擷取的同一正常網頁之圖素差異建構成一網頁版型遮罩，利用該網頁版型遮罩分別與該正常網頁版型圖及比對用網頁版型圖，進行其網頁版型區的圖素差異比對，藉以判斷該網頁版面是否異常。上述偵測方法係可供配合該自動偵測系統、電腦程式及電腦裝置共同執行。

Description

網頁版面與瀏覽器相容性之自動偵測方法、系統及其電腦程式、電腦裝置

本發明係有關於一種網頁版面與瀏覽器相容性之自動偵測方法、系統及其電腦程式、電腦裝置，特別是指一種可用以偵測網站之網頁版面是否發生異常之方法、系統及其程式與裝置。

目前一般網站上用以供瀏覽使用之網頁，均必須先經過設計編排後，才能放上網站之伺服器，以供使用者瀏覽。但由於瀏覽器之種類有很多種，較為常見的則有Internet Explorer （ IE ）、Mozilla Firefox（火狐）、Google Chrome、Opera及Safari。惟每一款瀏覽器核心的排版引擎（Layout Engine）並不同，而且每一款瀏覽器之設計組成亦不相同，因此相同的網頁編排，在不同的瀏覽器上所呈現出來的網頁版面也會有所不同，甚至於嚴重者會造成版面錯亂。所以網頁開發者於網頁編排完成後，均必須以人工方式進行不同瀏覽器的測試瀏覽，藉以確保所編排設計的網頁版面可以在每一款的瀏覽器上均能完整的呈現及瀏覽。再者，大型網站的網頁多半都會嵌入任意變動的廣告或活動內容，更增加自動偵測的困難，因此目前人工檢查還是主要的除錯方式。但測試瀏覽以人工方式進行比對檢查，不僅耗費人力、時間，而且容易有誤判的情形發生。

另外有如中華民國103年2月21日所公告之發明第I427490號「網頁檢視方法及系統，及其電腦程式產品」專利案，其係揭露：一種網頁檢視方法，適用於一電子裝置，包括下列步驟：取得一網頁；依據相應該網頁之一網址、或該網頁之一內容分析相應該網頁之一特定類別；由一檢視樣板資料庫中擷取相應該特定類別之一瀏覽設定，其中，該檢視樣板資料庫至少記錄相應複數類別中之每一者之該瀏覽設定；以及依據該瀏覽設定檢視該網頁；其中，該檢視樣板資料庫中更記錄相應每一該等類別之一文件物件模型（Document Object Model）樣態，且依據該網頁之該內容分析相應該網頁之該特定類別的方法包括下列步驟：取得相應該網頁之一文件物件模型樹；將相應該網頁之該文件物件模型樹與相應每一該等類別之該文件物件模型樣態進行比對，從而得到該文件物件模型樹符合之至少一候選類別；選擇該至少一候選類別為相應該網頁之該特定類別；將相應該網頁之該文件物件模型樹與相應該至少一候選類別之該文件物件模型樣態進行一相似度分析，從而得到相應之一相似度；以及選擇相應最高之該相似度之該候選類別為相應該網頁之該特定類別。藉以可依據網頁之網址與/或內容來自動根據不同之瀏覽設定檢視網頁之方法及系統。

然，上述該專利前案雖然能根據不同的可攜式裝置的螢幕尺寸，在瀏覽不同網頁時，可以自動改變縮放比例或文字重排等，藉以取得最適當的網頁版面的瀏覽畫面。但是如果網頁開發者一開始的網頁編排設計即產生錯誤，而無法於某一款的瀏覽器上完整呈現網頁版面，而上述該專利前案即使是能自動進行調整，仍然無法完整呈現出網頁版面，所以目前仍然需要採用人工方式進行網頁編排的檢查，以確保網頁版面之完整呈現，所以仍然會形成相當大的困擾。

爰此，有鑑於目前仍然以人工方式對於網頁版面的編排進行檢查。故本發明提供一種網頁版面與瀏覽器相容性之自動偵測方法，其係透過一電腦裝置執行，包含下列步驟：Ａ. 使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站，在一解析度條件下，於一定螢幕範圍內擷取一網頁圖形，作為一正常網頁版型圖；Ｂ.在上述解析度條件下，使該瀏覽器於同一螢幕範圍內異時擷取上述待偵測網站的複數網頁圖形，以供建立一網頁版型遮罩；Ｃ.將步驟Ｂ中各網頁圖形之圖素相同的部分，視為是一網頁版型區，據此建立該網頁版型遮罩；Ｄ.在上述解析度條件下，使該瀏覽器於同一螢幕範圍內異時再擷取上述網站的一網頁圖形，作為一比對用網頁版型圖；Ｅ. 利用該網頁版型遮罩之濾除，比較該正常網頁版型圖與該比對用網頁版型圖，二者在該網頁版型區的圖素出現差異之數量比例是否超過一預設值，作為判斷步驟Ｄ在擷取該網頁圖形時，當時該網頁版面是否異常。

上述步驟Ｂ係擷取四張網頁圖形，然後就第一張及第二張之網頁圖形進行比對，偵測該二張網頁圖形之間圖素的差異，就將其設定為一非網頁版型區，然後就第二張及第三張網頁圖形進行比對，偵測該二張網頁圖形之間圖素的差異，就將其設定為一非網頁版型區，接著再就第三張及第四張網頁圖形進行比對，偵測該二張網頁圖形之間圖素的差異，就將其設定為一非網頁版型區，直到該四張網頁圖形被比對完成後，將該四張所有屬於非網頁版型區之圖素集合在一起，並將該等非網頁版型區設置為一黑色遮罩部份，該非網頁版型區以外之區域即設定為該網頁版型區，而該網頁版型區則設置為一空白部份，藉以建立該網頁版型遮罩。

上述所有步驟中圖素之比對方式，發現單一圖素出現差異，則針對周圍ｎ＊ｎ個範圍內之圖素，都設定為非版形區域，該ｎ係為一正整數。

上述ｎ=７為最佳。

上述步驟Ｅ係利用該網頁版型遮罩與該正常網頁版型圖重疊，用以比對出其網頁版型區同一位置之圖素的差異，以及利用該網頁版型遮罩與該比對用網頁版型圖重疊，用以比對出其網頁版型區同一位置之圖素的差異，當該比對用網頁版型圖之網頁版型區與該正常網頁版型圖之網頁版型區之間同一位置的圖素出現差異的數量比例超過該預設值，就認定該網頁版面發生異常。

上述預設值係為0.01%至10%。

上述解析度條件係指經由該電腦裝置內自動控制，或經由人工調整控制，使其於一定的解析度下達到全螢幕模式，或者是將其解析度調整到瀏覽器之螢幕具有固定的大小範圍，藉以使該瀏覽器於一定螢幕範圍內所顯示出來的圖素數量都能保持一樣。

本發明亦可為一種電腦程式，係供安裝於一電腦裝置，該電腦程式係執行上述網頁版面與瀏覽器相容性之自動偵測方法。

本發明亦可為一種電腦裝置，係安裝有上述之電腦程式，並執行該電腦程式。

本發明亦可為一種網頁版面與瀏覽器相容性之自動偵測系統，係用以執行上述網頁版面與瀏覽器相容性之自動偵測方法，包括有：一網頁擷取子系統，其係透過一網際網路，用以擷取該待偵測網站上網頁版面的任一網頁圖形；一待偵測網站資料庫，其係訊號連接至該網頁擷取子系統，該待偵測網站資料庫係內建所有待偵測網站之網址，用以提供該網頁擷取子系統可以連結至任一待偵測網站；一學習用網頁畫面資料庫，其係訊號連接至該網頁擷取子系統，該學習用網頁畫面資料庫係用以儲存該網頁圖形；一版型遮罩建構子系統，其係訊號連接至該學習用網頁畫面資料庫，該版型遮罩建構子系統係能讀取該學習用網頁畫面資料庫內所儲存之網頁圖形，而分別建立該正常網頁版型圖及該網頁版型遮罩；一正常網頁版型圖資料庫，其係訊號連接至該版型遮罩建構子系統，用以儲存及更新該正常網頁版型圖；一網頁版型遮罩資料庫，其係訊號連接至該版型遮罩建構子系統，用以儲存及更新該網頁版型遮罩；一版型變更偵測子系統，其係分別訊號連接至該網頁擷取子系統、正常網頁版型圖資料庫及網頁版型遮罩資料庫，用以將該網頁擷取子系統偵測時所擷取到之網頁圖形作為該比對用網頁版型圖，並將該網頁版型遮罩分別與該正常網頁版型圖，以及該比對用網頁版型圖進行比對，並輸出結果，用以判斷該待偵測網站之網頁版面是否發生異常。

本發明具有下列之優點：

1.本發明係可供針對目前各種不同的瀏覽器種類，進行網頁版面的自動偵測，以供可第一時間發現網頁版面異常，而立即進行網頁之修正。

2.本發明係可改善習知網頁開發者，必須消耗大量的時間開啟各種瀏覽器一一進行比對，以偵測網頁版面是否錯亂，而本發明則可大幅節省人力、時間及金錢，對於網頁開發者及網頁開發者有莫大的助益。

3.本發明由於網頁版面之內容與廣告係經常變更，以致於造成整個網頁版面的影像很難被區分出那一塊是不常變更內容的網頁版型區，那一塊又是常變更內容的非網頁版型區。經由本發明利用學習方式，可以持續進行偵測及更新，藉以確定網頁版型區所在之區域，以建立網頁版型遮罩，藉此自動偵測網頁版型區是否發生異常，以確保達到最佳的偵測正確率。

本發明係為一種網頁版面與瀏覽器相容性之自動偵測系統，請參閱第一圖所示。其係包括有網頁擷取子系統（１）、待偵測網站資料庫（２）、學習用網頁畫面資料庫（３）、版型遮罩建構子系統（４）、正常網頁版型圖資料庫（５）、網頁版型遮罩資料庫（６）及版型變更偵測子系統（７）。

網頁擷取子系統（１），其係透過一網際網路（Ａ），用以連結至任何的待偵測網站，並擷取該待偵測網站上網頁版面中的任一網頁圖形。

待偵測網站資料庫（２），其係訊號連接至該網頁擷取子系統（１）。該待偵測網站資料庫（２）係內建上述所有待偵測網站之網址，用以提供該網頁擷取子系統（１）可以連結至任一待偵測網站。又該待偵測網站資料庫（２）係能隨時建立、追踪及更新任何待偵測網站之網址。

學習用網頁畫面資料庫（３），其係訊號連接至該網頁擷取子系統（１）。該學習用網頁畫面資料庫（３）係用以儲存該網頁擷取子系統（１）所擷取得到之網頁圖形。

版型遮罩建構子系統（４），其係訊號連接至該學習用網頁畫面資料庫（３）。該版型遮罩建構子系統（４）係能讀取該學習用網頁畫面資料庫（３）內所儲存之網頁圖形，而將其分別建立一做為比對標準之正常網頁版型圖，以及一做為比對用之網頁版型遮罩。

正常網頁版型圖資料庫（５），其係訊號連接至該版型遮罩建構子系統（４），用以儲存及更新該版型遮罩建構子系統（４）所建立之正常網頁版型圖。

網頁版型遮罩資料庫（６），其係訊號連接至該版型遮罩建構子系統（４），用以儲存及更新該版型遮罩建構子系統（４）所建立之網頁版型遮罩。

版型變更偵測子系統（７），其係分別訊號連接至該網頁擷取子系統（１）、正常網頁版型圖資料庫（５）及網頁版型遮罩資料庫（６），用以將該網頁擷取子系統偵測時所擷取到之網頁圖形作為一比對用網頁版型圖，並將該網頁版型遮罩資料庫（６）所儲存之網頁版型遮罩分別與該正常網頁版型圖資料庫（５）所儲存之正常網頁版型圖，以及該比對用網頁版型圖進行比對，並輸出結果，用以判斷該待偵測網站之網頁版面是否發生異常。

本發明係為一種網頁版面與瀏覽器相容性之自動偵測方法，其係透過上述網頁版面與瀏覽器相容性之自動偵測系統安裝於一電腦裝置而執行，如第一圖及第二圖所示，包含下列步驟：

Ａ. 使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站，在一解析度條件下，於一定螢幕範圍內擷取一網頁圖形，作為一正常網頁版型圖。係利用上述電腦裝置經由該待偵測網站資料庫（２）所內建之待偵測網站之網址，透過該網際網路（Ａ）而連結至該待偵測網站，然後開啟該電腦裝置之瀏覽器，開始瀏覽該待偵測網站之網頁版面最原始且正常的網頁圖形。利用該網頁擷取子系統（１）擷取該網頁版面的網頁圖形。該網頁擷取子系統（１）為了能擷取該待偵測網站之網頁圖形，以及避免二次取像所造成之顏色失真，本發明並不使用照相設備，而係使用螢幕擷取方式以取得該網頁圖形之畫面。該網頁擷取子系統（１）則使用Java Robot類別來控制瀏覽器進入該待偵測網站後，取得該待偵測網站之網頁圖形所顯示之畫面，並將該網頁圖形之畫面擷取下來，以供其他子系統可以使用。該網頁擷取子系統（１）所擷取下來的網頁圖形，為了減少瀏覽器造成的干擾，係直接進行網站影像大小正規化，因此將瀏覽器設定為一全螢幕模式，並於一特定之解析度〔1366 ＊ 768〕條件下，即可確保於一定螢幕範圍內執行所有的網頁圖形取得工作。上述所稱之解析度條件係指可以經由電腦裝置內之程式自動控制，亦可以經由人工調整控制。使其於一定的解析度下達到全螢幕模式，或者是將其解析度調整到瀏覽器之螢幕具有固定的大小範圍皆可，主要是以能控制瀏覽器於一定螢幕範圍內所顯示出來的圖素數量都能保持一樣〔長、寬均具有一樣的圖素〕。該網頁擷取子系統（１）所擷取下來最原始且正常的網頁圖形，係會儲存到該學習用網頁畫面資料庫（２）。而該版型遮罩建構子系統（４）則會讀取該學習用網頁畫面資料庫（３）內所儲存之最原始且正常之網頁圖形，如第三圖所示，將其建立一可供做為比對標準之正常網頁版型圖（Ｂ）〔並請參考附件之圖一圖所示，其係為一實際待偵測網站所擷取之網頁圖形〕。然後將該正常網頁版型圖（Ｂ）予以儲存至該正常網頁版型圖資料庫（６）內。該正常網頁版型圖（Ｂ）係可區分為一長久不會變更內容之網頁版型區（Ｂ１），以及如同活動廣告、動畫、跑馬燈等經常會變更內容之非網頁版型區（Ｂ２）。而該網頁版型區（Ｂ１）則為本實施例中所欲偵測監控之網頁版面中的主要目標物。又本實施例中係以不同的幾何形狀，用以代表該網頁版型區（Ｂ１）及非網頁版型區（Ｂ２）之區域形狀，但不代表網頁版面之內容均為該幾何形狀之排列方式。

Ｂ.在上述解析度條件下，使該瀏覽器於同一螢幕範圍內異時擷取上述待偵測網站的複數網頁圖形，以供建立一網頁版型遮罩。而該網頁擷取子系統（１）則於不同時間內分別擷取該待偵測網站之網頁版面上複數張的網頁圖形。本實施例係以擷取四張網頁圖形做為說明，如第四圖之ａ～ｄ所示。該網頁擷取子系統（１）所擷取下來的四張網頁圖形，同樣會儲存到該學習用網頁畫面資料庫（２）。而該版型遮罩建構子系統（４）則會讀取該學習用網頁畫面資料庫（３）內所儲存之四張網頁圖形，將其建立一可供做為比對用之網頁版型遮罩（Ｃ）。該版型遮罩建構子系統（４）係採用類似影像處理「背景建構」的演算法，用以偵測出該待偵測網站一段時間內持續沒有變更的部份，當成是網頁版型區（Ｂ１）的組成。本發明之演算法是假設活動廣告、動畫、跑馬燈等非網頁版型區（Ｂ２）內容都會不斷變更，僅有網頁版型區（Ｂ１）會維持穩定不變。因此如果在一定時間內網頁版面都沒有被變更的網頁圖素，應該就是屬於網頁版型區（Ｂ１），因此一旦有變更的網頁圖素則相對會被視為是屬於非網頁版型區（Ｂ２）。由於沒有經過二次取像，不需要考慮失真問題，所以該版型遮罩建構子系統（４）只要發現原始的RGB顏色數值不同，就認為是「有差異」，而不需做更進一步的差異分析。

該版型遮罩建構子系統（４）首先假定整個網頁版面都是網頁版型區（Ｂ１），然後讀取前兩張網頁圖形（如第四圖之圖ａ及圖ｂ）進行比對，偵測每個圖素如果有差異，就將該區域設定為非網頁版型區（Ｂ２）。然後讀取第二張及第三張網頁圖形（如第四圖之圖ｂ及圖ｃ）進行比對，偵測每個圖素如果有差異，就將該區域設定為非網頁版型區（Ｂ２）。接著再讀取第三張及第四張網頁圖形（如第四圖之圖ｃ及圖ｄ）進行比對，偵測每個圖素如果有差異，就將該區域設定為非網頁版型區（Ｂ２）。直到所有被擷取之四張網頁圖形被比對完成後。將該四張所有屬於非網頁版型區（Ｂ２）之圖素的區域集合在一起，就變成該待測網站的網頁版型遮罩（Ｃ）〔如第五圖所示〕，其中非網頁版型區（Ｂ２）以外之區域即屬於網頁版型區（Ｂ１），其並包含了前述做為比對標準之正常網頁版型圖（Ｂ）之網頁版型區（Ｂ１）〔係以虛線表示之〕。另外請參考附件之圖二所示，係為一實際待偵測網站所擷取之四張網頁圖形，予以建立該網頁版型遮罩（Ｃ）的過程。遮罩黑色部份就是網頁版型區（Ｂ１）之圖素，白色部份就是非網頁版型區（Ｂ２）之圖素。其中第１階段的結果是第一、二張網頁圖形進行比對的結果〔即為本實施例第四圖中圖ａ、ｂ之聯集結果〕。第２階段則是第二、三張網頁圖形進行比對的結果，再與第１階段遮罩聯集的結果〔即為本實施例第四圖中圖ａ、ｂ、ｃ之聯集結果〕。第３階段則是第三、四張網頁圖形比對的結果，再與第２階段遮罩聯集所得到的結果〔即為本實施例第四圖中圖ａ、ｂ、ｃ、ｄ之聯集結果，係相同於本實施中之第五圖〕。

又由於實際待偵測網站的內容元素，不可能是以一個圖素大小進行改變，如果僅利用圖素比對來進行偵測，可能會無法偵測到合理的版面範圍。因此本發明利用遮罩（mask）的觀念，當偵測到一個待偵測網站之網頁圖形之單一圖素產生差異時，就將該圖素周圍ｎ＊ｎ個圖素當成是非網頁版型區（Ｂ２）之圖素，上述ｎ係為一正整數。透過加入遮罩，可有效提昇偵測的穩定性。有無加入遮罩的網頁版型遮罩之結果，如附件之圖三所示。係可以看出不使用遮罩時非網頁版型區（Ｂ２）中的圖素仍有一部份會被誤判為屬於網頁版型區（Ｂ１）之圖素，如矩形部份所標示。

Ｃ.將步驟Ｂ中各網頁圖形之圖素相同的部分，視為是一網頁版型區，據此建立該網頁版型遮罩。為了方便進行偵測時之比對效果，如第六圖所示，其係將該非網頁版型區（Ｂ２）設置為一黑色遮罩部份，而該網頁版型區（Ｂ１）則設置為一空白部份，並請參考附件之圖四所示，其係為一實際所製成之網頁版型遮罩（Ｃ）。又本發明為了能節省空間以及避免失真，全部之網頁圖形均採用png格式進行儲存。又欲偵測不同之待偵測網站，則需分別建立不同之網頁版型遮罩（Ｃ）。

Ｄ.在上述解析度條件下，使該瀏覽器於同一螢幕範圍內異時再擷取上述網站的一網頁圖形，作為一比對用網頁版型圖〔請參考第七圖所示〕。當開始監控進行偵測時，該網頁擷取子系統（１）係以相同之解析度及全螢幕持續擷取該待偵測網站上網頁版面的任一網頁圖形，藉以作為一可供進行比對之比對用網頁版型圖。

Ｅ. 利用該網頁版型遮罩之濾除，比較該正常網頁版型圖與該比對用網頁版型圖，二者在該網頁版型區的圖素出現差異的數量比例是否超過一預設值，作為判斷步驟Ｄ在擷取該網頁圖形時，當時該網頁版面是否異常。該版型變更偵測子系統（７）係會利用該網頁版型遮罩資料庫（６）所儲存之網頁版型遮罩（Ｃ），將其分別與該正常網頁版型圖資料庫（５）所儲存之正常網頁版型圖（Ｂ）及該網頁擷取子系統（１）偵測時所擷取之比對用網頁版型圖（Ｄ）進行比對〔如第七圖所示〕。即利用該網頁版型遮罩（Ｃ）與該正常網頁版型圖（Ｂ）重疊，用以比對出該網頁版型區（Ｂ１）同一位置之圖素的差異，以及利用該網頁版型遮罩（Ｃ）與該比對用網頁版型圖（Ｄ）重疊，用以比對出該網頁版型區（Ｂ１）同一位置之圖素的差異。如果比對該比對用網頁版型圖（Ｄ）之網頁版型區（Ｂ１）與該正常網頁版型圖（Ｂ）之網頁版型區（Ｂ１）之間於同一位置的圖素出現差異的數量比例超過一個預設值時，就可以認定是網頁版面已變更而發生錯亂等異常現象。其造成之原因則有可能是因為使用不同瀏覽器所造成的網頁版面錯亂，或者是經由輸入不同的內容後所導致的網頁版面錯亂，因此比對網頁版型區（Ｂ１）於同一位置之圖素時才會產生差異，故可利用圖素是否產生差異，藉以做為網頁版面發生異常之判斷標準。如此，則不需使用人工，即能自動偵測網頁版面在不同的瀏覽器上之顯示是否有產生異常，而能立即通知網頁開發者予以修正網頁版面之設定，藉以節省人力、時間及成本。

又本發明係可持續不斷的重覆執行上述步驟Ａ到步驟Ｅ，可以連續對於該正常網頁版型圖（Ｂ）、該網頁版型遮罩（Ｃ）及該比對用網頁版型圖（Ｄ）進行偵測、比對及更新，透過不間斷的學習方式，藉以精準的確定該網頁版型區（Ｂ１）所在區域，而能第一時間自動偵測該網頁版型區（Ｂ１）是否發生異常，以確保可以達到最佳的偵測正確率。

為了驗證本發明之功效與偵測正確性，係採用一台筆記型電腦，CPU 為Intel Core i5-3337U 1.8G Hz、記憶體為4G Byte，採用 Windows 8家用64位元作業系統進行實驗。

實驗共以１５個待偵測網站的首頁來進行測試，以每個待偵測網站的９張畫面來建立網頁版型遮罩（Ｃ），並以１張網頁圖形做為比對用網頁版型圖（Ｄ），用以進行網頁版型區（Ｂ１）及非網頁版型區（Ｂ２）之變更偵測。每張網頁圖形之解析度皆為1366 ＊768。測試用的１５個待偵測網站中，１１個是網際網路上的大型網站，４個是申請人自行架設或申請目前佔有率比較高的CRM網站系統，以便測試網頁版面之變更。待偵測網站如表１所示。

表１

本實驗針對１５個待偵測網站的其中１１個網站，對於非網頁版型區（Ｂ２）做變更，但網頁版型區（Ｂ１）不做變更的情況下進行偵測。除了使用所提出的網頁版型遮罩（Ｃ）進行比對，並於遮罩=１３＊１３的狀況下進行偵測外，還比較了使用網頁上每個圖素比對的傳統偵測方法。認定網頁版面改變的預設值係為１０%的圖素發生變化時，就認定網頁版型區（Ｂ１）有做變更。其實驗結果如表２所示。

表２

上述表２之實驗結果顯示本發明所提出的演算法，係具備相當的強固性，更可以正確偵測出網頁版面之改變，不會受到活動廣告、動畫、跑馬燈等內容變更的干擾。但是當遇到臉書這類絕大部分是內容區塊，網頁版面之網頁版型區（Ｂ１）多變，且僅佔頁面小部份區域的網站時，仍然會有偵測失敗的機率。

又再進一步利用申請人所能控制的４個網站於同樣的偵測條件下，但是對於非網頁版型區（Ｂ２）不做變更，而網頁版型區（Ｂ１）做變更的情況下進行偵測，其實驗結果如表３所示。

表３

又當網頁版型區（Ｂ１）做變更時，原則上各種的演算法都能偵測出來，不過到底佔多少比例的網頁版型區（Ｂ１）之圖素變更才算是改變，以及在建立網頁版型遮罩（Ｃ）時加入了ｎ＊ｎ的遮罩，是否可以增加整個演算法的強固度，而網頁版型區（Ｂ１）之圖素改變的預設值設為0.01%時，產生了如表４的實驗結果。

表４（O：辨識成功；X：辨識失敗）

經由上述表４之實驗結果可知，當使用遮罩ｎ＝７時，可以取得最佳的強固性。而圖素變更之預設值，則可設為低於0.01%，亦算是一合理的預設值。而上述實驗中，一個網頁版型遮罩（Ｃ）之建立時間於遮罩Ｎ＝７＊７時，使用９張網頁圖形建立一個網頁版型遮罩（Ｃ），平均需時5.857秒，網頁版型區（Ｂ１）變更之偵測平均時間則為1.185秒。遠較使用人工傳統方式進行偵測，確實具有節省人力、時間及成本之功效。

本發明亦可為一種電腦程式，以供安裝於上述之電腦裝置，用以執行上述網頁版面與瀏覽器相容性之自動偵測方法。

惟，以上所述僅為本發明其中之一實施例，當不能以此限定本發明之申請專利保護範圍，舉凡依本發明之申請專利範圍及說明書內容所作之簡單的等效變化與替換，皆應仍屬於本發明申請專利範圍所涵蓋保護之範圍內。

（１）‧‧‧網頁擷取子系統
（２）‧‧‧待偵測網站資料庫
（３）‧‧‧學習用網頁畫面資料庫
（４）‧‧‧版型遮罩建構子系統
（５）‧‧‧正常網頁版型圖資料庫
（６）‧‧‧網頁版型遮罩資料庫
（７）‧‧‧版型變更偵測子系統
（Ａ）‧‧‧網際網路
（Ｂ）‧‧‧正常網頁版型圖
（Ｂ１）‧‧‧網頁版型區
（Ｂ２）‧‧‧非網頁版型區
（Ｃ）‧‧‧網頁版型遮罩
（Ｄ）‧‧‧比對用網頁版型圖

[第一圖]係為本發明自動偵測系統之配置圖。

[第二圖]係為本發明自動偵測方法之步驟流程圖。

[第三圖]係為本發明正常網頁版型圖係區分為網頁版型區及非網頁版型區之示意圖。

[第四圖]係為本發明擷取四張網頁圖形用以建立網頁版型遮罩之示意圖。

[第五圖]係為本發明網頁版型遮罩係區分為網頁版型區及非網頁版型區之示意圖。

[第六圖]係為本發明網頁版型遮罩區完成後之簡單示意圖。

[第七圖]係為本發明利用網頁版型遮罩分別與正常網頁版型圖、比對用網頁版型圖重疊進行比對之示意圖。

[表一]係為本發明用以做為實驗之待偵測網站之網址、名稱及屬性。

[表二]係為本發明對於非網頁版型區做變更，而網頁版型區不做變更的情況下所產生之實驗結果。

[表三]係為本發明對於非網頁版型區不做變更，而網頁版型區做變更的情況下所產生之實驗結果。

[表四]係為本發明於建立網頁版型遮罩時加入了ｎ＊ｎ的遮罩，以及網頁版型區之圖素改變預設值為0.01%時所產生之實驗結果。

[附件圖一]係為本發明實際從待偵測網站上所擷取之網頁圖形。

[附件圖二]係為本發明實際建立網頁版型遮罩過程之網頁圖形。

[附件圖三]係為本發明實際上有無加入遮罩對於網頁版型區之圖素進行比對產生差異之示意圖。

[附件圖四]係為本發明實際所完成後之網頁版型遮罩。

Claims (10)

1. 一種網頁版面與瀏覽器相容性之自動偵測方法，其係透過一電腦裝置執行，包含下列步驟： Ａ. 使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站，在一解析度條件下，於一定螢幕範圍內擷取一網頁圖形，作為一正常網頁版型圖； Ｂ.在上述解析度條件下，使該瀏覽器於同一螢幕範圍內異時擷取上述待偵測網站的複數網頁圖形，以供建立一網頁版型遮罩； Ｃ.將步驟Ｂ中各網頁圖形之圖素相同的部分，視為是一網頁版型區，據此建立該網頁版型遮罩； Ｄ.在上述解析度條件下，使該瀏覽器於同一螢幕範圍內異時再擷取上述網站的一網頁圖形，作為一比對用網頁版型圖； Ｅ. 利用該網頁版型遮罩之濾除，比較該正常網頁版型圖與該比對用網頁版型圖，二者在該網頁版型區的圖素出現差異之數量比例是否超過一預設值，作為判斷步驟Ｄ在擷取該網頁圖形時，當時該網頁版面是否異常。
2. 如申請專利範圍第１項所述網頁版面與瀏覽器相容性之自動偵測方法，其中，該步驟Ｂ係擷取四張網頁圖形，然後就第一張及第二張之網頁圖形進行比對，偵測該二張網頁圖形之間圖素的差異，就將其設定為一非網頁版型區，然後就第二張及第三張網頁圖形進行比對，偵測該二張網頁圖形之間圖素的差異，就將其設定為一非網頁版型區，接著再就第三張及第四張網頁圖形進行比對，偵測該二張網頁圖形之間圖素的差異，就將其設定為一非網頁版型區，直到該四張網頁圖形被比對完成後，將該四張所有屬於非網頁版型區之圖素集合在一起，並將該等非網頁版型區設置為一黑色遮罩部份，該非網頁版型區以外之區域即設定為該網頁版型區，而該網頁版型區則設置為一空白部份，藉以建立該網頁版型遮罩。
3. 如申請專利範圍第１項所述網頁版面與瀏覽器相容性之自動偵測方法，其中，發現單一圖素出現差異，則針對周圍ｎ＊ｎ個範圍內之圖素，都設定為非版形區域，該ｎ係為一正整數。
4. 如申請專利範圍第３項所述網頁版面與瀏覽器相容性之自動偵測方法，其中，該ｎ=７為最佳。
5. 如申請專利範圍第１項所述網頁版面與瀏覽器相容性之自動偵測方法，其中，該步驟Ｅ係利用該網頁版型遮罩與該正常網頁版型圖重疊，用以比對出其網頁版型區同一位置之圖素的差異，以及利用該網頁版型遮罩與該比對用網頁版型圖重疊，用以比對出其網頁版型區同一位置之圖素的差異，當該比對用網頁版型圖之網頁版型區與該正常網頁版型圖之網頁版型區之間同一位置的圖素出現差異的數量超過該預設值，就認定該網頁版面發生異常。
6. 如申請專利範圍第１或５項所述網頁版面與瀏覽器相容性之自動偵測方法，其中，該預設值係為0.01%至10%。
7. 如申請專利範圍第１項所述網頁版面與瀏覽器相容性之自動偵測方法，其中，該解析度條件係指經由該電腦裝置內自動控制，或經由人工調整控制，使其於一定的解析度下達到全螢幕模式，或者是將其解析度調整到瀏覽器之螢幕具有固定的大小範圍，藉以使該瀏覽器於一定螢幕範圍內所顯示出來的圖素數量都能保持一樣。
8. 一種電腦程式，係供安裝於一電腦裝置，該電腦程式係執行包含申請專利範圍第１項至第７項中任一項所述網頁版面與瀏覽器相容性之自動偵測方法。
9. 一種電腦裝置，係安裝有申請專利範圍第８項所述之電腦程式，並執行該電腦程式。
10. 一種網頁版面與瀏覽器相容性之自動偵測系統，係用以執行包含申請專利範圍第１項至第７項中任一項所述網頁版面與瀏覽器相容性之自動偵測方法，包括有： 一網頁擷取子系統，其係透過一網際網路，用以擷取該待偵測網站上網頁版面的任一網頁圖形； 一待偵測網站資料庫，其係訊號連接至該網頁擷取子系統，該待偵測網站資料庫係內建所有待偵測網站之網址，用以提供該網頁擷取子系統可以連結至任一待偵測網站； 一學習用網頁畫面資料庫，其係訊號連接至該網頁擷取子系統，該學習用網頁畫面資料庫係用以儲存該網頁圖形； 一版型遮罩建構子系統，其係訊號連接至該學習用網頁畫面資料庫，該版型遮罩建構子系統係能讀取該學習用網頁畫面資料庫內所儲存之網頁圖形，而分別建立該正常網頁版型圖及該網頁版型遮罩； 一正常網頁版型圖資料庫，其係訊號連接至該版型遮罩建構子系統，用以儲存及更新該正常網頁版型圖； 一網頁版型遮罩資料庫，其係訊號連接至該版型遮罩建構子系統，用以儲存及更新該網頁版型遮罩； 一版型變更偵測子系統，其係分別訊號連接至該網頁擷取子系統、正常網頁版型圖資料庫及網頁版型遮罩資料庫，用以將該網頁擷取子系統偵測時所擷取到之網頁圖形作為該比對用網頁版型圖，並將該網頁版型遮罩分別與該正常網頁版型圖，以及該比對用網頁版型圖進行比對，並輸出結果，用以判斷該待偵測網站之網頁版面是否發生異常。