This application claims the priority of the Chinese patent application filed on Dec. 20, 2020 before the CNIPA, China National Intellectual Property Administration with the application number of 202011512796.0 and the title of “WEBPAGE DISPLAY METHOD, SYSTEM AND MEDIUM”, which is incorporated herein in its entirety by reference.
The present application relates to the technical field of Internet, in particular to a web page display method, a medium and a computing and processing device.
When users use the browser to process some online tasks and online work on the network, it is inevitable that there will be too many tasks or work, or that multiple window processes need to be opened for simultaneous processing when processing tasks and work. At this time, the multi-window suspension parallel processing function of the browser is particularly important. Existing browsers need to download the corresponding plug-in to achieve multi-window suspension, the steps are more cumbersome, and the major browser vendors are different, their kernel versions are different, plug-ins may not adapt to multiple types of browsers at the same time; on the basis of this problem, the mobile browser may realize the window suspension operation of any browser through the download of web widgets, but the displayed web page is only limited to the content of videos, pictures and advertisements.
The present application mainly solves the problem that the page suspension function in the browser is cumbersome, restrictive and too limited when using the browser.
In order to solve the above-mentioned technical problems, the present application adopts a technical solution that: providing a web page display method, including:
In some embodiments of the present application, the operation of monitoring the loading condition of the display area of the main page, executing the node insertion measures to obtain the floating display area, and executing the floating item configuration measure in the display area of the main page includes:
In some embodiments of the present application, the operation of monitoring the control actions of the control device in the display area of the main page and executing the information windowing measures to obtain the floating web page includes:
In some embodiments of the present application, the loading measures are:
In some embodiments of the present application, the information windowing measures are:
In some embodiments of the present application, the method further includes: after executing the information windowing measures, assigning a corresponding ID and key to the floating web page, identifying the floating web page content corresponding to the floating web page according to the ID, and determining a position of the floating sub-node corresponding to the floating web page in the content Dom node according to the key.
In some embodiments of the present application, the operation of monitoring the quantity of the floating web pages, monitoring the control actions of the control device in the floating display area, and executing the action feedback measures includes:
In some embodiments of the present application, the operation of monitoring the control actions of the control device according to the closing click feedback area and executing the corresponding closing measures includes:
The present application further provides a web page display system, including: a main page display area module, a floating display area module, and a floating operation module;
A non-transitory computer-readable storage medium, a computer program is stored on the computer-readable storage medium and the operations of the web page display method are implemented when the computer program is executed by a processor.
The present application has the beneficial effects that:
1. The web page display method described in the present application may realize that, in different browsers, the floating display area is obtained through initialization, the clicking action of the user's mouse is fed back on the floating page through different measures, and for any type of content, the floating display is carried out through the floating page, which greatly improves the efficiency of the browser in processing multitasks.
2. The web page display system described in the present application may realize that, a floating display area is obtained by initializing in the browser by the main page display area module, different measures are implemented through the floating operation module to feed back the clicking action of the user's mouse on the floating page, and any type of content is floated through the floating page by the floating display area module, which greatly improves the efficiency of the browser in processing multitasks.
3. The non-transitory computer-readable storage medium described in the present application may realize to guide the mutual cooperation between the main page display area module, the floating operation module and the floating display area module, and improve the operability of the web page display method.
The embodiments of the present application will be described in detail below in conjunction with the drawings, so that the advantages and features of the present application may be more easily understood by those skilled in the art, so as to more clearly define the scope of protection of the present application.
In the description of the present application, it should be noted that Dom (Document Object Model) is a platform and language-independent application program interface, <float-page> </float-page> is a browser setting instruction, document.body.clientHeight is a height of a visible area of the browser, document.body.clientWidth is a width of the visible area of the browser, JavaScript is a just-in-time compilation type of high-level programming language, URL (uniform resource locato) is a representation method for specifying information locations on the World Wide Web service program of the Internet, iframe is an HTML tag, http is a simple request-response protocol, ID (Identity Document) is the identification number, key is the registry file, mouseover is the action of the mouse pointing to move into an element, mouseout is the action of the mouse pointing to move out an element, Web (World Wide Web) is the global wide area network, and clientHeight is the window height.
The present embodiment provides a web page display method, as shown in
S100. after the web page is opened, inserting a content Dom node <float-page> </float-page> in the root node of the Dom node of the web page; and regarding the content Dom node as the floating display area of the web page; the area of the whole web page except for the floating display area is the display area of the main page; the display area of the main page and the floating display area co-exist in the entire browser, which may be applied to any type of browsers, without the need to download the corresponding plug-in;
S200, setting the size of the floating display area; setting a low resolution threshold value, a medium resolution threshold value and a high resolution threshold value; capturing to obtain the document.body.clientHeight (i.e., the resolution data of the browser) and document.body.clientWidth (i.e., the resolution data of the browser) of the browser to identify the resolution size of the browser. On the condition that the resolution size of the browser is within the low resolution threshold value, adjusting the size of the floating display area to a low resolution size; on the condition that the resolution size of the browser is greater than the low resolution threshold value and less than the medium resolution threshold value, adjusting the size of the floating display area to a medium resolution size; on the condition that the resolution size of the browser is greater than the medium resolution threshold value and less than the high resolution threshold value, adjusting the size of the floating display area to a high resolution size. The table of the corresponding relationship between the size of the floating display area and the resolution of the browser is shown in
S300. acquiring a floating support flag bit of the loaded content in the display area of the main page when there is the loaded content in the display area of the main page; respectively inserting the floating flag bits into each floating support flag bit; saving the URL corresponding to the loaded content with the floating support flag bit in the corresponding floating flag bit; setting the floating click feedback area of the floating flag bit and monitor the control action of the mouse (i.e., control device);
S400. when the click action of the mouse is detected in the floating click feedback area of the floating flag bit, executing the loading measures: adding a floating sub-node of the URL of the loaded content corresponding to the floating flag bit in the content Dom node of the floating display area, and then executing the determination measures: obtaining a resource file corresponding to the URL information and determining whether the resource file is a real-time file; on the condition that the resource file is the real-time file, executing the information windowing measures on the floating sub-node corresponding to the URL; on the condition that the resource file is not the real-time file, querying the local cache directory of the browser and determining whether there is a cache file matching the resource file in the directory; on the condition that there is the cache file matching with the resource file in the directory, not loading the file and reading the cache file in the local cache directly; on the condition that there is no cache file matching the resource files in the directory, executing the information windowing measures on the floating sub-node corresponding to the URL;
On the condition that the cache file is read before executing the information windowing measures, the web page content corresponding to the cache file is loaded as the floating web page content.
The ID of the floating web page is displayed in the floating window. After a plurality of floating web pages are generated, there will be a plurality of floating windows in the floating display area. Action feedback measures may be performed on the floating windows through the control operation of the mouse.
S500. executing the action feedback measures;
The magnifying measures are: collecting the URL of the content in the display area of the main page, performing operations of S400 on the URL of the display area of the main page, accessing the URL of the floating page, and outputting the content corresponding to the URL in the display area of the main page; querying the key corresponding to the floating page in the floating display area, determining the floating sub-node corresponding to the key, and deleting the floating sub-node from the content Dom; deleting the ID and label of the floating page from the floating display area, and does not affect the display of the floating page content of other floating pages.
Setting the stacking movement feedback area on the bearing tag corresponding to the floating page, monitoring the movement behavior of the mouse. When the mouse generates a mouseover event (i.e., move-in action) in the movement feedback area, that is, when the mouse moves to a certain floating window, performing the unfolding measures: setting the height of the floating display area to clientHeight of the browser, determining a floating page to be a first-place arrangement floating page, and arranging and displaying all the floating pages up and down relative to the first-place arrangement floating page. Detecting whether the arrangement size of the floating pages exceeds the height of the browser. On the condition that the arrangement size of the floating pages exceeds the height of the browser, adding a scroll bar to the floating display area, and moving the floating pages by the scroll bar; when the mouseout event (i.e., the move-out action) is in the floating movement feedback sensing area, that is, when the mouse is moved away from a certain floating window, executing the stacking measures: setting the height of the floating display area to be a default height, detecting the key value of the floating page, and setting the stacking rule. In the floating page, selecting the first stacked floating page according to the stacking rule and the key value of the floating page, in detail: sorting the floating pages according to their key value from small to large, and regarding the first place floating page with the smallest key value as the first stacked floating page, and arranging the rest of the floating pages after the first stacked floating page in sequence, and only displaying the ID of the floating page;
S600, setting a display threshold value and a detection time period, detecting the quantity of the floating sub-windows at every detection time period, and sending an alarm signal when the quantity of the floating sub-windows is equal to the display threshold value; among them, the display threshold value may be modified according to the system configuration and the demand of users.
The method may be applied in the Web background management system to realize simultaneous operation and processing of multi task processes for log information and monitoring information and other contents.
The present embodiment provides a web page display system, as shown in
The floating display area module includes: a floating page acquisition module, a floating page insertion module, a floating loading module, a web page hosting module and an ID module.
The floating page acquisition module; when the floating page acquisition module receives the floating page acquisition signal, the floating page acquisition module acquires the URL of the corresponding page and sends the corresponding insertion signal to the floating page insertion module; and sends the URL to the floating loading module;
The web page hosting module; the web page hosting module acts on the content Dom node of the floating display area and is provided with an iframe tag. The web page hosting module bears the web page content displayed in the floating display area through the bearing tag, so that each floating page may run independently without conflicting with the main page. When receiving the above documents, the web page hosting module displays the content of the documents through the bearing tag. When receiving the URL, the web page hosting module obtains the corresponding web page content by sending an http request to the server at the URL end, visits the URL of the page, refreshes the page content in real time through the URL, and displays the page content in the floating display area;
After receiving the ID allocation signal, the ID module assigns the ID to the corresponding page. This ID is used to identify the content of the corresponding web page; the length of ID has a data threshold value, and the ID module collects the information within the data threshold value in each web page as the ID.
The floating operation module includes: a closing click feedback module, a magnifying click feedback module, floating page stacking module and floating page quantity detection module.
The bearing tag of the page is provided with the closing click feedback module and the magnifying click feedback module, which are provided with corresponding closing click feedback areas and magnifying click feedback areas on the bearing tag of the page.
When the quantity of the floating pages is only one, the closing click feedback module and the magnifying click feedback module are in the induction state; when the mouse executes a click action in the closing click feedback area, the close click feedback module closes the floating page; when the mouse executes a click action in the magnifying click feedback area, the magnifying click feedback module magnifies the floating page; when the floating page is magnified, the replacement module collects the content of the main page and executes the information windowing measures on the main page; the display area of the main page displays the content of the floating page; the web page hosting module looks for the key of the page, determines the dom node according to the key, sends a deletion signal to the floating page insertion module, and the floating page insertion module deletes the sub-node of the node from the content dom; removes the ID and iframe tag of the floating page from the floating display area without affecting the content display of other floating pages.
The floating page stacking module; the stacking module is provided with a stacking movement feedback area. The stacking module listens to the mouse movement behavior. When the mouseover event of the mouse occurs in the movement feedback sensing area, the stacking module sends a display signal to the size setting module. The size setting module sets the height of the floating display area to clientHeight of the browser and displays all the floating web page sub-windows in an up-down arrangement. At this time, the stacking module detects whether the arrangement size of the sub-window exceeds the height of the browser. On the condition that the arrangement size of the sub-window exceeds the height of the browser, the stacking module adds a scroll bar in the floating display area to move the floating sub-windows through the scroll bar. When the mouseout event is in the floating movement feedback sensing area, the stacking module sends a stacking signal to the size setting module, which sets the height of the floating display area to the default height. The stacking module detects the key value of the window, and sorts the sub-windows according to their key values from small to large, and the first place sub-window with the smallest key value is used as the first display window, and the rest of the sub-windows are arranged after the first display window in sequence, and only the ID information of the window is displayed.
The floating page quantity detection module; it is provided with a display threshold value and a detection time period. The floating page quantity detection module detects the quantity of the floating pages at every detection time period. When the quantity of the floating pages is equal to the display threshold value, an alarm signal is sent to the main page display area module. The floating page quantity detection module may make corresponding modifications to the display threshold value according to the system configuration and the user demand.
Based on the same application concept as a web page display method in the foregoing embodiments, the embodiments of the present specification also provide a non-transitory computer-readable storage medium on which a computer program is stored, and the operations of the web page display method are implemented when the computer program is executed by a processor.
Different from the prior art, the web page display method, system and medium of the present application may realize that, in different browsers, initializing the corresponding floating display area, feeding back the clicking action of the user's mouse on the floating page through different measures, and performing the floating display of any type of content through the floating page, which greatly improves the efficiency of the browser in processing multitasks and improves the applicability of the browsers.
Based on the same application concept as a web page display method in the foregoing embodiments, the embodiments of the present specification also provide a computing and processing device, including: a memory in which a computer program executable on the processor is stored; and one or more processors, wherein when the computer program is executed by the one or more processors, the computing and processing device is configured to cause the processor to implement the operations of the web page display method.
The above-described device embodiments are merely illustrative, wherein the units that are described as separate components may or may not be physically separate, and the components that are displayed as units may or may not be physical units; in other words, they may be located at the same one location, and may also be distributed to a plurality of network units. Part or all of the modules may be selected according to the actual demands to realize the purposes of the solutions of the embodiments. A person skilled in the art can understand and implement the technical solutions without paying creative work.
Each component embodiment of the present application may be implemented by hardware, or by software modules that are operated on one or more processors, or by a combination thereof. A person skilled in the art should understand that some or all of the functions of some or all of the components of the calculating and processing device according to the embodiments of the present application may be implemented by using a microprocessor or a digital signal processor (DSP) in practice. The present application may also be implemented as apparatus or device programs (for example, computer programs and computer program products) for implementing part of or the whole of the method described herein. Such programs for implementing the present application may be stored in a computer-readable medium, or may be in the form of one or more signals. Such signals may be downloaded from an Internet website, or provided on a carrier signal, or provided in any other forms.
For example,
The above is only the embodiment of the present application, and does not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made by using the contents of the specification and drawings of the present application, or directly or indirectly applied in other related technical fields, are equally included in the patent protection scope of the present application.
Number | Date | Country | Kind |
---|---|---|---|
202011512796.0 | Dec 2020 | CN | national |
Filing Document | Filing Date | Country | Kind |
---|---|---|---|
PCT/CN2021/121869 | 9/29/2021 | WO |