TW201510746A - 網頁元件的控制方法及裝置 - Google Patents

網頁元件的控制方法及裝置 Download PDF

Info

Publication number
TW201510746A
TW201510746A TW102145371A TW102145371A TW201510746A TW 201510746 A TW201510746 A TW 201510746A TW 102145371 A TW102145371 A TW 102145371A TW 102145371 A TW102145371 A TW 102145371A TW 201510746 A TW201510746 A TW 201510746A
Authority
TW
Taiwan
Prior art keywords
webpage
component
auxiliary
size
webpage component
Prior art date
Application number
TW102145371A
Other languages
English (en)
Inventor
Peng He
Original Assignee
Alibaba Group Services Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Services Ltd filed Critical Alibaba Group Services Ltd
Publication of TW201510746A publication Critical patent/TW201510746A/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本申請案提供一種網頁元件的控制方法及裝置。本申請案實施例通過根據Web頁面，創建輔助網頁元件，輔助網頁元件的尺寸為Web頁面的尺寸，進而根據輔助網頁元件的尺寸和目標網頁元件的尺寸和位置，獲得輔助網頁元件的邊框的尺寸，使得能夠設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式，能夠避免現有技術中由於複製的網頁元件即目標網頁元件脫離了Web頁面的文檔流而導致的重新設置複製的網頁元件的樣式的問題，操作簡單，且正確率高，從而提高了網頁元件控制的效率和可靠性。

Description

網頁元件的控制方法及裝置
本申請案係關係於全球資訊網(World Wide Web，Web)頁面處理技術，尤其涉及一種網頁元件的控制方法及裝置。
隨著通信技術的發展，終端集成了越來越多的功能，從而使得終端的系統功能清單中包含了越來越多相應的應用程式，例如，電腦中安裝的應用程式、協力廠商智慧手機中安裝的應用程式(Application，APP)等。有些應用程式中會涉及一些全球資訊網(World Wide Web，Web)頁面，Web頁面可以包括由一個或者多個超文件標示語言(HyperText Markup Language，HTML)標籤組成的一個顯示區塊，稱為網頁元件，例如，文字、標籤、超連結、按鈕、輸入框、下拉清單等。在一些情況下，需要突出顯示指定的網頁元件，例如，Web頁面的佈局發生變化之後，需要突出顯示變化的網頁元件。現有技術中，首先在整個頁面上方設置一個半透明層，然後，複製需要突出顯示的網頁元件，並將複製的網頁元件設置在半透明層的上 方，以實現突出顯示所複製的網頁元件的目的。由於複製的網頁元件是單獨設置在Web頁面的半透明層上方，使得複製的網頁元件脫離了Web頁面的文檔流，因此，需要重新設置複製的網頁元件，以保持原始的顯示效果。其中，Web頁面的文檔流就是Web頁面上可顯示物件即網頁元件在排列時所佔用的位置。
然而，由於複製的網頁元件脫離了Web頁面的文檔流，使得無法根據文檔流設置該網頁元件的樣式，只能單獨計算該網頁元件的樣式，操作複雜，且容易出錯，從而導致了網頁元件控制的效率和可靠性的降低。
本申請案的多個方面提供一種網頁元件的控制方法及裝置，用以提高網頁元件控制的效率和可靠性。
本申請案的一方面，提供一種網頁元件的控制方法，包括：確定全球資訊網Web頁面上待控制的目標網頁元件；根據所述Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸；根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸；設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式，包括：根據預先設置的透明度參數，設置所述輔助網頁元件的邊框的透明度，所述透明度參數大於或等於0且小於1。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸，包括：根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值；根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述根據所述Web頁面，創建輔助網頁元件，包括：在所述Web頁面的主體body標籤下，創建所述輔助網頁元件。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸之前，還包括： 利用JavaScript語言，確定所述目標網頁元件的尺寸和位置。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述輔助網頁元件為區塊元素。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述輔助網頁元件的垂直高度大於所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的垂直高度。
本申請案的另一方面，提供一種網頁元件的控制裝置，包括：確定單元，用於確定全球資訊網Web頁面上待控制的目標網頁元件；創建單元，用於根據所述Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸；獲得單元，用於根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸；設置單元，用於設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述設置單元，具體用於
根據預先設置的透明度參數，設置所述輔助網頁元件 的邊框的透明度，所述透明度參數大於或等於0且小於1。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述獲得單元，具體用於
根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值；以及根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述創建單元，具體用於
在所述Web頁面的主體body標籤下，創建所述輔助網頁元件。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述確定單元，還用於
利用JavaScript語言，確定所述目標網頁元件的尺寸和位置。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述輔助網頁元件為區塊元素。
如上所述的方面和任一可能的實現方式，進一步提供一種實現方式，所述輔助網頁元件的垂直高度大於所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的垂直高度。
由上述技術方案可知，本申請案實施例通過根據Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸，進而根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸，使得能夠設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式，由於目標網頁元件始終沒有脫離Web頁面的文檔流，因此，能夠避免現有技術中由於複製的網頁元件即目標網頁元件脫離了Web頁面的文檔流而導致的重新設置複製的網頁元件的樣式的問題，操作簡單，且正確率高，從而提高了網頁元件控制的效率和可靠性。
51‧‧‧確定單元
52‧‧‧創建單元
53‧‧‧獲得單元
54‧‧‧設置單元
為了更清楚地說明本申請案實施例中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作一簡單地介紹，顯而易見地，下面描述中的附圖是本申請案的一些實施例，對於本領域普通技術人員來講，在不付出創造性勞動性的前提下，還可以根據這些附圖獲得其他的附圖。
圖1為本申請案一實施例提供的網頁元件的控制方法的流程示意圖；圖2為圖1對應的實施例中一Web頁面的示意圖；圖3為圖1對應的實施例中另一Web頁面的示意圖； 圖4為圖1對應的實施例中另一Web頁面的示意圖；圖5為本申請案另一實施例提供的網頁元件的控制裝置的結構示意圖。
為使本申請案實施例的目的、技術方案和優點更加清楚，下面將結合本申請案實施例中的附圖，對本申請案實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例是本申請案一部分實施例，而不是全部的實施例。基於本申請案中的實施例，本領域普通技術人員在沒有作出創造性勞動前提下所獲得的全部其他實施例，都屬於本申請案保護的範圍。
需要說明的是，本申請案實施例中所涉及的終端可以包括但不限於手機、個人數位助理(Personal Digital Assistant，PDA)、無線手持裝置、輕省筆電、個人電腦、筆記型電腦、個人電腦(Personal Computer，PC)、MP3播放機、MP4播放機等。
另外，本文中術語“和/或”，僅僅是一種描述關聯物件的關聯關係，表示可以存在三種關係，例如，A和/或B，可以表示：單獨存在A，同時存在A和B，單獨存在B這三種情況。另外，本文中字元“/”，一般表示前後關聯物件是一種“或”的關係。
圖1為本申請案一實施例提供的網頁元件的控制方法 的流程示意圖，如圖1所示。
101、確定Web頁面上待控制的目標網頁元件。
具體地，所述目標網頁元件可以包括但不限於下列中的至少一項：文字、標籤、超連結、按鈕、輸入框和下拉清單，本實施例對此不進行限定。這個目標網頁元件就是需要突出顯示的網頁元件。
102、根據所述Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸。
通過執行102，在Web頁面上，創建了一個整個Web頁面大小的輔助網頁元件，這個輔助網頁元件與Web頁面上除了所述目標網頁元件之外的其他網頁元件相對應。例如，所述輔助網頁元件可以位於Web頁面上除了所述目標網頁元件之外的任一其他網頁元件之上，也可以是與Web頁面上除了所述目標網頁元件之外的任一其他網頁元件相重疊。
較佳地，所述輔助網頁元件的垂直高度大於所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的垂直高度，以便在後續步驟中將所述輔助網頁元件設置為不透明狀態時可以完整的遮蓋住Web頁面上除目標網頁元件之外的其他網頁元件。
可以理解的是，輔助網頁元件的垂直高度與目標網頁元件的垂直高度無關，也就是說，輔助網頁元件的垂直高度既可以大於目標網頁元件的垂直高度，又可以小於目標網頁元件的垂直高度，甚至可以等於目標網頁元件的垂直 高度，本實施例對此不進行限定。
103、根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸。
具體地，所述輔助網頁元件的邊框可以為輔助網頁元件的外邊緣與所述目標網頁元件的外邊緣之間的部分。可以根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值。然後，則可以根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸，即上邊框的寬度、下邊框的寬度、左邊框的寬度和右邊框的寬度。
這樣，可以實現輔助網頁元件的邊框設置在所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的地方。
104、根據預先設置的透明度參數，設置所述覆蓋網頁元件的邊框的透明度，所述透明度參數大於或等於0且小於1。
這樣，由於只設置了輔助網頁元件的邊框的透明度，使其處於非完全透明狀態，輔助網頁元件的其他部分的透明度缺省設置為完全透明，即透明度參數為1，因此，可以突出顯示目標網頁元件。
可以理解的是，步驟104只是本申請案實施例中較佳實施例，在具體應用中可以將輔助網頁元件的邊框展現方 式設置為不同於目標網頁元件的展現方式，以便突出顯示目標網頁元件。例如，當目標網頁元件的主色調為紅色時，可以將輔助網頁元件的邊框設置為淺綠色。其他任何可實現本申請案目的的實施方式均在本申請案保護範圍之內，本申請案對此並不做限定。
可以理解的是，本申請案所涉及的頁面，可以是基於超文件標示語言(HyperText Markup Language，HTML)編寫的網頁(Web Page)，也可以稱為Web頁面。
需要說明的是，101至104的執行主體可以是控制裝置，例如，Web頁面編輯器等，可以位於本地的用戶端中，以進行離線控制，或者還可以位於網路側的伺服器中，以進行線上控制，本實施例對此不進行限定。
可以理解的是，所述用戶端可以是安裝在終端上的應用程式，或者還可以是瀏覽器的一個網頁，只要能夠實現網頁元件控制，以實現該網頁元件的突出顯示的客觀存在形式都可以，本實施例對此不進行限定。
採用本實施例提供的技術方案，沒有對目標網頁元件進行任何操作，致使目標網頁元件沒有發生任何的位置變化，並沒有脫離Web頁面的文檔流。
這樣，由於並沒有對目標網頁元件進行任何操作，使得目標網頁元件的位置沒有發生任何變化，也就是說，目標網頁元件始終沒有脫離Web頁面的文檔流，因此，能夠避免現有技術中由於複製的網頁元件即目標網頁元件脫離了Web頁面的文檔流而導致的重新設置複製的網頁元 件的樣式的問題，操作簡單，且正確率高，從而提高了網頁元件控制的效率和可靠性。
另外，採用本申請案提供的技術方案，由於目標網頁元件始終沒有脫離Web頁面的文檔流，因此，目標網頁元件原始的樣式仍然有效，無需重新設置複製的網頁元件的樣式，能夠省去大量設置樣式的操作，從而能夠有效提高網頁元件控制的效率。
另外，採用本申請案提供的技術方案，通過採用網頁元件即輔助網頁元件的邊框的方式，來處理半透明層或不透明層，從而實現了無需改變原始的Web頁面的文檔流，就能夠突出顯示網頁元素即目標網頁元素的目的。
現有的網頁元件的控制方法，首先在整個頁面上方設置一個半透明層，然後，複製需要突出顯示的網頁元件，並將複製的網頁元件設置在半透明層的上方，以實現突出顯示所複製的網頁元件的目的。由於複製的網頁元件是單獨設置在Web頁面的半透明層上方，使得複製的網頁元件脫離了Web頁面的文檔流，因此，需要重新設置複製的網頁元件，以保持原始的顯示效果。這樣，由於複製的網頁元件脫離了Web頁面的文檔流，使得無法根據文檔流設置該網頁元件的樣式，只能單獨計算該網頁元件的樣式，操作複雜，且容易出錯，從而導致了網頁元件控制的效率和可靠性的降低。
可選地，在本實施例的一個可能的實現方式中，在103之前，控制裝置還可以進一步利用JavaScript語言， 確定所述目標網頁元件的尺寸和位置。如圖2所示，圖中單向箭頭所指的即為所述目標網頁元件。
具體地，在103中，控制裝置具體可以根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值，即上方的尺寸差值、下方的尺寸差值、左方的尺寸差值和右方的尺寸差值。然後，所述控制裝置則可以根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸，即上邊框的寬度、下邊框的寬度、左邊框的寬度和右邊框的寬度。如圖3所示，圖中雙向箭頭所指的即為輔助網頁元件的邊框的尺寸。
這樣，如圖4所示，即為控制裝置通過執行104，所獲得處理之後的Web頁面。
需要說明的是，在圖2至圖4所示出的Web頁面上，只需要關注Web頁面的佈局即網頁元件的尺寸和位置，而不需要關注每個網頁元件的內容，也就是說，網頁元件的內容所包含的英文字元只是示意性質的，並沒有特別含義，可以忽略。
可選地，在本實施例的一個可能的實現方式中，在102中，控制裝置具體可以在所述Web頁面的主體(body)標籤下，創建所述輔助網頁元件。具體地，所述輔助網頁元件為區塊元素。其中，所述輔助網頁元件可以採用絕對定位方式，座標可以為(0,0)；或者還可以採用相對定位方式，座標則可以為(0,0)，本實施例對此 不進行限定。
本實施例中，通過根據Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸，進而根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸，使得能夠設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式，由於並沒有對目標網頁元件進行任何操作，使得目標網頁元件的位置沒有發生任何變化，也就是說，目標網頁元件始終沒有脫離Web頁面的文檔流，因此，能夠避免現有技術中由於複製的網頁元件即目標網頁元件脫離了Web頁面的文檔流而導致的重新設置複製的網頁元件的樣式的問題，操作簡單，且正確率高，從而提高了網頁元件控制的效率和可靠性。
另外，採用本申請案提供的技術方案，由於目標網頁元件始終沒有脫離Web頁面的文檔流，因此，目標網頁元件原始的樣式仍然有效，無需重新設置複製的網頁元件的樣式，能夠省去大量設置樣式的操作，從而能夠有效提高網頁元件控制的效率。
另外，採用本申請案提供的技術方案，通過採用網頁元件即輔助網頁元件的邊框的方式，來處理半透明層或不透明層，從而實現了無需改變原始的Web頁面的文檔流，就能夠突出顯示網頁元素即目標網頁元素的目的。
需要說明的是，對於前述的各方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領域技 術人員應該知悉，本申請案並不受所描述的動作順序的限制，因為依據本申請案，某些步驟可以採用其他順序或者同時進行。其次，本領域技術人員也應該知悉，說明書中所描述的實施例均屬於較佳實施例，所涉及的動作和模組並不一定是本申請案所必須的。
在上述實施例中，對各個實施例的描述都各有側重，某個實施例中沒有詳述的部分，可以參見其他實施例的相關描述。
圖5為本申請案另一實施例提供的網頁元件的控制裝置的結構示意圖，如圖5所示。本實施例的網頁元件的控制裝置可以包括確定單元51、創建單元52、獲得單元53和設置單元54。其中，確定單元51，用於確定Web頁面上待控制的目標網頁元件；創建單元52，用於根據所述Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸；獲得單元53，用於根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸；設置單元54，用於設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式。
具體地，所述目標網頁元件可以包括但不限於下列中的至少一項：文字、標籤、超連結、按鈕、輸入框和下拉清單，本實施例對此不進行限定。這個目標網頁元件就是需要突出顯示的網頁元件。
所述創建單元52通過執行相應的操作，在Web頁面 上，創建了一個整個Web頁面大小的輔助網頁元件，這個輔助網頁元件與Web頁面上除了所述目標網頁元件之外的其他網頁元件相對應。例如，所述輔助網頁元件可以位於Web頁面上除了所述目標網頁元件之外的任一其他網頁元件之上，也可以是與Web頁面上除了所述目標網頁元件之外的任一其他網頁元件相重疊。
較佳地，所述輔助網頁元件的垂直高度大於所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的垂直高度，以便在後續步驟中將所述輔助網頁元件設置為不透明狀態時可以完整的遮蓋住Web頁面上除目標網頁元件之外的其他網頁元件。
可以理解的是，輔助網頁元件的垂直高度與目標網頁元件的垂直高度無關，也就是說，輔助網頁元件的垂直高度既可以大於目標網頁元件的垂直高度，又可以小於目標網頁元件的垂直高度，甚至可以等於目標網頁元件的垂直高度，本實施例對此不進行限定。
可以理解的是，本申請案所涉及的頁面，可以是基於超文件標示語言(HyperText Markup Language，HTML)編寫的網頁(Web Page)，也可以稱為Web頁面。
具體地，所述輔助網頁元件的邊框可以為輔助網頁元件的外邊緣與所述目標網頁元件的外邊緣之間的部分。所述獲得單元53具體可以根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值。然後，所 述獲得單元53則可以根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸，即上邊框的寬度、下邊框的寬度、左邊框的寬度和右邊框的寬度。
這樣，可以實現輔助網頁元件的邊框設置在所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的地方。
可選地，在本實施例的一個可能的實現方式中，所述設置單元54具體可以根據預先設置的透明度參數，設置所述覆蓋網頁元件的邊框的透明度，所述透明度參數大於或等於0且小於1。由於設置單元54只設置了輔助網頁元件的邊框的透明度，使其處於非完全透明狀態，輔助網頁元件的其他部分的透明度缺省設置為完全透明，即透明度參數為1，因此，可以突出顯示目標網頁元件。
可以理解的是，當目標網頁元件的主色調為紅色時，所述設置單元54具體還可以將輔助網頁元件的邊框設置為淺綠色。其他任何可實現本申請案目的的實施方式均在本申請案保護範圍之內，本申請案對此並不做限定。
需要說明的是，本實施例提供的裝置可以是控制裝置，例如，Web頁面編輯器等，可以位於本地的用戶端中，以進行離線控制，或者還可以位於網路側的伺服器中，以進行線上控制，本實施例對此不進行限定。
可以理解的是，所述用戶端可以是安裝在終端上的應用程式，或者還可以是流覽器的一個網頁，只要能夠實現網頁元件控制，以實現該網頁元件的突出顯示的客觀存在 形式都可以，本實施例對此不進行限定。
採用本實施例提供的技術方案，沒有對目標網頁元件進行任何操作，致使目標網頁元件沒有發生任何的位置變化，並沒有脫離Web頁面的文檔流。
這樣，由於並沒有對目標網頁元件進行任何操作，使得目標網頁元件的位置沒有發生任何變化，也就是說，目標網頁元件始終沒有脫離Web頁面的文檔流，因此，能夠避免現有技術中由於複製的網頁元件即目標網頁元件脫離了Web頁面的文檔流而導致的重新設置複製的網頁元件的樣式的問題，操作簡單，且正確率高，從而提高了網頁元件控制的效率和可靠性。
另外，採用本申請案提供的技術方案，由於目標網頁元件始終沒有脫離Web頁面的文檔流，因此，目標網頁元件原始的樣式仍然有效，無需重新設置複製的網頁元件的樣式，能夠省去大量設置樣式的操作，從而能夠有效提高網頁元件控制的效率。
另外，採用本申請案提供的技術方案，通過採用網頁元件即輔助網頁元件的邊框的方式，來處理半透明層或不透明層，從而實現了無需改變原始的Web頁面的文檔流，就能夠突出顯示網頁元素即目標網頁元素的目的。
現有的網頁元件的控制裝置，首先在整個頁面上方設置一個半透明層，然後，複製需要突出顯示的網頁元件，並將複製的網頁元件設置在半透明層的上方，以實現突出顯示所複製的網頁元件的目的。由於複製的網頁元件是單 獨設置在Web頁面的半透明層上方，使得複製的網頁元件脫離了Web頁面的文檔流，因此，需要重新設置複製的網頁元件，以保持原始的顯示效果。這樣，由於複製的網頁元件脫離了Web頁面的文檔流，使得無法根據文檔流設置該網頁元件的樣式，只能單獨計算該網頁元件的樣式，操作複雜，且容易出錯，從而導致了網頁元件控制的效率和可靠性的降低。
可選地，在本實施例的一個可能的實現方式中，所述確定單元51，還可以進一步用於利用JavaScript語言，確定所述目標網頁元件的尺寸和位置。如圖2所示，圖中單向箭頭所指的即為所述目標網頁元件。
具體地，所述獲得單元53，具體可以用於根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值，即上方的尺寸差值、下方的尺寸差值、左方的尺寸差值和右方的尺寸差值；以及根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸，即上邊框的寬度、下邊框的寬度、左邊框的寬度和右邊框的寬度。如圖3所示，圖中雙向箭頭所指的即為輔助網頁元件的邊框的尺寸。
這樣，如圖4所示，即為設置單元54通過執行根據預先設置的透明度參數，設置所述覆蓋網頁元件的邊框的透明度的操作，所獲得的處理之後的Web頁面。其中，所述透明度參數大於或等於0且小於1。
需要說明的是，在圖2至圖4所示出的Web頁面上，只需要關注Web頁面的佈局即網頁元件的尺寸和位置，而不需要關注每個網頁元件的內容，也就是說，網頁元件的內容所包含的英文字元只是示意性質的，並沒有特別含義，可以忽略。
可選地，在本實施例的一個可能的實現方式中，所述創建單元52，具體用於在所述Web頁面的body標籤下，創建所述輔助網頁元件。具體地，所述輔助網頁元件為區塊元素。其中，所述輔助網頁元件可以採用絕對定位方式，座標可以為(0,0)；或者還可以採用相對定位方式，座標則可以為(0,0)，本實施例對此不進行限定。
本實施例中，通過創建單元根據Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸，進而由獲得單元根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸，使得設置單元能夠設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式，由於並沒有對目標網頁元件進行任何操作，使得目標網頁元件的位置沒有發生任何變化，也就是說，目標網頁元件始終沒有脫離Web頁面的文檔流，因此，能夠避免現有技術中由於複製的網頁元件即目標網頁元件脫離了Web頁面的文檔流而導致的重新設置複製的網頁元件的樣式的問題，操作簡單，且正確率高，從而提高了網頁元件控制的效率和可靠性。
另外，採用本申請案提供的技術方案，由於目標網頁元件始終沒有脫離Web頁面的文檔流，因此，目標網頁元件原始的樣式仍然有效，無需重新設置複製的網頁元件的樣式，能夠省去大量設置樣式的操作，從而能夠有效提高網頁元件控制的效率。
另外，採用本申請案提供的技術方案，通過採用網頁元件即輔助網頁元件的邊框的方式，來處理半透明層或不透明層，從而實現了無需改變原始的Web頁面的文檔流，就能夠突出顯示網頁元素即目標網頁元素的目的。
所屬領域的技術人員可以清楚地瞭解到，為描述的方便和簡潔，上述描述的系統，裝置和單元的具體工作過程，可以參考前述方法實施例中的對應過程，在此不再贅述。
在本申請案所提供的幾個實施例中，應該理解到，所揭露的系統，裝置和方法，可以通過其它的方式實現。例如，以上所描述的裝置實施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現時可以有另外的劃分方式，例如多個單元或元件可以結合或者可以集成到另一個系統，或一些特徵可以忽略，或不執行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些介面，裝置或單元的間接耦合或通信連接，可以是電性，機械或其它的形式。
所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不 是物理單元，即可以位於一個地方，或者也可以分佈到多個網路單元上。可以根據實際的需要選擇其中的部分或者全部單元來實現本實施例方案的目的。
另外，在本申請案各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以採用硬體的形式實現，也可以採用硬體加軟體功能單元的形式實現。
上述以軟體功能單元的形式實現的集成的單元，可以儲存在一個電腦可讀取儲存介質中。上述軟體功能單元儲存在一個儲存介質中，包括若干指令用以使得一台電腦設備(可以是個人電腦，伺服器，或者網路設備等)或處理器(processor)執行本申請案各個實施例所述方法的部分步驟。而前述的儲存介質包括：隨身碟、移動硬碟、唯讀記憶體(Read-Only Memory，ROM)、隨機存取記憶體(Random Access Memory，RAM)、磁碟或者光碟等各種可以儲存程式碼的介質。
最後應說明的是：以上實施例僅用以說明本申請案的技術方案，而非對其限制；儘管參照前述實施例對本申請案進行了詳細的說明，本領域的普通技術人員應當理解：其依然可以對前述各實施例所記載的技術方案進行修改，或者對其中部分技術特徵進行等同替換；而這些修改或者替換，並不使相應技術方案的本質脫離本申請案各實施例技術方案的精神和範圍。

