CN114327176A

CN114327176A - Page element query method and device, electronic equipment and storage medium

Info

Publication number: CN114327176A
Application number: CN202110939093.4A
Authority: CN
Inventors: 林淼庆
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2021-08-16
Filing date: 2021-08-16
Publication date: 2022-04-12

Abstract

The application discloses a page element query method, a page element query device, electronic equipment and a storage medium; a target page can be displayed, wherein the target page comprises at least one page element, and the target page is a functional page for an object to inquire page element information; in response to a query operation for a target page element in the target page, displaying attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information includes key style information of the target page element, and the target page element is any one of the page elements of the target page. According to the page element information query method and device, the function page for querying the related information of the page elements can be provided, the related information of the page elements can be checked by operating the page elements in the page, and the efficiency and accuracy of the page element information query are improved.

Description

Page element query method and device, electronic equipment and storage medium

Technical Field

The application relates to the technical field of computers, in particular to a page element query method, a page element query device, electronic equipment and a storage medium.

Background

With the development of computer technology and network technology, the application range of various software is wider and wider. The user interface is a key ring in the software design process and is a medium for interaction and information exchange between a software system and a user. The logic completeness and data completeness of the user interface directly affect the user experience and even lead to rework of the software development process. After the user interface is developed, it needs to be walked. By walking through the user interface, whether the designed user interface can be interacted normally and whether the data in the user interface is displayed and designed correctly can be judged.

In the related art, the user interface walk-through is usually performed manually by means of experience of an inspector and a test case. The checking mode is time-consuming and labor-consuming, low in efficiency and high in error rate.

Disclosure of Invention

The embodiment of the application provides a page element query method, a page element query device, electronic equipment and a storage medium, and relevant information of a page element can be checked by operating the page element in a page, so that efficiency and accuracy of page element information query are improved.

The embodiment of the application provides a page element query method, which comprises the following steps:

displaying a target page, wherein the target page comprises at least one page element, and the target page is a functional page for an object to inquire page element information;

in response to a query operation for a target page element in the target page, displaying attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information includes key style information of the target page element, the region identifier includes an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page.

Correspondingly, an embodiment of the present application provides a page element query apparatus, including:

the system comprises a first display unit, a second display unit and a third display unit, wherein the first display unit is used for displaying a target page, the target page comprises at least one page element, and the target page is a functional page for an object to inquire page element information;

the second display unit is configured to display, in response to a query operation for a target page element in the target page, attribute information of the target page element and a region identifier of the target page element on the target page, where the attribute information includes key style information of the target page element, the region identifier includes an identifier of a location region where the target page element is located in the target page, and the target page element is any one of the page elements of the target page.

Optionally, in some embodiments of the present application, the second presenting unit may be specifically configured to, in response to a query operation for a target page element in the target page, present, on the target page, an attribute information list and an area identifier of the target page element, where the attribute information list includes at least one attribute information of the target page element.

Optionally, in some embodiments of the present application, the page element querying device may further include a third presentation unit, as follows:

the third display unit is configured to display, in response to a query operation for a target page element in the target page, relative position information between the target page element and a reference page element on the target page, where the reference page element is any one of page elements of the target page except the target page element.

Optionally, in some embodiments of the present application, the page element querying device may further include a determining unit, as follows:

the determining unit is configured to determine, in response to a reference element selection operation for a page element in the target page, the page element as a reference page element.

Optionally, in some embodiments of the present application, the relative position information includes a relative position relationship and distance information, and the distance information is determined according to the relative position relationship between the target page element and the reference page element.

Optionally, in some embodiments of the present application, the page element query apparatus may further include a comparing unit and a distance determining unit, as follows:

the comparison unit is used for comparing the position information of the target page element with the position information of the reference page element to obtain the relative position relationship between the target page element and the reference page element;

and the distance determining unit is used for determining the distance information between the target page element and the reference page element according to the relative position relation.

Optionally, in some embodiments of the present application, the target page further includes a virtual boundary line of the target page element relative to the target page, where the virtual boundary line indicates position information and a size of the target page element in the target page.

Optionally, in some embodiments of the application, the second presentation unit may be specifically configured to, in response to a query operation for a target page element in the target page, present, on the target page, attribute information of the target page element and an area identifier of the target page element based on page development data of the target page.

Optionally, in some embodiments of the present application, the page element query apparatus may further include a loading unit and a starting unit, as follows:

the loading unit is used for loading a page element query program so as to display an element query control on an initial target page;

and the starting unit is used for responding to the triggering operation aiming at the element query control, starting a page element information query function of the initial target page and obtaining the target page.

Optionally, in some embodiments of the present application, the target page further includes a manuscript viewing control; the page element query device may further include a manuscript viewing unit, as follows:

and the manuscript checking unit is used for responding to the triggering operation aiming at the manuscript checking control and displaying the page design manuscript corresponding to the target page.

The electronic device provided by the embodiment of the application comprises a processor and a memory, wherein the memory stores a plurality of instructions, and the processor loads the instructions to execute the steps in the page element query method provided by the embodiment of the application.

In addition, a computer-readable storage medium is provided, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps in the page element query method provided in the embodiments of the present application.

The embodiment of the application provides a page element query method, a page element query device, electronic equipment and a storage medium, which can display a target page, wherein the target page comprises at least one page element, and the target page is a functional page for an object to query page element information; in response to a query operation for a target page element in the target page, displaying attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information includes key style information of the target page element, the region identifier includes an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page. According to the page element information query method and device, the function page for querying the related information of the page elements can be provided, the related information of the page elements can be checked by operating the page elements in the page, and the efficiency and accuracy of the page element information query are improved.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.

Fig. 1a is a schematic view of a scenario of a page element query method provided in an embodiment of the present application;

FIG. 1b is a flowchart of a method for querying a page element according to an embodiment of the present application;

