CN113378086B - Method and device for controlling page movement based on focus position movement - Google Patents
Method and device for controlling page movement based on focus position movement Download PDFInfo
- Publication number
- CN113378086B CN113378086B CN202110632425.4A CN202110632425A CN113378086B CN 113378086 B CN113378086 B CN 113378086B CN 202110632425 A CN202110632425 A CN 202110632425A CN 113378086 B CN113378086 B CN 113378086B
- Authority
- CN
- China
- Prior art keywords
- node
- focus
- distance
- fixed
- rolling
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the application provides a method and a device for controlling page movement based on focus position movement, wherein the method comprises the following steps: objects in a page and methods of processing the objects are defined based on the DOM tree. And when the current focus area is moved, whether the current focus area is out of the range of the focus node or not is judged according to the position of the focus node where the current focus area is located. And if the focus node of the current focus area is out of the range of the focus node, moving the rolling node to enable the focus node of the current focus area to return to the range of the focus node. The effect of controlling the page movement based on the movement of the focus node is achieved. In addition, the DOM tree can be used by any language, so that the dependence on the browser can be reduced while the movement of elements in the page and the movement of the whole page can be controlled.
Description
Technical Field
The present application relates to the field of web page technologies, and in particular, to a method and an apparatus for controlling a page movement based on a focus position movement.
Background
With the development of intelligent terminals, browsers are essential software of the intelligent terminals. Browsers have also evolved as one of the primary channels for users to obtain information. When the user uses the browser application, the user can use the keys on the remote controller (or in a touch manner) to move the page up and down or left and right.
The intelligent terminal relies on the browser to control the page when responding to the user instruction and moving the page.
However, at present, browsers installable by an intelligent terminal are applied in various ways, an intelligent terminal system faces different browser standards, and the traditional page technology is often difficult to be compatible one by one. In addition, when the browser is used for controlling the page, the effect cannot be customized for displaying the page movement, and the user experience is poor.
Disclosure of Invention
The method aims to solve the problems that the applications of browsers which can be installed by an intelligent terminal are various, an intelligent terminal system faces different browser standards, and the traditional page technology is difficult to be compatible one by one. In addition, when the browser is used for controlling the page, the display effect of the page movement cannot be customized, and the user experience is poor.
In a first aspect, a method for controlling page movement based on focus position movement is provided, including:
constructing a fixed node, a rolling node and a focus node of a page based on a DOM tree, wherein the fixed node is set to be positioned absolutely relative to a screen, the rolling node is set to be positioned relatively relative to the fixed node, the focus node is set to be positioned absolutely relative to the rolling node, the fixed node, the rolling node and the focus node are all provided with fixed height and width, the focus node divides the rolling node into at least two areas, and the focus node which is separated from the range of the fixed node is in a hidden invisible state;
controlling the current focus area to move between the focus nodes in response to an input instruction for switching the current focus area;
when a first distance is greater than a second distance, moving the rolling node to enable the first distance to be smaller than or equal to the second distance, wherein the first distance is the distance from a first side edge of the focus node where the current focus area is located to a second side edge of the fixed node, the second distance is the length of a side edge of the fixed node parallel to the moving direction of the current focus area, the first side edge is the side edge which is firstly separated from the fixed node in the moving direction of the current focus area, and the second side edge is the side edge of the fixed node far away from the first side edge;
not moving the rolling node when the first distance is less than or equal to the second distance.
In a second aspect, an apparatus is provided, comprising:
a DOM tree building module configured to: constructing a fixed node, a rolling node and a focus node of a page based on a DOM tree, wherein the fixed node is set to be absolutely positioned relative to a screen, the rolling node is set to be relatively positioned relative to the fixed node, the focus node is set to be absolutely positioned relative to the rolling node, the fixed node, the rolling node and the focus node are all provided with fixed height and width, the focus node divides the rolling node into at least two areas, and the focus node which is separated from the range of the fixed node is in a hidden invisible state;
a focal region moving module configured to: controlling the current focus area to move among the focus nodes in response to an input instruction for switching the current focus area;
a rolling node movement module configured to: when the first distance is greater than the second distance, moving the rolling node to enable the first distance to be smaller than or equal to the second distance, wherein the first distance is the distance from a first side edge of the focus node where the current focus area is located to a second side edge of the fixed node, the second distance is the length of a side edge of the fixed node parallel to the moving direction of the current focus area, the first side edge is the side edge which is firstly separated from the fixed node range in the moving direction of the current focus area, and the second side edge is the side edge of the fixed node far away from the first side edge;
not moving the rolling node when the first distance is less than or equal to the second distance.
The technical scheme provided by the application comprises the following beneficial effects: each object in the page and a method of processing the object are defined based on the DOM tree. And when the current focus area is moved, whether the current focus area is out of the range of the focus node or not is judged according to the position of the focus node where the current focus area is located. And if the focus node where the current focus area is located is out of the range of the focus node, moving the rolling node so as to enable the focus node where the current focus area is located to return to the range of the focus node. The effect of controlling the page movement based on the movement of the focus node is achieved. In addition, the DOM tree can be used by any language, so that the control on the movement of elements in the page and the movement of the whole page can be realized, and meanwhile, the dependence on the browser is reduced.
Drawings
In order to more clearly describe the technical solution of the present application, the drawings required to be used in the embodiments will be briefly described below, and it is obvious for those skilled in the art to obtain other drawings without inventive labor.
FIG. 1 is a schematic diagram illustrating a hierarchical page structure of a method for controlling a page movement based on a focus position movement according to an embodiment of the present application;
FIG. 2 is a flowchart illustrating a method for controlling page movement based on focus position movement according to an embodiment of the present disclosure;
FIG. 3 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
FIG. 4 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
FIG. 5 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
FIG. 6 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
FIG. 7 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
FIG. 8 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
FIG. 9 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
FIG. 10 is a schematic diagram illustrating a further hierarchical page structure of a method for controlling page movement based on focus position movement according to an embodiment of the present application;
fig. 11 is a frame diagram of an apparatus for controlling page movement based on focus position movement according to an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present invention will be described clearly and completely with reference to the accompanying drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, 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 invention.
Reference throughout this specification to "embodiments," "some embodiments," "one embodiment," or "an embodiment," etc., means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment. Thus, appearances of the phrases "in various embodiments," "in some embodiments," "in at least one other embodiment," or "in an embodiment" or the like throughout this specification are not necessarily all referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. Thus, the particular features, structures, or characteristics illustrated or described in connection with one embodiment may be combined, in whole or in part, with the features, structures, or characteristics of one or more other embodiments, without limitation. Such modifications and variations are intended to be included within the scope of the present application.
When the user uses the browser application, the user can move the page up and down or left and right by using keys (or in a touch manner) on the remote controller. The intelligent terminal relies on the browser to control the page when responding to the user instruction and moving the page.
However, at present, browsers installable by an intelligent terminal are applied in various ways, an intelligent terminal system faces different browser standards, and the traditional page technology is often difficult to be compatible one by one. In addition, when the browser is used for controlling the page, the display effect of the page movement cannot be customized, and the user experience is poor.
In order to solve the above problems, the present application provides a method of controlling a page movement based on a focus position movement, which defines a series of standard objects for a web page based on a DOM tree, and a standard method of accessing and processing a document of the web page. Meanwhile, the DOM tree can be used by any language, such as JS (Javascript) language. Therefore, the movement of the elements in the page and the movement of the whole page are controlled, and the dependence on the browser is reduced. In addition, various languages can be used for calling the document method to change the state corresponding to the DOM, so that the display state of the page can be changed. Therefore, the user-defined page moving display effect is achieved, and the user experience is improved.
The method of the embodiment of the application builds each element of the page based on the DOM tree. A fixed NODE DOM _ ROOT _ NODE is first created, which is absolutely positioned with respect to the display screen position, that is, fixed with respect to the display screen position. A SCROLL NODE DOM _ SCROLL _ NODE is then created within the fixed NODE DOM _ ROOT _ NODE. The SCROLL NODE DOM _ SCROLL _ NODE is used for showing the whole page background, and is relatively positioned relative to the fixed NODE DOM _ ROOT _ NODE. That is to say the position of the rolling node relative to the fixed node is changeable. Finally, a FOCUS NODE DOM _ FOCUS _ NODE is created within the rolling NODE fixed NODE DOM _ ROOT _ NODE. The FOCUS NODE DOM _ FOCUS _ NODE is absolutely positioned with respect to the SCROLL NODE DOM _ SCROLL _ NODE, i.e. the FOCUS NODE is fixed with respect to the SCROLL NODE position.
It should be noted that, the embodiment of the present application is constructed with a fixed node, a rolling node and at least two focus nodes, where the at least two focus nodes divide the rolling node into at least two regions (excluding a blank region). The focus node state out of the fixed node range is hidden from view.
Based on the DOM tree, the hierarchical page embodiment shown in fig. 1 can be implemented, where 9 focus nodes are placed in a scroll node (any number of focus nodes can be set according to actual conditions), and the scroll node is a displayed page, that is, the displayed page is divided into 9 regions. The current focus area may move between 9 focus nodes.
The fixed node sets the specified width attribute and height attribute, and sets the overflow attribute of the rolling node to hidden. I.e. the area where the roll node and focus node move out of the fixed node is hidden from view. The position attribute is set to be fixed positioning, namely fixed positioning of the fixed node relative to the display screen is realized. The specified width attribute and height attribute are set for the rolling node and the focus node, and the position attribute of the rolling node is set to be relatively positioned, namely, the relative positioning relative to the fixed node is realized. The focus node position attribute is set to absolute position, i.e., absolute position relative to the roll node is achieved.
And after the hierarchical page is set, acquiring coordinate position information of all focus nodes, wherein the coordinate position information is the coordinate position information relative to the fixed nodes. And stores coordinate position information of all FOCUS nodes to the DOM _ FOCUS _ LIST variable, and additionally sets a tag, for example, a settable number, for each FOCUS node. And then acquiring the coordinate position information of the FOCUS node corresponding to the number from the DOM _ FOCUS _ LIST variable according to the number.
In addition, initial position information of the fixed node and the rolling node needs to be acquired, the position of the fixed node is absolute positioning relative to the screen, and the method specifically includes the following steps: the position information of the rolling node is the distance between the upper part and the lower part and the left part and the right part relative to the fixed node, and the width and the height of the fixed node. The initial position information of the fixed node is stored in a variable DOM _ ROOT, and the initial position information of the rolling node is stored in a variable DOM _ SCROLL. The embodiment of the application specifically relates to updating the vertical distance between a rolling node and a fixed node based on the change of coordinate position information of a focus node when the focus moves, so as to realize the vertical movement of a page. Or based on the change of the coordinate position information of the focus node, the left-right distance between the rolling node and the fixed node is updated, so that the left-right movement of the page is realized.
Based on the above-mentioned hierarchical page, a flowchart of a method for controlling page movement based on focus position movement as shown in fig. 2 can be implemented, and the method includes the following steps:
and S101, controlling the current focus area to move among the focus nodes in response to an input instruction for switching the current focus area.
In the embodiment shown in fig. 1, the number of focus nodes 1-9 are placed in the roll node. All focus nodes are not out of range of the fixed nodes. In the example shown in fig. 1, the current focus area is located on focus node number 5.
And if the intelligent terminal responds to a control instruction of the user for indicating to move the current focus area, the current focus area is controlled to move from the focus node numbered 5 to the focus node numbered 8, and the focus node numbered 8 is selected in the current focus area.
And S102, judging the size relation between the first distance and the second distance. The first distance is the distance from the first side edge of the focus node where the current focus area is located to the second side edge of the fixed node. The second distance is the length of a side of the fixed node parallel to the moving direction of the current focus area, the first side is the side which is firstly separated from the range of the fixed node in the moving direction of the current focus area, and the second side is the side far away from the first side.
If the first distance is greater than the second distance, the rolling node is moved such that the first distance is less than or equal to the second distance. If the first distance is less than or equal to the second distance, the rolling node is not moved.
In the embodiment shown in fig. 1, when the current focus area moves from the focus node numbered 5 to the focus node numbered 8, the current focus area moving direction is downward. When the moving direction is downward, the side of the range of the first departing fixed node is the bottom edge of the focus node numbered 8. The first side edge is the bottom edge of the focus node numbered 8. The second side edge is the side edge away from the bottom edge of the focus node numbered 8, i.e., the top edge of the fixed node is the second side edge.
In the embodiment shown in FIG. 1, the first distance is then the distance from the bottom edge of the focus node numbered 8 to the top edge of the fixed node. The second distance is the height of the fixed node. It is calculated that the first distance is smaller than the second distance, i.e. the focus node numbered 8 does not depart from the range of the fixed nodes after the current focus area moves from the focus node numbered 5 to the focus node numbered 8. And thus does not move the rolling node.
The specific implementation process is that when DOM _ FOCUS _ NODE moves downwards, a dynamic algorithm moving function device is triggered, so that the position of DOM _ SCROLL _ NODE is updated on the TOP parameter, and the movement of the page is realized.
The first distance is identified in the DOM as CURRENT _ NODE _ POSITION.
The calculation mode of CURRENT _ NODE _ POSITION is CURRENT _ NODE _ POSITION ═ CURRENT _ DOM _ focus _ top + CURRENT _ DOM _ focus. CURRENT _ DOM _ focus.top is the distance from the top edge of the focus node numbered 8 to the top edge of the fixed node, CURRENT _ DOM _ focus.height is the height of the focus node numbered 8 in the direction of the CURRENT focus area movement, and DOM _ scroll.top is the distance from the top edge of the roll node to the top edge of the fixed node. In the embodiment of the present application, DOM _ strobe.top all takes a value of 0.
The second distance is DOM _ ROOT. If the value of Current _ NODE _ POSITION is less than or equal to the value of DOM _ ROOT, then the rolling NODE is not moved. If the value of CURRENT _ NODE _ POSITION is greater than the value of DOM _ ROOT, the roll NODE is moved, eventually such that the value of CURRENT _ NODE _ POSITION is less than or equal to the value of DOM _ ROOT.
In the embodiment shown in fig. 3, the number of focus nodes 1-15 are placed within the roll node. The focus nodes numbered 1-9 are within the range of fixed nodes and the focus node portions numbered 10-15 are outside the range of fixed nodes. The current focus area first selects the focus node numbered 8.
In the embodiment shown in fig. 3, if the smart terminal moves the current focus area from the focus node numbered 8 to the focus node numbered 14 in response to a control instruction from the user to move the current focus area, the focus node numbered 14 is selected in the current focus area. The current focus area movement direction is still moving downward at this time. At this point, the first side is the bottom side of the focus node numbered 14, the second side is the top side of the anchor node, and the first distance is the distance from the bottom side of the focus node numbered 14 to the top side of the anchor node. The second distance is still the height of the fixed node. Therefore, if the first distance is greater than the second distance, the rolling node needs to be moved, so that the first distance is less than or equal to the second distance after the rolling node is moved.
In some embodiments, if the first distance is greater than the second distance, the specific steps of moving the rolling node so that the first distance is less than or equal to the second distance are:
calculating a third distance from the bottom edge of the focus node where the current focus area is located to the bottom edge of the fixed node;
and moving the rolling node at least a third distance in a direction opposite to the moving direction of the current focus area, so that the first distance is smaller than or equal to the second distance.
Specifically, the focus node where the current focus area is located is moved from outside the range of the fixed node to within the range of the fixed node, specifically, the roll node drives all focus nodes to move upward, at least to the position shown in fig. 4, and the focus node numbered 14 is at the extreme position within the range of the fixed node. The portion that moves out of range of the fixed node is hidden from view.
The focus node numbered 14 needs to be moved from the position shown in fig. 3 to the position shown in fig. 4, and the distance that needs to be moved is the distance from the bottom edge of the focus node numbered 14 to the bottom edge of the fixed node. Therefore, if the focus node of the current focus area is to be moved from outside the range of the fixed node to inside the range of the fixed node, the distance that the rolling node needs to be moved is at least the distance from the bottom edge of the focus node of the current focus area to the bottom edge of the fixed node.
In the DOM, the distance that the rolling node needs to move is identified as the MoveDistance.
The moving distance is the distance that the rolling node needs to move, and the DOM _ FOCUS _ list is the distance value from the top edge of the FOCUS node where the current FOCUS area is located to the top edge of the fixed node, which is obtained from the index. DOM _ FOCUS is the height of the FOCUS node.
In some embodiments, if the scrolling node moves the focus node numbered 14 upward in the embodiment shown in FIG. 3, there is also a limit condition as shown in FIG. 5: after moving the rolling node, the distance from the top edge of the last row of focus nodes to the top edge of the fixed node is 0. If the scroll node continues to move upwards, part of the last row of focus nodes will be hidden, even all focus nodes are hidden, and the page presented to the user is a blank page.
In this limit, the MoveDistance of the rolling node is set to be LastDistance, which is the distance from the top edge of the focus node (last focus node) numbered 15 to the top edge of the fixed node before the rolling node is moved. The maximum moving distance of the rolling node is the LastDistance, and the moving distance of the rolling node is limited within the range of the LastDistance, so that the situation that the visual field disappears can be avoided.
In the embodiment shown in fig. 4, the current focus area is on focus node number 14. And if the intelligent terminal responds to a control instruction of the user for indicating to move the current focus area, controlling the current focus area to move from the focus node numbered 14 to the focus node numbered 8. As shown in fig. 6, the focus node numbered 8 is selected for the current focus area. The current focus area moves to move upward. The side of the range of first-off fixed nodes, with the direction of movement up, is the top edge of the focus node numbered 8. The first side is the top side of the focus node numbered 8. The second side edge is the side edge away from the top edge of the focus node numbered 8, i.e., the bottom edge of the anchor node is the second side edge.
In the embodiment shown in FIG. 6, the first distance is then the distance from the top edge of the focus node numbered 8 to the bottom edge of the fixed node. The second distance is the height of the fixed node. It is calculated that the first distance is smaller than the second distance, i.e., the focus node numbered 8 does not depart from the range of the fixed nodes after the current focus area moves from the focus node numbered 14 to the focus node numbered 8. And thus does not move the rolling node.
In the embodiment shown in fig. 4, the current focus area is on focus node number 14. And if the intelligent terminal responds to a control instruction of the user for indicating to move the current focus area, controlling the current focus area to move from the focus node with the number of 14 to the focus node with the number of 2. As shown in fig. 7, the focus node numbered 2 is selected for the current focus area. The current focus area moves to move upward. The side of the range of first-off fixed nodes, with the direction of movement up, is the top edge of the focus node numbered 2. The first side is the top side of the focus node numbered 2. The second side edge is the side edge away from the top edge of the focus node numbered 2, i.e., the bottom edge of the fixed node is the second side edge.
In the embodiment shown in FIG. 7, the first distance is then the distance from the top edge of the focus node numbered 2 to the bottom edge of the fixed node. The second distance is the height of the fixed node. It is calculated that the first distance is greater than the second distance, i.e., the focus node numbered 2 is out of range of the fixed node after the current focus area moves from the focus node numbered 14 to the focus node numbered 2. Moving the roll node is therefore required.
Specifically, the focus node where the current focus area is located is moved from outside the range of the fixed node to inside the range of the fixed node, specifically, the roll node drives all focus nodes to move downward, at least to the position shown in fig. 8. In the embodiment shown in fig. 8, focus node number 2 is at an extreme position within the fixed node range. The portion that moves out of range of the fixed node is hidden from view.
When the FOCUS node numbered 2 moves from the position shown in fig. 7 to the position shown in fig. 8, the specific calculation process of the moving distance required by the scroll node is, MoveDistance, DOM _ FOCUS _ list, top-DOM _ ROOT + DOM _ FOCUS, and at this time, DOM _ FOCUS _ list, top of the FOCUS node numbered 2 is equal to DOM _ ROOT. Therefore, if it is necessary to move the focus node numbered 2 from the position shown in fig. 7 to the position shown in fig. 8, the distance that the roll node is moved is the height of the focus node numbered 2.
If the focus node numbered 2 continues to move down, there is also an extreme position of movement. In the embodiment shown in fig. 9, the node numbered 2 moves to its extreme position when the bottom edge of the topmost row of focus nodes coincides with the bottom edge of the fixed node. The focus node numbered 2 moves from the position shown in fig. 7 to the position shown in fig. 9, and the distance that the roll node moves is the height of the fixed node.
In some embodiments, if the smart terminal responds to a control instruction of the user to move the current focus area, the moving direction of the current focus area is controlled to be moved to the right. For example, in the embodiment shown in fig. 1, the current focus area is controlled to move from focus node number 5 to focus node number 6. At this time, the first side is the right side of the focus node numbered 6, and the second side is the left side of the fixed node. The first distance is the distance from the right side of the focus node numbered 6 to the left side of the fixed node. The second distance is the width of the fixed node. The first distance is less than the second distance, the rolling node is not moved.
In the embodiment shown in fig. 10, if the smart terminal controls the current focus area to move from the focus node numbered 5 to the focus node numbered 1 in response to a control instruction for the user to instruct to move the current focus area. At this time, the first side is the left side of the focus node numbered 1, and the second side is the right side of the fixed node. The first distance is the distance from the left side of the focus node numbered 1 to the right side of the fixed node. The second distance is the width of the fixed node. The first distance is greater than the second distance, the rolling node needs to be moved.
In the embodiment shown in fig. 10, the focus node numbered 1 moves from a range of departure from the fixed node to a range of the fixed node, and also has two extreme positions: the left side of the focus node 1 coincides with the left side of the fixed node, and the moving distance of the rolling node is the distance from the left side of the focus node 1 to the left side of the fixed node. And the right side of the focus node 1 coincides with the right side of the fixed node, and the moving distance of the rolling node is the distance from the right side of the focus node 1 to the right side of the fixed node. The specific moving process is similar to the embodiment in which the scroll node moves up and down, and this embodiment is not described again.
An embodiment of the present application provides a device for controlling page movement based on focus position movement, which is used to execute the embodiment corresponding to fig. 2, and as shown in fig. 11, the log replaying device provided by the present application includes:
a DOM tree building module 201 configured to: constructing a fixed node, a rolling node and a focus node of a page based on a DOM tree, wherein the fixed node is set to be absolutely positioned relative to a screen, the rolling node is set to be relatively positioned relative to the fixed node, the focus node is set to be absolutely positioned relative to the rolling node, the fixed node, the rolling node and the focus node are all provided with fixed height and width, the focus node divides the rolling node into at least two areas, and the focus node which is separated from the range of the fixed node is in a hidden invisible state;
a focal region movement module 202 configured to: controlling the current focus area to move between the focus nodes in response to an input instruction for switching the current focus area;
a rolling node movement module 203 configured to: when a first distance is greater than a second distance, moving the rolling node so that the first distance is smaller than or equal to the second distance, wherein the first distance is the distance from the bottom edge of the focus node where the current focus area is located to the top edge of the fixed node, the second distance is the height or width of the fixed node, the bottom edge of the focus node is the side edge which is farthest away from the fixed node in the moving direction of the current focus area, and the top edge of the fixed node is the side edge which is far away from the bottom edge of the focus node;
not moving the rolling node when the first distance is less than or equal to the second distance.
In some embodiments, the rolling node moving module 203 is specifically configured to:
calculating a third distance from the bottom edge of the focus node where the current focus area is located to the bottom edge of the fixed node;
moving the scroll node at least the third distance in a direction opposite to the current focus area movement direction such that the first distance is less than or equal to the second distance.
In some embodiments, the rolling node moving module 203 is further configured to:
calculating a fourth distance from the top edge of the focus node where the current focus area is located to the top edge of the fixed node;
moving the scroll node at most the fourth distance in a direction opposite to the current focus area movement direction.
What has been described above includes examples of implementations of the invention. It is, of course, not possible to describe every conceivable combination of components or methodologies for purposes of describing the claimed subject matter, but it is to be appreciated that many further combinations and permutations of the subject innovation are possible. Accordingly, the claimed subject matter is intended to embrace all such alterations, modifications and variations that fall within the spirit and scope of the appended claims. Moreover, the foregoing description of illustrated implementations of the present application, including what is described in the "abstract," is not intended to recite or limit the disclosed implementations to the precise forms disclosed. While specific implementations and examples are described herein for illustrative purposes, various modifications are possible that are considered within the scope of such implementations and examples, as those skilled in the relevant art will recognize.
Claims (10)
1. A method for controlling page movement based on focus position movement, the method comprising:
constructing a fixed node, a rolling node and a focus node of a page based on a DOM tree, wherein the fixed node is set to be absolutely positioned relative to a screen, the rolling node is set to be relatively positioned relative to the fixed node, the focus node is set to be absolutely positioned relative to the rolling node, the fixed node, the rolling node and the focus node are all provided with fixed height and width, the focus node divides the rolling node into at least two areas, and the focus node which is separated from the range of the fixed node is hidden and invisible;
controlling the current focus area to move among the focus nodes in response to an input instruction for switching the current focus area;
when the first distance is greater than the second distance, moving the rolling node to enable the first distance to be smaller than or equal to the second distance, wherein the first distance is the distance from a first side edge of the focus node where the current focus area is located to a second side edge of the fixed node, the second distance is the length of a side edge of the fixed node parallel to the moving direction of the current focus area, the first side edge is the side edge which is firstly separated from the fixed node range in the moving direction of the current focus area, and the second side edge is the side edge of the fixed node far away from the first side edge;
not moving the rolling node when the first distance is less than or equal to the second distance.
2. The method for controlling page movement according to claim 1, wherein the step of moving the scroll node so that the first distance is less than or equal to the second distance comprises:
calculating a third distance from the bottom edge of the focus node where the current focus area is located to the bottom edge of the fixed node;
moving the scroll node at least the third distance in a direction opposite to the current focus area movement direction such that the first distance is less than or equal to the second distance.
3. The method for controlling page movement based on focus position movement according to claim 2, further comprising:
calculating a fourth distance from the top edge of the focus node where the current focus area is located to the top edge of the fixed node;
moving the scroll node at most the fourth distance in a direction opposite to the current focus area movement direction.
4. The method of claim 1, wherein initial coordinate position information of the focus node is recorded and the focus node is marked before the current focus area is moved for the first time;
when the current focus area is moved for the first time, acquiring corresponding initial coordinate position information according to the mark of the focus node where the current focus area is located;
and determining the first distance according to the initial coordinate position information and the height or width of the focus node.
5. The method of claim 1, wherein the moving direction of the current focus area comprises up, down, left, and right.
6. The method of claim 1, wherein the height of all the focus nodes are equal and the width of all the focus nodes are equal.
7. The method for controlling page movement based on focus position movement of claim 1, wherein the focus node where the current focus area is located is identified differently from other focus nodes.
8. An apparatus for controlling a page movement based on a focus position movement, comprising:
a DOM tree building module configured to: constructing a fixed node, a rolling node and a focus node of a page based on a DOM tree, wherein the fixed node is set to be positioned absolutely relative to a screen, the rolling node is set to be positioned relatively relative to the fixed node, the focus node is set to be positioned absolutely relative to the rolling node, the fixed node, the rolling node and the focus node are all provided with fixed height and width, the focus node divides the rolling node into at least two areas, and the focus node which is separated from the range of the fixed node is in a hidden invisible state;
a focal region moving module configured to: controlling the current focus area to move among the focus nodes in response to an input instruction for switching the current focus area;
a rolling node movement module configured to: when the first distance is greater than the second distance, moving the rolling node to enable the first distance to be smaller than or equal to the second distance, wherein the first distance is the distance from a first side edge of the focus node where the current focus area is located to a second side edge of the fixed node, the second distance is the length of a side edge of the fixed node parallel to the moving direction of the current focus area, the first side edge is the side edge which is firstly separated from the fixed node range in the moving direction of the current focus area, and the second side edge is the side edge of the fixed node far away from the first side edge;
not moving the rolling node when the first distance is less than or equal to the second distance.
9. The apparatus of claim 8, wherein the rolling node movement module is specifically configured to:
calculating a third distance from the bottom edge of the focus node where the current focus area is located to the bottom edge of the fixed node;
moving the scroll node at least the third distance in a direction opposite to the current focus area movement direction such that the first distance is less than or equal to the second distance.
10. The apparatus of claim 9, wherein the rolling node movement module is further configured to:
calculating a fourth distance from the top edge of the focus node where the current focus area is located to the top edge of the fixed node;
moving the scroll node at most the fourth distance in a direction opposite to the current focus area movement direction.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110632425.4A CN113378086B (en) | 2021-06-07 | 2021-06-07 | Method and device for controlling page movement based on focus position movement |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110632425.4A CN113378086B (en) | 2021-06-07 | 2021-06-07 | Method and device for controlling page movement based on focus position movement |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113378086A CN113378086A (en) | 2021-09-10 |
| CN113378086B true CN113378086B (en) | 2022-07-26 |
Family
ID=77576085
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110632425.4A Active CN113378086B (en) | 2021-06-07 | 2021-06-07 | Method and device for controlling page movement based on focus position movement |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113378086B (en) |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102231167B (en) * | 2011-07-08 | 2013-06-05 | 深圳市同洲电子股份有限公司 | Method and device for moving focuses based on embedded browser |
| CN104778239B (en) * | 2015-04-03 | 2018-07-06 | 中国科学院声学研究所 | A kind of built-in browser focus querying method |
| CN106708371B (en) * | 2017-01-17 | 2020-04-07 | 深圳创维数字技术有限公司 | Method and system for realizing focus control of browser |
-
2021
- 2021-06-07 CN CN202110632425.4A patent/CN113378086B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN113378086A (en) | 2021-09-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110837617B (en) | Webpage self-adaptive layout method, server and computer readable storage medium | |
| CN102591853B (en) | Webpage rearrangement method, webpage rearrangement device and mobile terminal | |
| US20160378278A1 (en) | Device and methods for control including presentation of a selectable display element | |
| EA012487B1 (en) | A method of displaying data in a table | |
| US20140075290A1 (en) | Window switching method and apparatus | |
| CN107835461A (en) | Focus movement control method, smart television and computer-readable storage medium | |
| CN102202240B (en) | Set-top box browser control focus skip method | |
| CN107533568B (en) | System and method for determining application zoom level | |
| CN112351347B (en) | Screen focus moving display method, display device and storage medium | |
| WO2013018427A1 (en) | Information processing device, method for controlling information processing device, program and information recording medium | |
| CN113486280A (en) | Page rendering display method, device, equipment, storage medium and program product | |
| CN110660365A (en) | Regional backlight control method, display and storage medium | |
| CN113378086B (en) | Method and device for controlling page movement based on focus position movement | |
| JP2011013791A (en) | Document processor and program | |
| CN110837368B (en) | Data processing method and device and electronic equipment | |
| CN112565851A (en) | Method and device for personalized configuration of television homepage through mobile phone terminal | |
| CN105589883B (en) | Method and device for displaying page elements of webpage | |
| JP6339550B2 (en) | Terminal program, terminal device, and terminal control method | |
| CN106354409A (en) | Information display method and device and terminal | |
| CN106855870B (en) | Webpage display method and device | |
| KR20140132938A (en) | Method for displaying web page and device thereof | |
| CN116107681A (en) | Interface interaction method, container assembly, computer readable storage medium and device | |
| CN115729503A (en) | Interface display method and device, computer equipment and storage medium | |
| CN104536949A (en) | Webpage reset method, webpage reset device and mobile terminal | |
| CN108073339B (en) | Floating layer display method, client and electronic equipment |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |