CN111897532A - Page element monitoring method, electronic device and medium - Google Patents
Page element monitoring method, electronic device and medium Download PDFInfo
- Publication number
- CN111897532A CN111897532A CN202010731851.9A CN202010731851A CN111897532A CN 111897532 A CN111897532 A CN 111897532A CN 202010731851 A CN202010731851 A CN 202010731851A CN 111897532 A CN111897532 A CN 111897532A
- Authority
- CN
- China
- Prior art keywords
- monitoring
- page
- target
- elements
- target container
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
- G06F11/302—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3051—Monitoring arrangements for monitoring the configuration of the computing system or of the computing system component, e.g. monitoring the presence of processing resources, peripherals, I/O links, software programs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3089—Monitoring arrangements determined by the means or processing involved in sensing the monitored data, e.g. interfaces, connectors, sensors, probes, agents
-
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Computing Systems (AREA)
- Quality & Reliability (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Mathematical Physics (AREA)
- Data Mining & Analysis (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention relates to a page element monitoring method, electronic equipment and a medium, wherein the method comprises the following steps: placing target page elements in a target container, and inserting monitoring elements in the target container, wherein the target page elements are changed to cause the size of the target container to be changed, the monitoring elements are changed along with the size change of the target container, and the target page element changes at least comprise the position change and the size change of the target page elements; and monitoring the monitoring element, and if the monitoring element changes, determining that the target page element changes. The invention can simply and effectively monitor the page elements.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a page element monitoring method, an electronic device, and a medium.
Background
In the web page technology, after a page element is changed, business-related processing is performed under some circumstances, for example, a dynamic page changes the layout and size of the page element due to a user operation, and at this time, a content rendered inside the page element may have a misalignment and an abnormal content display, and in this case, it is necessary to monitor the change of the page element and re-render the content inside the page element.
However, in the existing web page technology, only the browser can monitor the size change of the whole page, for example, CN111274510A, and it also relates to monitoring the view page by setting a monitoring event, that is, monitoring the whole page, but cannot directly monitor the change of the page element, so how to implement monitoring the page element becomes an urgent technical problem to be solved.
Disclosure of Invention
The invention aims to provide a page element monitoring method, electronic equipment and a medium, which can monitor page elements.
According to a first aspect of the present invention, a page element monitoring method is provided, including:
placing target page elements in a target container, and inserting monitoring elements in the target container, wherein the target page elements are changed to cause the size of the target container to be changed, the monitoring elements are changed along with the size change of the target container, and the target page element changes at least comprise the position change and the size change of the target page elements;
and monitoring the monitoring element, and if the monitoring element changes, determining that the target page element changes.
Further, the inserting a listening element in the target container includes:
and inserting a monitoring element at the bottom layer of the target page element.
Further, the inserting a listening element in the target container includes:
and setting the sizes of the monitoring elements and the target container according to the ratio of 1: 1.
Further, the inserting a listening element in the target container includes:
setting the listening element to a transparent state.
Further, listening to the listening element includes:
the monitoring element provides a monitoring interface for acquiring an HTML window object;
adding a change monitoring event for the monitoring interface;
and monitoring the monitoring element based on the change monitoring event, and further monitoring the target page element.
Further, the listening element is an HTML object element or an HTML iframe element.
Further, when the target page element is determined to be changed, a target page element updating instruction is sent, and the target page element is updated according to the size of the current target container.
According to a second aspect of the present invention, there is provided an electronic apparatus comprising: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being arranged to perform the method of the first aspect of the invention.
According to a third aspect of the invention, there is provided a computer readable storage medium, the computer instructions being for performing the method of the first aspect of the invention.
Compared with the prior art, the invention has obvious advantages and beneficial effects. By the technical scheme, the page element monitoring method, the electronic equipment and the medium provided by the invention can achieve considerable technical progress and practicability, have industrial wide utilization value and at least have the following advantages:
the method and the device can simply and effectively monitor the page elements, and can correspondingly update the page elements based on the monitoring result of the page elements so as to ensure that the page elements are matched with the page, avoid the conditions of dislocation and abnormal content display, and improve the user experience.
The foregoing description is only an overview of the technical solutions of the present invention, and in order to make the technical means of the present invention more clearly understood, the present invention may be implemented in accordance with the content of the description, and in order to make the above and other objects, features, and advantages of the present invention more clearly understood, the following preferred embodiments are described in detail with reference to the accompanying drawings.
Drawings
Fig. 1 is a flowchart of a page element monitoring method according to an embodiment of the present invention.
Detailed Description
To further illustrate the technical means and effects of the present invention adopted to achieve the predetermined objects, the following detailed description will be given to specific embodiments and effects of a page element monitoring method, an electronic device and a medium according to the present invention with reference to the accompanying drawings and preferred embodiments.
In the existing web page technology, a Document Object Model (DOM for short) Application Program Interface (API) of a browser mainly supports a resize event for a window Object, where the resize event is an event for monitoring page changes, and page elements of page content have no corresponding resize event to monitor, and cannot be adjusted according to changes of the page elements, so that conditions such as misalignment and content display abnormality occur, based on which, an embodiment of the present invention provides a page element monitoring method, which includes the following steps:
step S1, placing the target page element in a target container, and inserting a monitoring element into the target container;
it should be noted that the target page element refers to a page element that needs to be listened to, and the page element includes, but is not limited to, text, image, animation, diagram, and the like. The change of the target page element causes the change of the size of the target container, and the monitoring element changes along with the change of the size of the target container. Dynamic updating of page elements or operating function buttons corresponding to page elements, which may include an add button, a delete button, an enlarge button, a reduce button, etc., may result in page element changes. The page element changes include, but are not limited to, a position change and a size change of the target page element. It will be appreciated that a page may correspond to multiple target containers, and that a target container may correspond to multiple target page elements.
And step S2, monitoring the monitoring element, and if the monitoring element changes, determining that the target page element changes.
Based on the method provided by the embodiment of the invention, the page elements can be monitored, and the page elements can be dynamically adjusted according to the change of the page elements, so that the page elements are matched with the page, the conditions of dislocation, abnormal content display and the like are avoided, and the user experience is improved.
As an example, the method may further include step S3, when it is determined that the target page element is changed, sending a target page element update instruction, and updating the target page element according to the size of the current target container.
The embodiment of the invention can monitor the size change of the page element in an application scene of updating the page caused by the size change of the whole page, and the page element updating module can update the page element based on the monitored page element change, so that the page element and the page have higher matching degree, and a developer can be helped to more conveniently process the problem of re-rendering caused by the size change under a complex scene in the page. In an application scenario where only page elements change and the size of the whole page does not change, the embodiment of the present invention can accurately and effectively monitor the change of the page elements, and also update the page elements based on the monitoring result, thereby effectively solving the problem that the prior art cannot directly monitor the page elements.
As an example, the step S1 of inserting a listening element in the target container may include the step S11 of inserting a listening element at the bottom of the target page element. It can be understood that the page elements are arranged in a layered manner, and the monitoring element is inserted into the bottom layer of the target page element, so that the monitoring of the whole target page can be ensured, and the influence on the updating process of the target element is avoided.
As an example, the step S1 of inserting the listening element into the target container may further include the step S12 of setting the size of the listening element and the target container according to a ratio of 1:1, so that the change of the target container can be accurately listened to, and thus the change of the target page element can be accurately listened to. It should be noted that the size ratio of the listening element to the target container is not limited to 1:1, and the size ratio of the listening element to the target container may be adaptively adjusted according to the size of the target container, the position of the target page element in the container, and other factors.
As an example, the step S1 of inserting a listening element in the target container may further include the step S13 of setting the listening element in a transparent state to avoid blocking normal operations of the user on the target page element.
As an example, in step S2, listening to the listening element may specifically include:
step S21, the monitoring element provides a monitoring interface for acquiring a hypertext markup language (HTML) window object;
step S22, adding a change monitoring event for the monitoring interface;
and step S23, monitoring the monitoring element based on the change monitoring event, and further monitoring the target page element.
The listening element can be set as an HTML object element or HTML iframe element, where the HTML object element, i.e. HTML < object > element, is an HTML embedded object element, which indicates to introduce an external resource, and the resource may be a picture, an embedded browsing context, or a resource used by a plug-in. The HTML iframe element, HTML < iframe > element, is an HTML inline frame element that creates an inline frame (i.e., inline frame) that contains another document. The HTML < object > element and the HTML < iframe > element can both provide an interface for obtaining the window object of the HTML window, for example, content document.
The method of the embodiment of the present invention is further explained by taking a target page element as a histogram as an application scenario and a monitoring element as an HTML < object > element, where when a cylinder is deleted from the histogram, the size of a corresponding target container changes and the HTML < object > element also changes correspondingly, the change monitoring event reset event monitoring histogram added by the HTML < object > is triggered, and a monitoring result is sent to a page update module, so that the page update module redraws the histogram based on the size of the current target container and updates the histogram on the page.
An embodiment of the present invention further provides an electronic device, including: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions configured to perform a method according to an embodiment of the invention.
The embodiment of the invention also provides a computer-readable storage medium, and the computer instructions are used for executing the method of the embodiment of the invention.
Although the present invention has been described with reference to a preferred embodiment, it should be understood that various changes, substitutions and alterations can be made herein without departing from the spirit and scope of the invention as defined by the appended claims.
Claims (8)
1. A method for monitoring page elements is characterized by comprising the following steps:
placing target page elements in a target container, and inserting monitoring elements in the target container, wherein the target page elements are changed to cause the size of the target container to be changed, the monitoring elements are changed along with the size change of the target container, and the target page element changes at least comprise the position change and the size change of the target page elements;
and monitoring the monitoring element, and if the monitoring element changes, determining that the target page element changes.
2. The page element listening method according to claim 1,
the inserting of the listening element in the target container includes:
and inserting a monitoring element at the bottom layer of the target page element.
3. The method for page element monitoring according to claim 1, wherein the inserting a monitoring element in the target container comprises:
and setting the sizes of the monitoring elements and the target container according to the ratio of 1: 1.
4. The method for page element monitoring according to claim 1, wherein the inserting a monitoring element in the target container comprises:
setting the listening element to a transparent state.
5. The page element listening method of claim 1, wherein listening for the listening element comprises:
the monitoring element provides a monitoring interface for acquiring an HTML window object;
adding a change monitoring event for the monitoring interface;
and monitoring the monitoring element based on the change monitoring event, and further monitoring the target page element.
6. The page element snooping method according to claim 5, wherein the snoop element is an HTML object element or an HTML iframe element.
7. An electronic device, comprising:
at least one processor;
and a memory communicatively coupled to the at least one processor;
wherein the memory stores instructions executable by the at least one processor, the instructions being arranged to perform the method of any of the preceding claims 1-6.
8. A computer-readable storage medium having stored thereon computer-executable instructions for performing the method of any of the preceding claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010731851.9A CN111897532A (en) | 2020-07-27 | 2020-07-27 | Page element monitoring method, electronic device and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010731851.9A CN111897532A (en) | 2020-07-27 | 2020-07-27 | Page element monitoring method, electronic device and medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111897532A true CN111897532A (en) | 2020-11-06 |
Family
ID=73191124
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010731851.9A Pending CN111897532A (en) | 2020-07-27 | 2020-07-27 | Page element monitoring method, electronic device and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111897532A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112612449A (en) * | 2020-12-17 | 2021-04-06 | 深圳前海微众银行股份有限公司 | Method, device, equipment and storage medium for synchronizing webpage |
| CN113886188A (en) * | 2021-10-20 | 2022-01-04 | 北京达佳互联信息技术有限公司 | Webpage element monitoring method and device, electronic equipment and storage medium |
| CN113885997A (en) * | 2021-10-19 | 2022-01-04 | 深圳市元征科技股份有限公司 | Dialog box display method and device, electronic equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101425094A (en) * | 2008-12-12 | 2009-05-06 | 腾讯科技（深圳）有限公司 | Method and device for changing window of container |
| CN108089856A (en) * | 2016-11-22 | 2018-05-29 | 北京国双科技有限公司 | The monitor method and device of a kind of page elements |
| US10430926B1 (en) * | 2017-05-09 | 2019-10-01 | Promontech Llc | Systems, media, and methods for improving responsiveness of spotlight tours in a dynamic viewport environment |
| CN110866208A (en) * | 2019-10-10 | 2020-03-06 | 东软集团股份有限公司 | Responsive layout method, device and equipment for page |
| CN111176768A (en) * | 2019-12-18 | 2020-05-19 | 福建升腾资讯有限公司 | Nested parent control and child control multi-level display method and device |
-
2020
- 2020-07-27 CN CN202010731851.9A patent/CN111897532A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101425094A (en) * | 2008-12-12 | 2009-05-06 | 腾讯科技（深圳）有限公司 | Method and device for changing window of container |
| CN108089856A (en) * | 2016-11-22 | 2018-05-29 | 北京国双科技有限公司 | The monitor method and device of a kind of page elements |
| US10430926B1 (en) * | 2017-05-09 | 2019-10-01 | Promontech Llc | Systems, media, and methods for improving responsiveness of spotlight tours in a dynamic viewport environment |
| CN110866208A (en) * | 2019-10-10 | 2020-03-06 | 东软集团股份有限公司 | Responsive layout method, device and equipment for page |
| CN111176768A (en) * | 2019-12-18 | 2020-05-19 | 福建升腾资讯有限公司 | Nested parent control and child control multi-level display method and device |
Non-Patent Citations (6)
| Title |
|---|
| SHUSHUSHU: ""监听div的resize"", 《HTTPS://SEGMENTFAULT.COM/A/1190000016550156》 * |
| WEIXIN_34240520: ""监听div的resize"", 《HTTPS://BLOG.CSDN.NET/WEIXIN_34240520/ARTICLE/DETAILS/88755673》 * |
| ZHTUI: ""JS监听div的resize事件"", 《HTTPS://WWW.CNBLOGS.COM/ZHTUI/P/7059943.HTML》 * |
| 党庆忠: "《网页设计与制作 第2版》", 30 November 2017, 重庆大学出版社 * |
| 王艳丽 等: "《网页设计案例教程》", 30 April 2016, 北京理工大学出版社 * |
| 袖梨: ""通过iframe监听一个DOM元素大小变化实现代码"", 《HTTP://WWW.111COM.NET/WY/184714.HTM》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112612449A (en) * | 2020-12-17 | 2021-04-06 | 深圳前海微众银行股份有限公司 | Method, device, equipment and storage medium for synchronizing webpage |
| CN113885997A (en) * | 2021-10-19 | 2022-01-04 | 深圳市元征科技股份有限公司 | Dialog box display method and device, electronic equipment and storage medium |
| CN113886188A (en) * | 2021-10-20 | 2022-01-04 | 北京达佳互联信息技术有限公司 | Webpage element monitoring method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111897532A (en) | Page element monitoring method, electronic device and medium | |
| US9075893B1 (en) | Providing files with cacheable portions | |
| US8286076B1 (en) | Rendering approximate webpage screenshot client-side | |
| US9436772B2 (en) | Appending a uniform resource identifier (URI) fragment identifier to a uniform resource locator (URL) | |
| US10409899B2 (en) | Method, device and mobile terminal for processing webpage in night mode | |
| US8631335B2 (en) | Interactive element management in a web page | |
| US9519661B2 (en) | Method and system for updating a background picture of a web search results page for different search queries | |
| EP2755145A1 (en) | Webpage browsing method and device, and storage medium | |
| CN107943997B (en) | Remote website evidence obtaining method based on Google browser, terminal device and storage medium | |
| WO2015017222A1 (en) | Methods and systems for generating server-side media queries | |
| CN107045546B (en) | Webpage processing method and device and intelligent terminal | |
| US8700992B1 (en) | Method for determining position and dimensions of webpage elements by wireframe injection | |
| US9548042B2 (en) | Responsive document breakpoints systems and methods | |
| CN111309671A (en) | Method, device and storage medium for exporting PDF (Portable document Format) of web report | |
| CN113382083A (en) | Webpage screenshot method and device | |
| CN106294760B (en) | Form processing method, server and client | |
| US20150199329A1 (en) | Text display method and apparatus of electronic device | |
| WO2019223093A1 (en) | Display box processing method, apparatus, computer device, and storage medium | |
| US20080201648A1 (en) | Web page-embedded dialogs | |
| JP2012079188A (en) | Style information processor and method | |
| CN109710866B (en) | Method and device for displaying pictures in online document | |
| US9223758B1 (en) | Determining a language encoding data setting for a web page, and applications thereof | |
| CN113721909A (en) | Element scaling monitoring method and device and electronic equipment | |
| US20160140112A1 (en) | Information processing system, information processing method, data, information processing device, display device, display method, program, and information storage medium | |
| CN113032696A (en) | Display method and display device of page picture |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: Room 401, 2-6 / F, No.5 Lane 541, Wenshui East Road, Hongkou District, Shanghai 200434 Applicant after: Shanghai hipu Intelligent Information Technology Co.,Ltd. Address before: Room 401, 2-6 / F, No.5 Lane 541, Wenshui East Road, Hongkou District, Shanghai 200434 Applicant before: Shanghai Honglu Data Technology Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20201106 |
|
| WD01 | Invention patent application deemed withdrawn after publication |