fig. 1c is a schematic page diagram of a page element query method provided in an embodiment of the present application;

FIG. 1d is an illustration of a method for querying a page element according to an embodiment of the present disclosure;

FIG. 1e is another illustration diagram of a page element query method provided in an embodiment of the present application;

FIG. 1f is another illustration diagram of a page element query method provided by an embodiment of the present application;

FIG. 1g is another illustration diagram of a page element query method provided by an embodiment of the present application;

FIG. 1h is another flowchart of a method for querying a page element according to an embodiment of the present disclosure;

FIG. 1i is another schematic page diagram of a page element query method provided in an embodiment of the present application;

FIG. 1j is another schematic page diagram of a page element query method according to an embodiment of the present application;

FIG. 1k is another schematic page diagram of a page element query method provided in an embodiment of the present application;

FIG. 2a is another flowchart of a method for querying a page element according to an embodiment of the present application;

FIG. 2b is another schematic page diagram of the page element query method according to the embodiment of the present application;

FIG. 2c is another schematic page diagram of the page element query method according to the embodiment of the present application;

FIG. 2d is another schematic page diagram of the page element query method according to the embodiment of the present application;

FIG. 2e is another schematic page diagram of the page element query method according to the embodiment of the present application;

FIG. 2f is another schematic page diagram of the page element query method according to the embodiment of the present application;

fig. 3 is a schematic structural diagram of a page element query device provided in an embodiment of the present application;

fig. 4 is a schematic structural diagram of an electronic device provided in an embodiment of the present application.

Detailed Description

The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

The embodiment of the application provides a page element query method, a page element query device, electronic equipment and a storage medium. The page element query device may be specifically integrated in an electronic device, and the electronic device may be a terminal or a server.

It is understood that the page element query method of the present embodiment may be executed on the terminal, may also be executed on the server, and may also be executed by both the terminal and the server. The above examples should not be construed as limiting the present application.

As shown in fig. 1a, a method for jointly executing a page element query by a terminal and a server is taken as an example. The page element query system provided by the embodiment of the application comprises a terminal 10, a server 11 and the like; the terminal 10 and the server 11 are connected via a network, for example, a wired or wireless network connection, and the page element query device may be integrated in the terminal.

Wherein, the terminal 10 may be configured to: displaying a target page of a client, wherein the target page comprises at least one page element, and the target page is a functional page for an object to inquire page element information; in response to a query operation for a target page element in the target page, displaying attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information includes key style information of the target page element, the region identifier includes an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page. The terminal 10 may include a mobile phone, a smart television, a tablet Computer, a notebook Computer, a Personal Computer (PC), or the like. A client, which may be an application client or a browser client or the like, may also be provided on the terminal 10.

The server 11 may send page development data of a target page to the terminal 10, so that the terminal 10, in response to a query operation for a target page element in the target page, displays attribute information of the target page element and an area identifier of the target page element on the target page according to the page development data. The server 11 may be a single server, or may be a server cluster or a cloud server composed of a plurality of servers.

The step of the server 11 acquiring the page development data may be executed by the terminal 10.

The following are detailed below. It should be noted that the following description of the embodiments is not intended to limit the preferred order of the embodiments.

The present embodiment will be described from the perspective of a page element query apparatus, where the page element query apparatus may be specifically integrated in an electronic device, and the electronic device may be a server or a terminal, and the like.

The page element query method can be applied to various relevant scenes of page element query. For example, when a webpage is developed by front-end development or User Interface (UI for short), measurement information and style information of the webpage elements can be checked at a computer end or a mobile phone end and the like by the page element query method provided by the embodiment, so that efficiency and accuracy of querying the page element information can be improved.

As shown in fig. 1b, the specific process of the page element query method may be as follows:

101. and displaying a target page, wherein the target page comprises at least one page element, and the target page is a functional page for an object to inquire page element information.

The target page is specifically a page showing content information, the target page includes at least one page element, and the page element may be a text, an image, or a graphic and text information obtained by combining the text and the image, which is not limited in this embodiment, where the image may be a static image or a dynamic image. As shown in fig. 1c, the page element may be an icon corresponding to the text "nucleic acid detection", or an image — the "nucleic acid detection" (i.e., an icon located above the text "nucleic acid detection"), or an icon corresponding to the text information — the "5222 Ben Settlement" (which includes both the text information "5222 Ben Settlement"), and a rounded rectangle shape of the icon, i.e., image information).

In this embodiment, the target page is a functional page for the object to query the page element information, and the user may query the relevant information of a certain page element in the target page by operating the page element. Wherein the object specifically refers to a user; the page element information may include attribute information, area identifier, and the like of the page element, which is not limited in this embodiment, and may specifically be related information of the page element. As shown in fig. 1c, the page elements are text: the first (in top-down, left-to-right order) "nucleic acid detection" page element information may be its attribute information (including width, height, font size, color, line height, background color, font weight, and boundary radius) and region identification (i.e., virtual bounding box).

Optionally, in this embodiment, the page element query method may further include:

loading a page element query program to display an element query control on an initial target page;

and responding to the triggering operation aiming at the element query control, starting a page element information query function of the initial target page, and obtaining the target page.

Before a functional page with the information of the query page element is obtained, a page element query program needs to be introduced into a client. Specifically, a user introduces a page element query program into a client in a manner of npm or cdn (Content Delivery Network), and the page element query program can be regarded as a page element walkthrough tool and can be used to query relevant information of page elements in a page. Npm is a JavaScript package management tool and is a default package management tool of a node. js platform, and codes can be installed, shared and distributed through npm to manage project dependency.

The JavaScript is an transliterated script language, is a dynamic type, weak type, prototype-based language, and is internally provided with a support type. Its interpreter is called JavaScript engine, which is a part of browser, widely used in script Language of client, and was used on HTML (HyperText Markup Language) web page for the first time, so as to add dynamic function to HTML web page. Js is an open source code and cross-platform JavaScript running environment capable of running JavaScript on a server side. Js can improve the performance based on technologies such as event-driven, non-blocking and asynchronous input and output models, and can optimize the transmission quantity and scale of an application program.