Claims (14)

  1. 一種網頁元件的控制方法，其特徵在於，包括：確定全球資訊網Web頁面上待控制的目標網頁元件；根據所述Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸；根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸；設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式。
  2. 根據申請專利範圍第1項所述的方法，其中，設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式，包括：根據預先設置的透明度參數，設置所述輔助網頁元件的邊框的透明度，所述透明度參數大於或等於0且小於1。
  3. 根據申請專利範圍第1項所述的方法，其中，所述根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸，包括：根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值；根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸。
  4. 根據申請專利範圍第1項至第3項中任一項所述的方法，其中，所述根據所述Web頁面，創建輔助網頁元件，包括：在所述Web頁面的主體body標籤下，創建所述輔助網頁元件。
  5. 根據申請專利範圍第1項至第3項中任一項所述的方法，其中，所述根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸之前，還包括：利用JavaScript語言，確定所述目標網頁元件的尺寸和位置。
  6. 根據申請專利範圍第1項至第3項中任一項所述的方法，其中，所述輔助網頁元件為區塊元素。
  7. 根據申請專利範圍第1項至第3項中任一項所述的方法，其中，所述輔助網頁元件的垂直高度大於所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的垂直高度。
  8. 一種網頁元件的控制裝置，其特徵在於，包括：確定單元，用於確定全球資訊網Web頁面上待控制的目標網頁元件；創建單元，用於根據所述Web頁面，創建輔助網頁元件，所述輔助網頁元件的尺寸為所述Web頁面的尺寸； 獲得單元，用於根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件的邊框的尺寸；設置單元，用於設置所述輔助網頁元件的邊框展現方式為不同於所述目標網頁元件的展現方式。
  9. 根據申請專利範圍第8項所述的裝置，其中，所述設置單元，具體用於根據預先設置的透明度參數，設置所述輔助網頁元件的邊框的透明度，所述透明度參數大於或等於0且小於1。
  10. 根據申請專利範圍第8項所述的裝置，其中，所述獲得單元，具體用於根據所述輔助網頁元件的尺寸和所述目標網頁元件的尺寸和位置，獲得所述輔助網頁元件與所述目標網頁元件在每個方向上的尺寸差值；以及根據所述每個方向上的尺寸差值，獲得所述輔助網頁元件的邊框的尺寸。
  11. 根據申請專利範圍第8項至第10項中任一項所述的裝置，其中，所述創建單元，具體用於在所述Web頁面的主體body標籤下，創建所述輔助網頁元件。
  12. 根據申請專利範圍第8項至第10項中任一項所述的裝置，其中，所述確定單元，還用於利用JavaScript語言，確定所述目標網頁元件的尺寸 和位置。
  13. 根據申請專利範圍第8項至第10項中任一項所述的裝置，其中，所述輔助網頁元件為區塊元素。
  14. 根據申請專利範圍第8項至第10項中任一項所述的裝置，其中，所述輔助網頁元件的垂直高度大於所述Web頁面上除了所述目標網頁元件之外的任一其他網頁元件的垂直高度。
TW102145371A 2013-09-09 2013-12-10 網頁元件的控制方法及裝置 TW201510746A (zh)

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310406716.7A CN104424318A (zh) 2013-09-09 2013-09-09 页面元素的控制方法及装置

Publications (1)

Publication Number Publication Date
TW201510746A true TW201510746A (zh) 2015-03-16

Family

ID=51626591

Family Applications (1)

Application Number Title Priority Date Filing Date
TW102145371A TW201510746A (zh) 2013-09-09 2013-12-10 網頁元件的控制方法及裝置

Country Status (4)

Country Link
US (1) US20150074519A1 (zh)
CN (1) CN104424318A (zh)
TW (1) TW201510746A (zh)
WO (1) WO2015035319A1 (zh)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105373593B (zh) * 2015-10-14 2018-12-21 北京锤子数码科技有限公司 一种展示网页中目标元素的方法及装置
KR102387115B1 (ko) 2015-11-18 2022-04-18 삼성전자주식회사 전자 장치 및 이의 제어 방법
KR102500060B1 (ko) * 2015-11-18 2023-02-16 삼성전자주식회사 전자 장치 및 이의 제어 방법
CN107193815B (zh) * 2016-03-14 2021-03-12 阿里巴巴集团控股有限公司 一种页面代码的处理方法、装置及设备
CN106648821B (zh) * 2016-12-29 2020-02-11 北京奇艺世纪科技有限公司 一种网页优化方法及装置
CN108573027A (zh) * 2018-03-15 2018-09-25 北京雷石天地电子技术有限公司 一种界面显示方法和装置
CN112417344B (zh) * 2021-01-25 2021-10-08 北京小米移动软件有限公司 渲染方法、装置、电子设备及存储介质
CN113608647B (zh) * 2021-10-11 2022-01-04 广东新空电子科技股份有限公司 一种辅助记忆的笔记遮盖方法及装置

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7721225B2 (en) * 2005-05-03 2010-05-18 Novell, Inc. System and method for creating and presenting modal dialog boxes in server-side component web applications
JP5306078B2 (ja) * 2009-06-30 2013-10-02 キヤノン株式会社 情報処理装置、情報処理方法、およびプログラム
CN102117290B (zh) * 2009-12-30 2015-03-18 北京搜狗科技发展有限公司 一种展现网页中页面元素的方法及系统
KR20110081040A (ko) * 2010-01-06 2011-07-13 삼성전자주식회사 투명 디스플레이를 구비한 휴대단말에서 컨텐츠 운용 방법 및 장치
CN101882432B (zh) * 2010-02-01 2012-07-04 深圳市同洲电子股份有限公司 一种焦点元素显示方法、装置及数字电视接收终端
CN102024028B (zh) * 2010-11-22 2014-04-02 百度在线网络技术（北京）有限公司 在移动终端上突出显示网页的主体内容的方法及设备
CN102609414A (zh) * 2011-01-20 2012-07-25 中兴通讯股份有限公司 一种基于浏览器的图片热区突出显示方法、装置及系统
JP6099961B2 (ja) * 2012-12-18 2017-03-22 キヤノン株式会社 画像表示装置、画像表示装置の制御方法およびコンピュータプログラム

Also Published As

Publication number Publication date
CN104424318A (zh) 2015-03-18
US20150074519A1 (en) 2015-03-12
WO2015035319A1 (en) 2015-03-12

Similar Documents

Publication Publication Date Title
TW201510746A (zh) 網頁元件的控制方法及裝置
US10691331B2 (en) Native overlay for rapid editing of web content
US11112946B2 (en) Interface information display method and apparatus
CN105683895B (zh) 提供用户交互的用户终端设备及其方法
US11216253B2 (en) Application prototyping tool
CN105164632B (zh) 视窗切换界面
US10460014B2 (en) Scrolling in large hosted data set
TWI695320B (zh) 頁面處理方法、裝置及設備
CN104978317B (zh) 网页生成方法及装置、网站生成方法及建站服务器
US11790158B1 (en) System and method for using a dynamic webpage editor
US8397153B1 (en) Systems and methods for rich presentation overlays
US20200089396A1 (en) Automatically generating and applying graphical user interface resize-contraints based on design semantics
US10140279B2 (en) Techniques for providing user interface enhancements for spreadsheets and tables
KR20140078629A (ko) 인플레이스 방식으로 값을 편집하는 사용자 인터페이스
US20170235706A1 (en) Effecting multi-step operations in an application in response to direct manipulation of a selected object
US9910554B2 (en) Assisting graphical user interface design
KR102343361B1 (ko) 전자 기기 및 이의 웹 페이지 디스플레이 방법
US20150199113A1 (en) Electronic content visual comparison apparatus and method
US20190250790A1 (en) Managing content displayed on a touch screen enabled device
TW201520878A (zh) 頁面元素的控制方法及裝置
US20140123036A1 (en) Touch screen display process
US10908764B2 (en) Inter-context coordination to facilitate synchronized presentation of image content
US10747943B2 (en) Method, device, client apparatus, and electronic device for presenting webpages
US20160132478A1 (en) Method of displaying memo and device therefor
JP6200876B2 (ja) コンテンツオーサリングツールでインデックスページを構築する方法およびシステム