By loading the page element query program, the initial target page without the function of querying the page element information can be converted into a functional page with the function of querying the page element information, namely the target page.

The triggering operation on the element query control may specifically be a click operation or a sliding operation on the element query control, which is not limited in this embodiment.

In some embodiments, when the page element information query function for the initial target page is started, the target page is displayed, a floating function control may be displayed on the target page, and there are multiple types of floating function controls, which is not limited in this embodiment. It may specifically include a close measurement control, a manuscript view control, an automated contrast control, and a share control, as shown in fig. 1 c. The user can trigger the corresponding function through the trigger operation of the corresponding control.

For example, the user may click on the close measure control to close the page element information query function of the target page, and restore the target page to the original target page. The user can also start automatic measurement of each page element in the target page by clicking the automatic comparison control, and relevant information of each page element in the target page, such as attribute information, area identification and the like, can be displayed without the need of operating the page element in the target page by the user. When the user clicks the sharing control, the target page can be shared with other users, specifically with other users in the client, and also with users in other clients.

Optionally, in this embodiment, the target page further includes a manuscript viewing control; the page element query method may further include:

and responding to the triggering operation aiming at the manuscript viewing control, and displaying the page design manuscript corresponding to the target page.

The triggering operation on the manuscript viewing control may be specifically a clicking operation or a sliding operation on the manuscript viewing control, which is not limited in this embodiment.

The page design manuscript may be a related page development design drawing of the target page, which is not limited in this embodiment.

102. In response to a query operation for a target page element in the target page, displaying attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information includes key style information of the target page element, the region identifier includes an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page.

The query operation on the target page element may be a click operation, a sliding operation, a long-time press operation, and the like on the target page element, and may be specifically set according to an actual situation, which is not limited in this embodiment.

The attribute information of the target page element may include information such as width, height, color, background color, and boundary radius (border-radius) of the target page element. If the target page element contains text information, the attribute information of the target page element may further include a font size, a font color, a line height, a font weight, and the like, which is not limited in this embodiment.

Specifically, in the target page, the attribute information of the target page element may be described by specific text information, or may be presented only in a numbering manner. If the font color of the target page element is red, a red color number, for example 001, may be displayed in the target page.

The attribute information includes key style information of the target page element, and the attribute information may also include other non-key style information of the target page element, and the attribute information to be displayed may be determined according to the size of the display space. When the display space is small, only the key style information of the target page element may be displayed. In other embodiments, the key style information of the target page element may be displayed first, and then the non-key style information of the target page element may be displayed. The key style information may be attribute information that is relatively important in the target page element.

Alternatively, in this embodiment, the attribute information of the page element may be obtained by a currentStyle or getComputedStyle method, and then the character string is spliced according to the loop and finally displayed on the target page. Wherein, the final display style of the element can be read by using currentStyle object, which is a read-only object. And the getComputedStyle method is used to acquire a CSS (Cascading Style Sheets) Style of the specified element, and the acquired Style is a Style of a final rendering effect of the element.

The area identifier of the target page element is specifically an identifier of a position area where the target page element is located in the target page, and may be a virtual frame corresponding to the target page element. The shape and size of the virtual frame can be determined according to the shape and size of the target page element; alternatively, the system may default the shape of the virtual frame to a fixed shape, such as a rectangle, which may be determined according to actual conditions.

Optionally, in this embodiment, the step "in response to a query operation for a target page element in the target page, displaying attribute information of the target page element and an area identifier of the target page element on the target page" may include:

and responding to query operation aiming at a target page element in the target page, and displaying the attribute information of the target page element and the area identification of the target page element on the target page based on page development data of the target page.

The page development data of the target page may include related information of each page element designed in the target page.

The target page can be developed and realized based on javascript or flutter language. Flutter is developed using Dart language, which can be compiled into native code of different platforms, allowing Flutter to communicate directly with the platform without an intermediate bridging process, thereby improving performance. Dart is a client-optimized programming language that builds fast applications for a full platform, and is an object-oriented, class-defined, single-inheritance language.

Specifically, a monitoring event may be set for a page element in the target page, specifically, each page element in the target page may be bound to a preset operation, when a query operation on the target page element in the target page is detected, page development data of the target page may be pulled, where the page development data includes page development design information for the target page, such as attribute information of each page element in the target page, the page development data of the target page, specifically, related information of the target page element in the page development data, and according to the related information of the target page element, the attribute information and the area identifier of the target page element are displayed on the target page.

in response to a query operation for a target page element in the target page, displaying an attribute information list and a region identifier of the target page element on the target page, wherein the attribute information list comprises at least one attribute information of the target page element.

Optionally, the attribute information list may be specifically displayed on the target page in a form of a child window. Alternatively, the attribute information list may display only the attribute information of a part of the target page elements, and the user may view the attribute information of the other part by a sliding operation on the attribute information list.

In some embodiments, the attribute information list may further include an attribute hiding control, and the user may retract the attribute information list, that is, hide the attribute information list, based on a trigger operation on the attribute hiding control, so that the attribute information of the target page element is not displayed in the target page, and only the area identifier of the target page element is displayed, so that the target page is neater.

Optionally, in this embodiment, the target page further includes a virtual boundary line of the target page element relative to the target page, where the virtual boundary line indicates position information and a size of the target page element in the target page.

As shown in fig. 1c, the target page element is a corresponding rectangular icon of the second (from top to bottom and from left to right) vaccine reservation, and the virtual boundary line thereof may be specifically four dotted lines in fig. 1c, wherein the distance between two horizontal lines may be regarded as the height of the target page element, and the distance between two vertical lines may be regarded as the width of the target page element.

In some embodiments, the target page may further include a hidden control corresponding to the virtual boundary line, and the user may hide the virtual boundary line based on a trigger operation on the hidden control corresponding to the virtual boundary line, that is, the virtual boundary line corresponding to the target page element is not displayed in the target page, so that the target page is cleaner and tidier.

and in response to a query operation aiming at a target page element in the target page, displaying relative position information between the target page element and a reference page element on the target page, wherein the reference page element is any page element except the target page element in the page elements of the target page.

When the query operation on the target page element in the target page is detected if the reference page element exists in the target page, the relative position information between the target page element and the reference page element can be displayed on the target page.

determining a page element as a reference page element in response to a reference element selection operation for the page element in the target page.

The reference page element may be determined according to a reference element selection operation on the page element.

It should be noted that, for the same client, the reference element selection operation and the query operation are different types of operations. For example, at the computer end, if the reference page selection operation is a single-click operation, the query operation may not be set as a single-click operation, and the query operation may be any operation other than the single-click operation, such as a sliding operation. On the mobile phone side, if the reference page selection operation is a long-press operation, the query operation cannot be set as the long-press operation, and the query operation can be any other operation except the long-press operation, such as a single-click operation. If the reference page selection operation of the computer end is set as the click operation, the query operation of the mobile phone end can also be set as the click operation, and different client sides are not conflicted with each other.

In this embodiment, when a reference element selection operation for a page element in a target page is detected, attribute information and an area identifier of the reference page element may also be displayed in the target page. In some embodiments, the attribute information of the area identifier of the reference page element and the area identifier of the target page element may be different, for example, the area identifier of the reference page element may be a red frame, and the area identifier of the target page element may be set to a blue frame.

Optionally, in this embodiment, the relative position information includes a relative position relationship and distance information, and the distance information is determined according to the relative position relationship between the target page element and the reference page element.

In a specific scenario, a reference page element, that is, a first (in the order from top to bottom and from left to right) "nucleic acid detection" exists in the target page shown in fig. 1c, and a query operation is performed on a rectangular icon corresponding to a second (in the order from top to bottom and from left to right) "vaccine reservation" in the target page, that is, a rectangular icon corresponding to the second (in the order from top to bottom and from left to right) vaccine reservation is used as the target page element, so that region identifiers of the reference page element and the target page element can be displayed in the target page, and attribute information of the target page element is displayed through an attribute information list, such as a width, a height, a background color, and the like of the rectangular icon corresponding to the second (in the order from top to bottom and from left to right) vaccine reservation. In addition, relative position information between the target page element and the reference page element, specifically, the distance size (21.1px and 25.22px) and the distance line therebetween, may also be displayed. Where px represents the size of one pixel.

In this embodiment, the relative position relationship between the target page element and the reference page element may be specifically divided into two cases, that is, the target page element and the reference page element are in a position inclusion relationship, or the target page element and the reference page element are in a non-position inclusion relationship.

The target page element and the reference page element are in a position-containing relationship, and may include: the target page element contains the reference page element (and the target page element is outside the reference page element), or the reference page element contains the target page element (i.e., the target page element is inside the reference page element).

The target page element and the reference page element are in a non-position inclusion relationship, and may include: the target page element is positioned at the upper left corner, the upper right corner, the lower left corner, the lower right corner, the upper edge, the lower edge, the left edge, the right edge and the like of the reference page element.

In this embodiment, the distance information between the target page element and the reference page element may include a magnitude of a distance therebetween, and may further include a distance line representing the distance therebetween.

Specifically, the distance information between the target page element and the reference page element may be determined according to the relative positional relationship therebetween.

comparing the position information of the target page element with the position information of the reference page element to obtain a relative position relationship between the target page element and the reference page element;

and determining the distance information between the target page element and the reference page element according to the relative position relationship.

Specifically, the position information of the target page element may include specific positions of the top, bottom, left, and right sides of the target page element in the target page, and the position information of the reference page element may include specific positions of the top, bottom, left, and right sides of the reference page element in the target page; in this embodiment, the values corresponding to the upper side, the lower side, the left side and the right side of the target page element and the reference page element may be compared to determine the relative position relationship between the target page element and the reference page element, so as to obtain the distance information between the target page element and the reference page element.

For example, the relative position relationship between the target page element and the reference page element can be determined according to the position information of the two elements, i.e. whether the two elements are in the position containing relationship is judged. If the target page element and the reference page element are in a position inclusion relationship, determining distance information between the target page element and the reference page element according to the position inclusion relationship, the position information of the target page element and the position information of the reference page element; if the target page element and the reference page element are in the non-position inclusion relationship, the distance information between the target page element and the reference page element can be determined according to the non-position inclusion relationship, the position information of the target page element and the position information of the reference page element.

In a specific embodiment, referring to fig. 1d, a method for determining distance information between a target page element and a reference page element is provided, where a virtual frame corresponding to the target page element and the reference page element is assumed to be a rectangle, an upper left corner of a target page is taken as an origin, an upper side is taken as an x-axis forward direction, a left side is taken as a y-axis forward direction, the reference page element is denoted as a, and the target page element is denoted as b; the specific description is as follows:

when the value of the x-axis corresponding to the left edge line of the target page element is greater than the value of the x-axis corresponding to the right edge line of the reference page element, the distance line between the reference page element and the target page element may be to the right of the reference page element, as shown in fig. 1.1 of fig. 1 e; alternatively, when the value of the x-axis corresponding to the right edge line of the target page element is greater than the value of the x-axis corresponding to the right edge line of the reference page element and the value of the x-axis corresponding to the left edge line of the target page element is not greater than the value of the x-axis corresponding to the left edge line of the reference page element, the distance line between the reference page element and the target page element may be to the right of the reference page element, as shown in fig. 1.2 of fig. 1 e.

When the value of the y-axis corresponding to the top edge line of the target page element is greater than the value of the y-axis corresponding to the bottom edge line of the reference page element, the distance line between the reference page element and the target page element may be at the bottom of the reference page element, as shown in fig. 1e, 2.1; alternatively, when the value of the y-axis corresponding to the bottom edge line of the target page element is greater than the value of the y-axis corresponding to the bottom edge line of the reference page element, and the value of the y-axis corresponding to the top edge line of the target page element is not greater than the value of the y-axis corresponding to the top edge line of the reference page element, the distance line between the reference page element and the target page element may be at the bottom of the reference page element, as shown in fig. 1e, 2.2.

When the value of the x-axis corresponding to the right edge line of the target page element is less than the value of the x-axis corresponding to the left edge line of the reference page element, the distance line between the reference page element and the target page element may be to the left of the reference page element, as shown in fig. 1e, 3.1; alternatively, when the value of the x-axis corresponding to the left edge line of the target page element is less than the value of the x-axis corresponding to the left edge line of the reference page element, and the value of the x-axis corresponding to the right edge line of the target page element is not less than the value of the x-axis corresponding to the right edge line of the reference page element, the distance line between the reference page element and the target page element may be on the left side of the reference page element, as shown in fig. 3.2 of fig. 1 e.

When the value of the y-axis corresponding to the bottom edge line of the target page element is smaller than the value of the y-axis corresponding to the top edge line of the reference page element, the distance line between the reference page element and the target page element may be at the top of the reference page element, as shown in fig. 1e, 4.1; alternatively, when the value of the y-axis corresponding to the top edge line of the target page element is smaller than the value of the y-axis corresponding to the top edge line of the reference page element, and the value of the y-axis corresponding to the bottom edge line of the target page element is not smaller than the value of the y-axis corresponding to the top edge line of the reference page element, the distance line between the reference page element and the target page element may be at the top of the reference page element, as shown in fig. 1e, 4.2.

When the value of the y-axis corresponding to the top edge line of the target page element is greater than the value of the y-axis corresponding to the top edge line of the reference page element, and the value of the y-axis corresponding to the bottom edge line of the target page element is not greater than the value of the y-axis corresponding to the bottom edge line of the reference page element, the distance line between the reference page element and the target page element may be at the top of the target page element, as shown in fig. 1e, 5.1.

When the value of the y-axis corresponding to the bottom edge line of the target page element is less than the value of the y-axis corresponding to the bottom edge line of the reference page element, and the value of the y-axis corresponding to the top edge line of the target page element is not less than the value of the y-axis corresponding to the top edge line of the reference page element, the distance line between the reference page element and the target page element may be at the bottom of the target page element, as shown in fig. 1e, 5.1.

When the value of the x-axis corresponding to the left edge line of the target page element is greater than the value of the x-axis corresponding to the left edge line of the reference page element and the value of the x-axis corresponding to the right edge line of the target page element is not greater than the value of the x-axis corresponding to the right edge line of the reference page element, the distance line between the reference page element and the target page element may be to the left of the target page element, as shown in fig. 1e, 6.1.

When the value of the x-axis corresponding to the right edge line of the target page element is less than the value of the x-axis corresponding to the right edge line of the reference page element and the value of the x-axis corresponding to the left edge line of the target page element is not less than the value of the x-axis corresponding to the left edge line of the reference page element, the distance line between the reference page element and the target page element may be on the right side of the target page element, as shown in fig. 1e, 6.1.

Wherein, according to the above logic, distance lines between different positions of the target page element and the reference page element can be rendered. The length of the distance line is the magnitude of the distance value between the target page element and the reference page element.

Referring to fig. 1f, the information of the distance between the target page element and the reference page element is shown, which is described as follows:

as shown in (a) of fig. 1f, if the reference page element is the text information "existing diagnosis", the target page element is the text information "yesterday + 0", and the target page element is at the upper left corner of the reference page element, a distance line between the left edge line of the reference page element and the right edge line of the target page element and a distance line between the top edge line of the reference page element and the bottom edge line of the target page element can be rendered, and the lengths of the two distance lines are shown as 75.69px and 28.41 px.

As shown in (b) of fig. 1f, if the reference page element is the text information "existing diagnosis", the target page element is the text information "yesterday + 1", and the target page element is at the upper right corner of the reference page element, a distance line between the right edge line of the reference page element and the left edge line of the target page element and a distance line between the top edge line of the reference page element and the bottom edge line of the target page element can be rendered, and the lengths of the two distance lines are displayed to be 75.7px and 28.41px, respectively.

As shown in fig. 1f (c), if the reference page element is the text message "existing diagnosis", the target page element is the digital message "313", and the target page element is at the lower left corner of the reference page element, a distance line between the left edge line of the reference page element and the right edge line of the target page element and a distance line between the bottom edge line of the reference page element and the top edge line of the target page element can be rendered, and the lengths of the two distance lines are respectively 78.17px and 48.31 px.

As shown in (d) of fig. 1f, if the reference page element is the text message "existing diagnosis", the target page element is the digital message "4645", and the target page element is at the lower right corner of the reference page element, a distance line between the right edge line of the reference page element and the left edge line of the target page element and a distance line between the bottom edge line of the reference page element and the top edge line of the target page element can be rendered, and the lengths of the two distance lines are respectively 72.05px and 48.31 px.

As shown in (e) of fig. 1f, if the reference page element is the text information "existing diagnosis", the target page element is the text information "yesterday + 265", the target page element is on the upper side of the reference page element, and the long side of the reference page element is shorter than the long side of the target page element, then a distance line between the left edge line of the reference page element and the left edge line of the target page element, a distance line between the right edge line of the reference page element and the right edge line of the target page element, and a distance line between the top edge line of the reference page element and the bottom edge line of the target page element can be rendered, and the lengths of the three distance lines are displayed, 3.97px, 3.98px, and 28.41px, respectively. As can be seen by the length of the distance line between the left edge line of the reference page element and the left edge line of the target page element, and the distance line between the right edge line of the reference page element and the right edge line of the target page element (3.97 px, 3.98px, respectively): the centerlines of the reference page element and the target page element are not coincident.

As shown in (f) of fig. 1f, if the reference page element is the text message "existing diagnosis", the target page element is the digital message "5748", the target page element is below the reference page element, and the long side of the reference page element is shorter than the long side of the target page element, a distance line between the left edge line of the reference page element and the left edge line of the target page element, a distance line between the right edge line of the reference page element and the right edge line of the target page element, and a distance line between the bottom edge line of the reference page element and the top edge line of the target page element can be rendered, and the lengths of the three distance lines are respectively 0.27px, and 48.31 px. As can be seen by the lengths of the distance line between the left edge line of the reference page element and the left edge line of the target page element, and the distance line between the right edge line of the reference page element and the right edge line of the target page element (both 0.27 px): the centerlines of the reference page element and the target page element coincide.

As shown in (g) of fig. 1f, if the reference page element is the text message "existing confirmed diagnosis", the target page element is the text message "local existing confirmed diagnosis", and the target page element is on the left side of the reference page element, a distance line between the left edge line of the reference page element and the right edge line of the target page element may be rendered, and the length of the distance line is displayed as 60.17 px.

As shown in (h) of fig. 1f, if the reference page element is the text message "existing diagnosis", the target page element is the text message "accumulated diagnosis", and the target page element is on the right side of the reference page element, a distance line between the right edge line of the reference page element and the left edge line of the target page element can be rendered, and the length of the distance line is displayed as 72.31 px.

As shown in fig. 1f, (i) the reference page element is the text message "existing diagnosis", the target page element is the second box (in order from left to right and from top to bottom), the target page element includes the reference page element, the distance line between the left edge line of the reference page element and the left edge line of the target page element, the distance line between the right edge line of the reference page element and the right edge line of the target page element, the distance line between the top edge line of the reference page element and the top edge line of the target page element, and the distance line between the bottom edge line of the reference page element and the bottom edge line of the target page element can be rendered, and the lengths of the four distance lines are displayed, which are 35.88px, 35.89px, 58.08px, and 14.23 px.

As shown in (j) of fig. 1f, if the target page element is the text message "existing diagnosis", the reference page element is the second box (in order from left to right and from top to bottom), and the reference page element includes the target page element, the distance line between the left edge line of the reference page element and the left edge line of the target page element, the distance line between the right edge line of the reference page element and the right edge line of the target page element, the distance line between the top edge line of the reference page element and the top edge line of the target page element, and the distance line between the bottom edge line of the reference page element and the bottom edge line of the target page element can be rendered, and the lengths of the four distance lines are displayed, which are 35.88px, 35.89px, 58.08px, and 14.23 px.

It should be noted that the distance information between the target page element and the reference page element may also be determined in other manners.

The method for querying page elements in this embodiment may be applied to distance measurement and style inspection of page elements on a computer side and a mobile side, and is described in detail with reference to fig. 1g as follows:

in the mobile phone terminal, when a query operation (specifically, a click operation) for a target page element in a target page is detected, the target page element can be selected, and key style information of the target page element is displayed, and if a reference page element exists in the target page, a distance between the target page element and the reference page element and key style information of the target page element and the reference page element can be displayed on the target page. When a reference element selection operation (specifically, a long-press operation) for a page element in the target page is detected, the page element may be determined as a reference page element, and key style information of the reference page element may be displayed.

In the computer terminal, when a query operation (specifically, a mouse sliding operation) for a target page element in a target page is detected, the target page element may be selected, and key style information of the target page element is displayed, and if a reference page element exists in the target page, a distance between the target page element and the reference page element and key style information of the target page element and the reference page element may be displayed on the target page. When a reference element selection operation (specifically, a single click operation) for a page element in the target page is detected, the page element may be determined as a reference page element, and key style information of the reference page element is displayed.

As shown in fig. 1h, an application scenario of the page element query method is shown, where each page element in the target page may be bound to a preset listening event. For example, in a mobile phone terminal, a single-click event and a long-press event may be bound to a page element, the single-click event may be a query operation on the page element, and the long-press event may be a reference element selection operation on the page element; in the computer terminal, a single-click event and a sliding event can be bound to a page element, the single-click event can be a reference element selection operation of the page element, and the sliding event can be a query operation of the page element.

The page element query method provided by the application can acquire the relevant information of the page elements operated in the event object by monitoring events such as webpage clicking or long-time pressing, and the distance between the page elements and the attribute information of the page elements are calculated through the code script, so that more accurate measurement and viewing effects are achieved. Specifically, after the target page is loaded with the page element query program, whether the terminal where the target page is located is a mobile phone terminal or a computer terminal can be judged, and different monitoring events are set for the page elements in the target page according to different terminals. Then, judging according to user operation, when a user operates a page element in a target page, triggering an event, calling back a return event object (namely the operated page element) according to the event, and judging whether the selected element is a reference page element; if the user operation is a query operation, the selected element is not a reference page element; and if the user operation is a reference element selection operation, the selected element is a reference page element.

After the relevant information of the selected page element is obtained, if the page element is referred to, the previous operation information can be removed (for example, the reference page element corresponding to the previous reference element selection operation is removed), and a virtual frame is created according to the width and height of the reference page element and the position information, and the virtual frame can be set to be red; if the page element is not the reference page element, a virtual frame is created according to the width, height and position information of the selected page element, and the virtual frame can be set to be blue. In addition, when the non-reference page element is selected, if the reference page element exists, the values of the reference page element and the values corresponding to the upper, lower, left and right sides of the page element can be obtained and compared, and the distance between the two page elements in the upper, lower, left and right directions is rendered and displayed according to the position information of the reference page element and the non-reference page element. And whether the reference page element or the non-reference page element is selected, finally acquiring the key style information of the selected page element and displaying the key style information on the target page.

Optionally, if the selected page element is not the reference page element, a virtual boundary line of the selected page element relative to the target page may be created according to the width and height information of the target page.

In a specific scenario, based on the page element query method provided by the present application, a query operation, such as a click operation, may be performed on a target page element in a target page, a size structure of the target page element may be displayed by a virtual frame (specifically, a blue virtual frame), and attribute information of the target page element is displayed, as shown in fig. 1i, where the text information: the second (in the order from top to bottom and from left to right) "vaccine appointment" is the target page element; when a reference element selection operation is performed on a certain page element in the target page, for example, a long-press operation is performed, the page element is selected as a reference page element, the size structure of the reference page element may be displayed by a virtual frame (specifically, a red virtual frame), and attribute information of the reference page element is displayed, as shown in fig. 1j, where the text information: the second (in top-down, left-to-right order) "vaccine appointment" is selected as the reference page element. In this embodiment, a certain page element may be selected as a reference page element (for example, a text message: the second (from top to bottom, left to right in order) "vaccine reservation" is selected as the reference page element), and then another page element may be selected by randomly clicking (for example, a rectangular icon corresponding to the second (from top to bottom, left to right in order) "nucleic acid detection"), so that the distance between the two page elements is displayed, as shown in fig. 1 k.

As can be seen from the above, the present embodiment may show a target page, where the target page includes at least one page element, and the target page is a functional page for an object to query page element information; in response to a query operation for a target page element in the target page, displaying attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information includes key style information of the target page element, the region identifier includes an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page. According to the page element information query method and device, the function page for querying the related information of the page elements can be provided, the related information of the page elements can be checked by operating the page elements in the page, and the efficiency and accuracy of the page element information query are improved.

According to the method described in the foregoing embodiment, the page element query device is specifically integrated in the terminal as described in further detail below.

An embodiment of the present application provides a page element query method, and as shown in fig. 2a, a specific process of the page element query method may be as follows:

201. the method comprises the steps that a terminal displays a target page of a client, the target page comprises at least one page element, and the target page is a function page for an object to inquire page element information.

The target page is specifically a page showing content information in the client, and at least one page element of the target page may be a text, an image, or graphics and text information obtained by combining the text and the image.

In this embodiment, the target page is a functional page for the object to query the page element information, and the user may query the relevant information of a certain page element in the target page by operating the page element.

loading a page element query program of the client to display an element query control on an initial target page of the client;

By loading the page element query program, an initial target page without the function of querying the page element information in the client can be converted into a functional page with the function of querying the page element information, namely a target page.

In some embodiments, when the page element information query function for the initial target page is started, the target page is presented, as shown in fig. 2b, an automatic view control may be included on the target page, and an icon corresponding to "autolook" in fig. 2b is the automatic view control. When the user triggers the automatic viewing control, for example, after clicking the automatic viewing control, other types of floating function controls may be displayed on the target page, which may include opening a measurement control, a manuscript viewing control, an automatic comparison control, a sharing control, and the like, as shown in fig. 2 c. It should be noted that, the user may hide other types of floating function controls by triggering the automatic view control again, that is, restore the floating function controls to the target page shown in fig. 2 b.

When the user triggers to open the measurement control, the page element information query function of the target page may be started, for example, attribute information such as the size of the page element may be queried, and meanwhile, after triggering to open the measurement control, the open measurement control may be changed to close the measurement control, as shown in fig. 2 d. Optionally, if the user clicks the measurement closing control, the page element information query function of the target page may be closed, and the measurement closing control is changed to the measurement opening control.

Optionally, when the user clicks on the open measurement control, a layout boundary control and a key style control may be presented on the target page, as shown in fig. 2 d. If the user triggers to start the layout boundary control, the area identifier of each page element in the target page may be displayed, as shown in fig. 2e, when the user closes the layout boundary control, the area identifier of each page element is not displayed on the target page.

Optionally, in some embodiments, when the user triggers the key style control, other hover function controls may be hidden, and a key style query function for a page element of the target page may be initiated. After the user clicks the key style control, the user can display the attribute information and the area identification of the page element corresponding to the triggering operation on the target page through the triggering operation on any page element in the target page. As shown in fig. 2f, after triggering the start of the key style control, when the user clicks the text page element in the target page: the second (in top-down, left-to-right order) "vaccine appointment", the textual information may be presented: the second (in order from top to bottom and from left to right) "vaccine appointment" corresponds to the attribute information, the zone identifier, and may also show its virtual border line with respect to the target page. In other embodiments, after triggering the start of the key style control, the user may further perform reference element selection operation on a page element in the target page to determine the reference page element, and then perform query operation on other page elements in the target page, so as to display attribute information, an area identifier, and relative position information between the page element and the reference page element, and the like, of the page element on the target page.

202. The terminal responds to query operation aiming at a target page element in the target page, and displays attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information comprises key style information of the target page element, the region identifier comprises an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page.

As can be seen from the above, in this embodiment, a target page of a client may be displayed through a terminal, where the target page includes at least one page element, and the target page is a functional page for an object to query page element information. The terminal responds to query operation aiming at a target page element in the target page, and displays attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information comprises key style information of the target page element, the region identifier comprises an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page. According to the page element information query method and device, the function page for querying the related information of the page elements can be provided, the related information of the page elements can be checked by operating the page elements in the page, and the efficiency and accuracy of the page element information query are improved.

In order to better implement the above method, an embodiment of the present application further provides a page element query apparatus, as shown in fig. 3, the page element query apparatus may include a first presentation unit 301 and a second presentation unit 302, as follows:

(1) a first presentation unit 301;

the first display unit is used for displaying a target page, the target page comprises at least one page element, and the target page is a functional page for an object to inquire page element information.

(2) A second presentation unit 302;

As can be seen from the above, in this embodiment, a target page may be displayed by the first display unit 301, where the target page includes at least one page element, and the target page is a function page for an object to query page element information; responding to a query operation for a target page element in the target page through a second display unit 302, and displaying attribute information of the target page element and a region identifier of the target page element on the target page, where the attribute information includes key style information of the target page element, the region identifier includes an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page. According to the page element information query method and device, the function page for querying the related information of the page elements can be provided, the related information of the page elements can be checked by operating the page elements in the page, and the efficiency and accuracy of the page element information query are improved.

An electronic device according to an embodiment of the present application is further provided, as shown in fig. 4, which shows a schematic structural diagram of the electronic device according to the embodiment of the present application, where the electronic device may be a terminal or a server, and specifically:

the electronic device may include components such as a processor 401 of one or more processing cores, memory 402 of one or more computer-readable storage media, a power supply 403, and an input unit 404. Those skilled in the art will appreciate that the electronic device configuration shown in fig. 4 does not constitute a limitation of the electronic device and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components. Wherein:

the processor 401 is a control center of the electronic device, connects various parts of the whole electronic device by various interfaces and lines, performs various functions of the electronic device and processes data by running or executing software programs and/or modules stored in the memory 402 and calling data stored in the memory 402, thereby performing overall monitoring of the electronic device. Optionally, processor 401 may include one or more processing cores; preferably, the processor 401 may integrate an application processor, which mainly handles operating systems, user interfaces, application programs, etc., and a modem processor, which mainly handles wireless communications. It will be appreciated that the modem processor described above may not be integrated into the processor 401.

The memory 402 may be used to store software programs and modules, and the processor 401 executes various functional applications and data processing by operating the software programs and modules stored in the memory 402. The memory 402 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application program required by at least one function (such as a sound playing function, an image playing function, etc.), and the like; the storage data area may store data created according to use of the electronic device, and the like. Further, the memory 402 may include high speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device. Accordingly, the memory 402 may also include a memory controller to provide the processor 401 access to the memory 402.

The electronic device further comprises a power supply 403 for supplying power to the various components, and preferably, the power supply 403 is logically connected to the processor 401 through a power management system, so that functions of managing charging, discharging, and power consumption are realized through the power management system. The power supply 403 may also include any component of one or more dc or ac power sources, recharging systems, power failure detection circuitry, power converters or inverters, power status indicators, and the like.

The electronic device may further include an input unit 404, and the input unit 404 may be used to receive input numeric or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.

Although not shown, the electronic device may further include a display unit and the like, which are not described in detail herein. Specifically, in this embodiment, the processor 401 in the electronic device loads the executable file corresponding to the process of one or more application programs into the memory 402 according to the following instructions, and the processor 401 runs the application program stored in the memory 402, thereby implementing various functions as follows:

displaying a target page, wherein the target page comprises at least one page element, and the target page is a functional page for an object to inquire page element information; in response to a query operation for a target page element in the target page, displaying attribute information of the target page element and a region identifier of the target page element on the target page, wherein the attribute information includes key style information of the target page element, the region identifier includes an identifier of a position region where the target page element is located in the target page, and the target page element is any page element in the page elements of the target page.

The above operations can be implemented in the foregoing embodiments, and are not described in detail herein.

It will be understood by those skilled in the art that all or part of the steps of the methods of the above embodiments may be performed by instructions or by associated hardware controlled by the instructions, which may be stored in a computer readable storage medium and loaded and executed by a processor.

To this end, embodiments of the present application provide a computer-readable storage medium, in which a plurality of instructions are stored, where the instructions can be loaded by a processor to execute the steps in any one of the page element query methods provided in the embodiments of the present application. For example, the instructions may perform the steps of:

Wherein the computer-readable storage medium may include: read Only Memory (ROM), Random Access Memory (RAM), magnetic or optical disks, and the like.

Since the instructions stored in the computer-readable storage medium can execute the steps in any page element query method provided in the embodiments of the present application, beneficial effects that can be achieved by any page element query method provided in the embodiments of the present application can be achieved, for details, see the foregoing embodiments, and are not described herein again.

According to an aspect of the application, a computer program product or computer program is provided, comprising computer instructions, the computer instructions being stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to cause the computer device to perform the method provided in the various alternative implementations of the page element query aspect described above.

The page element query method, the page element query device, the electronic device and the storage medium provided by the embodiment of the application are introduced in detail, a specific example is applied in the description to explain the principle and the implementation of the application, and the description of the embodiment is only used for helping to understand the method and the core idea of the application; meanwhile, for those skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.

Claims

1. A method for querying page elements is characterized by comprising the following steps:

2. The method of claim 1, wherein the presenting the attribute information of the target page element and the area identifier of the target page element on the target page in response to the query operation for the target page element in the target page comprises:

3. The method of claim 1, further comprising:

4. The method of claim 3, further comprising:

5. The method according to claim 3, characterized in that the relative position information comprises a relative position relationship and distance information, the distance information being determined from the relative position relationship between the target page element and the reference page element.

6. The method of claim 5, further comprising:

7. The method of claim 1, wherein the target page further comprises a virtual borderline of the target page element relative to the target page, the virtual borderline indicating position information and size dimensions of the target page element in the target page.

8. The method of claim 1, wherein the presenting the attribute information of the target page element and the area identifier of the target page element on the target page in response to the query operation for the target page element in the target page comprises:

9. The method of claim 1, further comprising:

10. The method of claim 1, wherein the target page further comprises a contribution viewing control; the method further comprises the following steps:

11. A page element querying device, comprising:

12. An electronic device comprising a memory and a processor; the memory stores an application program, and the processor is configured to execute the application program in the memory to perform the operations of the page element query method according to any one of claims 1 to 10.

13. A computer-readable storage medium storing instructions adapted to be loaded by a processor to perform the steps of the page element query method according to any one of claims 1 to 10.