Split-screen display method of page content, multi-page display method and device

Abstract

The present application is applicable to the field of computer technology, and discloses a split-screen display method, a multi-page display method and a device for page content. The split-screen display method displays a first application page, wherein the first application page includes a first application content area and a split-screen container area, and the first application content area contains one or more content items, so as to split an application page; in response to an add operation acting on a content item, the content item is added to the split-screen container area, so as to perform a simple add operation in the same application page, without a series of tedious operations such as creating a new tab, reopening the content item page, and dragging out the tab, thereby simplifying the split-screen display operation of the page content and improving the operation efficiency; finally, in the split-screen container area, the content information of the content item is displayed, so as to simultaneously display the content item and the content information on one application page, thereby improving the display effect, and without the need to manually adjust the page size, further simplifying the split-screen display operation.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a split-screen display method for page content, a multi-page display method and a device. Background Art

[0002] When content items in an application page need to be compared, a new application page is usually created to display the content items in the two application pages. Currently, a new browser tab is usually opened, and then the content information page under the browser tab is found, and then the tab is dragged out as a separate page window to display both the content item page and the content information page.

[0003] However, the current display method requires opening a page by opening a new tab each time, and manually adjusting the sizes of the two pages. It can be seen that the current display method of page content has the problem of very cumbersome operation steps. Summary of the invention

[0004] The present application provides a split-screen display method, a multi-page display method and a device for page content, so as to solve the technical problem that the current page content display method has cumbersome operation, simplify the page content display operation, and improve the display efficiency and effect of the page content.

[0005] In order to solve the above technical problems, in a first aspect, the present application provides a method for split-screen display of page content, comprising:

[0006] Displaying a first application page, the first application page includes a first application content area and a split-screen container area, the first application content area includes one or more content items;

[0007] In response to an add operation on the content item, adding the content item to the split-screen container area;

[0008] In the split-screen container area, content information of the content item is displayed.

[0009] The present application displays a first application page, wherein the first application page includes a first application content area and a split-screen container area, and the first application content area contains one or more content items, so as to split an application page; in response to an add operation on a content item, the content item is added to the split-screen container area, so that a simple add operation can be performed within the same application page without a series of tedious operations such as creating a new tab, reopening the content item page, and dragging out the tab, thereby simplifying the split-screen display operation of the page content and improving operational efficiency; finally, in the split-screen container area, the content information of the content item is displayed, so that the content item and the content information are displayed on one application page at the same time, thereby improving the display effect, and there is no need to manually adjust the page size, further simplifying the split-screen display operation.

[0010] In some implementations of the first aspect, displaying the first application page includes:

[0011] Displaying a second application page, the second application page includes a second application content area, and the second application content area is the first application content area before the second application page is split;

[0012] If a split-screen start event of the second application page is monitored, a split-screen mode of the second application page is started, where the split-screen mode is used to split the second application page into a first application content area and a split-screen container area to obtain the first application page;

[0013] Display the first application page.

[0014] In this implementation, based on the second application page displaying the content item, the second application page is automatically split based on the split-screen mode, simplifying the display operation and improving the operation efficiency. At the same time, this implementation method only splits the page content under the current tab, and does not affect the content display of other tabs. This implementation method has better decoupling.

[0015] In some implementations of the first aspect, if a split-screen start event of the second application page is monitored, starting the split-screen mode of the second application page includes:

[0016] If a split-screen start event of the second application page is monitored, inserting a split-screen container into the second application page;

[0017] Based on the second application content area and the split-screen container, the second application page is laid out to obtain the first application page.

[0018] In this implementation, by inserting a split-screen container, the container function of the split-screen container can be used to automatically read information from content items; at the same time, page layout is performed to automatically adjust the size of each area in the page, further improving the split-screen efficiency.

[0019] In some implementations of the first aspect, performing page layout on the second application page based on the second application content area and the split-screen container to obtain the first application page includes:

[0020] Based on the preset layout ratio, the second application content area is scaled to obtain the first application content area and the blank area of ​​the first application page;

[0021] Fill the split screen container to the blank area to obtain the split screen container area.

[0022] In this implementation, automatic split-screen operation is implemented based on the second application content area through size scaling and filling operations.

[0023] In some implementations of the first aspect, the split-screen start event includes a split-screen start event triggered based on a preset shortcut instruction.

[0024] In this implementation, shortcut commands are used to simplify user operations and improve split-screen efficiency.

[0025] In some implementations of the first aspect, the adding operation is a drag operation, and in response to the adding operation on the content item, adding the content item to the split-screen container area includes:

[0026] In response to a drag operation on the content item, the content item is dragged to the split-screen container area based on a drag track of the drag operation.

[0027] In this implementation, a quick split-screen display is achieved based on a drag operation, and the process of dynamically displaying the content items in the split-screen container area can be improved to enhance the user experience.

[0028] In some implementations of the first aspect, the drag operation includes a selection operation, a drag operation, and a release operation, and in response to the drag operation on the content item, dragging the content item to the split-screen container area based on a drag track of the drag operation includes:

[0029] In response to a selection operation on the content item, displaying a zoomed view of the content item;

[0030] In response to a drag operation on the content item, drag the zoom image to the split-screen container area based on the drag trajectory;

[0031] In response to a release operation on the content item, the content item is released in the split-screen container area, and the display of the zoomed image is canceled.

[0032] In this implementation, a zoomed view of the content item is displayed during the dragging operation, so that the user can clearly see the position of the currently dragged content item, thereby improving the user's visual effect.

[0033] In some implementations of the first aspect, in response to a release operation on the content item, releasing the content item in the split-screen container area and canceling display of the zoomed image include:

[0034] In response to a release operation on the content item, the content item is released in the split-screen container area, and a second preset drag event is triggered;

[0035] Based on the second preset drag event, the display of the zoom image is canceled.

[0036] In this implementation, the second preset drag event is triggered by the release operation, and the corresponding code function is called by utilizing the second preset drag event to cancel the display of the zoomed image, making the entire drag operation smoother and further improving the user experience.

[0037] In some implementations of the first aspect, in response to a selection operation on a content item, displaying a zoomed view of the content item includes:

[0038] In response to a selection operation on a content item, recording node element information of the content item;

[0039] According to the node element information, a zoomed graph corresponding to the node element information is displayed.

[0040] In this implementation, a zoomed image corresponding to the node element information of the content item is displayed, so that the user can intuitively view the pattern of the zoomed image, and thus quickly identify the type of the dragged content item through the pattern.

[0041] In some implementations of the first aspect, in response to a selection operation on a content item, recording node element information of the content item includes:

[0042] In response to a selection operation on a content item, triggering a first preset drag event;

[0043] Based on the first preset drag event, a preset data acquisition function is called to record the node element information of the content item.

[0044] In this implementation, by calling a preset data acquisition function to record the node element information of the content item, the content item can be quickly identified from the bottom layer when the drag operation begins; at the same time, the drag operation process can carry the node element information of the content item, so that the content item can be identified and the relevant information of the content item can be read based on the node element information before the content information is displayed in the subsequent split-screen container area.

[0045] In some implementations of the first aspect, displaying a zoomed image corresponding to the node element information according to the node element information includes:

[0046] Calling a preset node copy function to copy the node element information of the content item and generate new node element information;

[0047] Change the style attributes in the new node element information to generate a zoomed image;

[0048] Displays a zoomed image.

[0049] In this implementation, new node element information is generated by copying, and the style attributes are changed, so as to retain the original information of the node element information and ensure the integrity of the relevant information of the content item during the drag operation.

[0050] In some implementations of the first aspect, in response to a drag operation on a content item, dragging the content item to a split-screen container area based on a drag track of the drag operation includes:

[0051] In response to a drag operation on the content item, drag the content item based on the drag trajectory;

[0052] If it is detected that the content item enters the area range of the split-screen container area, the target background color of the split-screen container area is displayed, where the target background color is a first color used to indicate that the split-screen container area allows the content item to be placed, or a second color used to indicate that the split-screen container area does not allow the content item to be placed;

[0053] If the background color is the first color, the content item is released to complete the drag operation.

[0054] In this implementation, the background color of the split-screen container area is displayed to intuitively prompt the user whether the current split-screen container area can display content information. This is to deal with the situation where the currently dragged content item cannot be displayed for some reason (such as the split-screen container is already occupied) and the user is unaware, thereby improving the user experience.

[0055] In some implementations of the first aspect, if it is detected that the content item enters the area range of the split-screen container area, displaying the target background color of the split-screen container area includes:

[0056] Listen for the third preset drag event;

[0057] If it is monitored that the third preset drag event is triggered, it is determined that the content item enters the area range of the split-screen container area, and the target background color of the split-screen container area is displayed.

[0058] In this implementation, through the third preset drag event during the drag operation, the display of the target background color is triggered along with the drag operation, making the entire drag operation smoother and more intelligent.

[0059] In some implementations of the first aspect, in response to a drag operation on a content item, before dragging the content item to the split-screen container area based on a drag track of the drag operation, the method further includes:

[0060] Add draggable attribute to the node element of the content item.

[0061] In this implementation, a draggable attribute is added to enable the content item to be dragged, which serves as the underlying basis for adding content items to the split-screen container area.

[0062] In some implementations of the first aspect, displaying content information of a content item in a split-screen container area includes:

[0063] Read the first inline style and content information of the content item;

[0064] According to the area size of the split-screen container area, adjust the first inline style of the content item to obtain a second inline style;

[0065] Based on the second inline style, content information is displayed in the split-screen container area.

[0066] In this implementation, the inline style of the content item is adjusted so that the content information adapts to the area size of the split-screen container area, thereby improving the display effect of the content information.

[0067] In some implementations of the first aspect, after displaying the content information in the split-screen container area based on the second inline style, the method further includes:

[0068] Monitor page window changes of the first application page;

[0069] If a change in the page window of the first application page is detected, the content information of the split-screen container area is adapted to the window;

[0070] Displays the content information after the window is adapted.

[0071] In this implementation, when the page window changes, the content information is window-adapted so that the content information can be adjusted as the window changes, thereby improving the display effect of the content information.

[0072] In some implementations of the first aspect, if a change in the page window of the first application page is monitored, window adaptation is performed on the content information of the split-screen container area, including:

[0073] Based on a preset window change function, monitoring a page window change of the first application page;

[0074] If it is monitored that the page window of the first application page changes, the second inline style is adjusted to obtain a third inline style;

[0075] Based on the third inline style, content information is displayed in the split-screen container area.

[0076] In this implementation, window adaptation is achieved by adjusting the second inline style.

[0077] In some implementations of the first aspect, after reading the first inline style and content information of the content item, the method further includes:

[0078] Trigger preset publish and subscribe events;

[0079] Based on the preset publish-subscribe event, the first inline style is cached.

[0080] In this implementation, the first inline style is cached to retain the original inline style of the content item to ensure data integrity; at the same time, since there may be multiple content items and a few split-screen containers (such as one or two) on a first application page, when the split-screen mode is turned off, the split-screen container needs to find the content items in the first application content area, and this search method is very inefficient. Therefore, this implementation decouples the split-screen container from the content item corresponding to the content information by publishing and subscribing to events, so that the content item is quickly restored to the first application content area. At the same time, for the split-screen display of the same content item again, it can also be quickly displayed according to the cached first inline style without adjusting the first inline style again.

[0081] In some implementations of the first aspect, after displaying the content information in the split-screen container area based on the second inline style, the method further includes:

[0082] If a split-screen closing event of the first application page is monitored, the inline style of the content item is restored based on the first inline style.

[0083] In this implementation, the content item is restored based on the first inline style in the publish-subscribe event, thereby improving the restoration efficiency.

[0084] In a second aspect, the present application provides a multi-page display method, comprising:

[0085] Acquire multiple target application pages, each target application page includes an application content area and a split-screen container area, the application content area includes one or more content items, and the split-screen container area displays content information of the content items;

[0086] Rearrange multiple target application pages;

[0087] Display multiple target application pages after rearrangement.

[0088] The present application rearranges multiple target application pages whose page contents have been rearranged and displayed so as to be able to display multiple target application pages at the same time without affecting each other in the display process of the page contents of each target application page, thereby making the split-screen display of the page contents richer.

[0089] In a third aspect, the present application provides a split-screen display device for page content, comprising:

[0090] A first display module, used to display a first application page, the first application page includes a first application content area and a split-screen container area, the first application content area includes one or more content items;

[0091] An adding module, used to respond to an adding operation on a content item and add the content item to the split-screen container area;

[0092] The second display module is used to display content information of the content item in the split-screen container area.

[0093] In a fourth aspect, the present application provides a multi-page display device, comprising:

[0094] An acquisition module, used to acquire multiple target application pages, each target application page includes an application content area and a split-screen container area, the application content area includes one or more content items, and the split-screen container area displays content information of the content items;

[0095] A rearrangement module, used to rearrange multiple target application pages;

[0096] The third display module is used to display the rearranged multiple target application pages.

[0097] In a fifth aspect, the present application provides a terminal device comprising a processor and a memory, the memory being used to store a computer program, and when the computer program is executed by the processor, it implements the split-screen display method of page content in the first aspect, or the multi-page display method in the second aspect.

[0098] In a sixth aspect, the present application provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the split-screen display method of page content in the first aspect, or the multi-page display method in the second aspect.

[0099] In a seventh aspect, the present application provides a computer program product, which, when executed on a terminal device, enables the terminal device to implement the steps in the above-mentioned methods.

[0100] It should be noted that the beneficial effects of the third to seventh aspects mentioned above can be found in the relevant description of the first or second aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0101] Figure 1 A schematic diagram of a flow chart of a method for displaying page content on a split screen according to an embodiment of the present application;

[0102] Figure 2 A schematic diagram of a specific process of step S101 shown in an embodiment of the present application;

[0103] Figure 3 A schematic diagram of a specific process of step S102 shown in an embodiment of the present application;

[0104] Figure 4 This is a schematic diagram of a specific process of step S103 shown in an embodiment of the present application;

[0105] Figure 5 A schematic diagram of a second application page shown in an embodiment of the present application;

[0106] Figure 6 This is a schematic diagram of a second application page after starting the split-screen mode according to an embodiment of the present application;

[0107] Figure 7 A schematic diagram of a first application page shown in an embodiment of the present application;

[0108] Figure 8 A schematic diagram of an application scenario of the split-screen display method of page content shown in an embodiment of the present application;

[0109] Fig. 9 A schematic diagram of a multi-page display method according to an embodiment of the present application;

[0110] Fig.10 A schematic diagram of the structure of a split-screen display device for page content shown in an embodiment of the present application;

[0111] Fig.11 A schematic diagram of the structure of a multi-page display device shown in an embodiment of the present application;

[0112] Fig.12 A schematic diagram of the structure of a terminal device shown in an embodiment of the present application. DETAILED DESCRIPTION

[0113] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0114] As documented in the relevant technology, the current method of displaying the content of the page has the problem of very cumbersome operating steps. For example, in the document verification scenario of the financial system, it is necessary to compare the document information entered into the financial system with the document diagram. The current display method is usually to open a new browser tab, find the document diagram page under the browser tab, and then drag out the tab as a separate page window to display the document information and document diagram page of the financial system at the same time, so as to perform document verification. However, this display method requires opening the page by opening a new tab each time, and requires manual adjustment of the sizes of the two pages.

[0115] To this end, an embodiment of the present application provides a split-screen display method for page content, by displaying a first application page, wherein the first application page includes a first application content area and a split-screen container area, and the first application content area contains one or more content items, so as to split an application page; in response to an add operation acting on the content item, the content item is added to the split-screen container area, so as to perform a simple addition operation within the same application page, without the need for a series of tedious operations such as creating a new tab, reopening the content item page, and dragging out the tab, thereby simplifying the split-screen display operation of the page content and improving operational efficiency; finally, in the split-screen container area, the content information of the content item is displayed, thereby simultaneously displaying the content item and the content information on one application page, improving the display effect, and eliminating the need to manually adjust the page size, further simplifying the split-screen display operation.

[0116] Please refer to Figure 1 , Figure 1 The present invention provides a flow chart of a method for displaying page content on a split screen. The method for displaying page content on a split screen in the present invention can be applied to terminal devices, including but not limited to smart phones, laptops, tablet computers, and desktop computers. Figure 1 As shown, the split-screen display method of the page content of this embodiment includes steps S101 to S103, which are described in detail as follows:

[0117] Step S101, displaying a first application page, wherein the first application page includes a first application content area and a split-screen container area, wherein the first application content area includes one or more content items.

[0118] In this step, the terminal device is provided with or externally connected to a display unit, which includes but is not limited to a display screen and a projector. The terminal device displays a first application page on the display unit, which may be an application page loaded based on a browser, such as an application page used when accessing the above financial system based on a browser.

[0119] Optionally, the first application content area is a display area of ​​a content item, and the content item is a content item on an application page loaded by the terminal device, such as a purchase contract page of a financial system, and the contract number on the purchase contract page is the content item. It is understandable that the content item can be a Document Object Model (DOM) node of a browser, and an operable attribute is added to a node element of the DOM node so that the content item can be operated.

[0120] Optionally, the split-screen container area is an area where a split-screen container is located. The split-screen container is used to read content information of a content item and display the content information, and it may be a preset browser plug-in.

[0121] Exemplarily, in one implementation, a split-screen container is inserted into a blank tab of a browser, the application page of the blank tab is split into a split-screen container area and a blank application content area, and then the application content is loaded into the blank application content area through the browser to obtain the application content area, thereby displaying the application page including the application content area and the split-screen container area. In another implementation, a split-screen container is inserted into an application page in which the browser has loaded the application content, and the application page is split into a split-screen container area and an application content area displaying the application content, thereby displaying the application page including the application content area and the split-screen container area.

[0122] Step S102: in response to an adding operation on the content item, adding the content item to the split-screen container area.

[0123] In this step, the adding operation includes but is not limited to a single-click operation, a multi-click operation (such as a double-click operation, a triple-click operation) and a drag operation. Exemplarily, in one embodiment, the terminal device moves the content item to the split-screen container area in response to the user long-pressing and clicking the content item with the mouse and moving the mouse. In another embodiment, the terminal device sends the content item to the split-screen container area in response to the user double-clicking the content item through the touch screen.

[0124] Optionally, when adding a content item, the adding operation carries the node element information of the content item, so that the split-screen container can read the content information of the content item according to the node element information. Optionally, when adding a content item, the adding operation carries the content information and the node element information of the content item, so that the split-screen container obtains the content information.

[0125] Step S103: displaying content information of the content item in the split-screen container area.

[0126] In this step, the content information is specific information of the content item, for example, if the content item is a contract item, the content information may be a contract table. Exemplarily, the content information of the content item is read according to the node element information of the content item added to the split-screen container area; and the content information is displayed in the split-screen container area based on a preset display method.

[0127] It should be noted that, compared with the current related technologies, this embodiment can simultaneously display content items and content information on one application page, improve the display effect, and simplify the split-screen display operation without manually adjusting the page size, thereby improving the operation efficiency. At the same time, the first application page of this embodiment does not affect other application pages, and smooth switching between multiple application pages can still be performed.

[0128] In some embodiments, Figure 1 Based on the embodiment shown, Figure 2 FIG. 1 is a flow chart of step S101 provided in an embodiment of the present application. Figure 1 The same steps will not be repeated here. Figure 2 As shown, step S101 includes steps S201 to S203, which are described in detail as follows:

[0129] Step S201, displaying a second application page, wherein the second application page includes a second application content area, and the second application content area is the first application content area before the second application page is split.

[0130] Step S202: If a split-screen start event of the second application page is monitored, the split-screen mode of the second application page is started, and the split-screen mode is used to split the second application page into the first application content area and the split-screen container area to obtain the first application page.

[0131] Step S203: display the first application page.

[0132] In this embodiment, the split screen start event is a computer event that starts the split screen mode, which can be a system event or a user event. Optionally, the split screen start event includes a user event triggered based on a preset shortcut command. The preset shortcut command includes but is not limited to a voice command, a remote control command, a mouse command, and a keyboard command. Exemplarily, the shortcut command is a keyboard shortcut key combination command, such as ctrl+shift+←.

[0133] In one embodiment, when the second application page is displayed, a keyboard shortcut key combination instruction is monitored based on a function (such as addEventListener) for listening to events and processing corresponding events. When "ctrl+shift+←" is triggered, it is determined that the split-screen start event of the second application page is monitored.

[0134] The second application page is an application page in the normal browsing mode. The split screen mode can be a function plug-in embedded in the browser. When the split screen mode is started, the function plug-in automatically splits the second application page.

[0135] For example, Figure 5 A schematic diagram of a second application page is shown. Figure 6 A schematic diagram showing the second application page after starting the split-screen mode is shown. Figure 7 FIG. 1 shows a schematic diagram of a first application page. Figure 5 As shown, the entire document page is the second application content area; Figure 6 As shown, Figure 5The second application page is partitioned into a second application content area with a reduced size and a split-screen container area. After adding the content item to the split-screen container area, the second application page is partitioned into a second application content area with a reduced size and a split-screen container area. Figure 7 The first application page.

[0136] In some embodiments, the step S202 includes:

[0137] If a split-screen start event of the second application page is monitored, inserting a split-screen container into the second application page;

[0138] Based on the second application content area and the split-screen container, the second application page is laid out to obtain the first application page.

[0139] In this embodiment, the split-screen container is used to read content information of the content item and display the content information. Exemplarily, after the split-screen container is inserted into the second application page, a split-screen container area is generated on the second application page; and then the split-screen container area and the second application content area are resized to obtain a first application page with a complete layout.

[0140] In some embodiments, the page layout step includes:

[0141] Based on a preset layout ratio, scaling the second application content area to obtain the first application content area and a blank area of ​​the first application page;

[0142] The split-screen container is filled into the blank area to obtain the split-screen container area.

[0143] In this embodiment, the preset layout ratio is the size ratio of the second application content area to the split screen container area. For example, if the preset layout ratio is 1:1, the second application content area and the split screen container area each occupy half of the first application page. Figure 5 The document page shown is resized to obtain the first application content area and the blank area, and the split screen container is embedded in the blank area to obtain Figure 6 The second application content area in split-screen mode is shown.

[0144] It is understandable that the preset layout ratio can be determined based on the content items and content information to be displayed in actual situations. For example, if the user wants to mainly view the content information, the ratio of the split-screen container area can be increased.

[0145] In some embodiments, Figure 1 Based on the embodiment shown, Figure 3 FIG. 1 is a flow chart of step S102 provided in an embodiment of the present application. Figure 1The same steps will not be repeated here. Figure 3 As shown, step S102 specifically includes step S301, which is described in detail as follows:

[0146] Step S301 , in response to a drag operation on the content item, drag the content item to the split-screen container area based on a drag track of the drag operation.

[0147] In this embodiment, the drag operation is a computer operation added to the browser node based on a computer language, and the computer language includes but is not limited to javascript and html, and the html can be specifically html5. The drag track is the moving track of the screen focus after the drag operation is triggered, and the screen focus can be the mouse position or the user touch screen position of the touch screen.

[0148] Optionally, a draggable attribute is added to the node element of the content item, and the node element includes but is not limited to a field layout panel, an advanced panel, a foldable flex panel, an attachment, and a tab, etc. Exemplarily, a draggable attribute Draggable is added to the DOM node element corresponding to the content item based on html5, for example: <div draggable="true"> .

[0149] In some embodiments, the drag operation includes a selection operation, a drag operation, and a release operation, and the step S301 includes:

[0150] In response to a selection operation on the content item, displaying a zoomed view of the content item;

[0151] In response to a drag operation on the content item, dragging the zoomed image to the split-screen container area based on the dragging trajectory;

[0152] In response to a release operation on the content item, the content item is released in the split-screen container area, and the display of the zoomed image is canceled.

[0153] In this embodiment, the selection operation may be a selection operation triggered by a user's click operation, the drag operation may be a drag operation triggered by a user's long press and move operation, and the release operation may be a drag operation triggered by the user's release of the long press operation. The zoomed image may be a zoomed image of the content information, or a preset pattern of the content item. For example, if the content information is a contract table, the zoomed image is a pattern after the contract table is zoomed. The zoomed image may be a reduced image (or thumbnail) or an enlarged image.

[0154] In some embodiments, the selection operation includes:

[0155] In response to a selection operation on the content item, recording node element information of the content item;

[0156] According to the node element information, a zoomed image corresponding to the node element information is displayed.

[0157] In this embodiment, the node element information is the DOM node element information of the content item, and the DOM node element information includes scale attribute information, which can be used to set the inline style of the node element. Exemplarily, when the selection operation is triggered, the DOM node element information of the content item is read and recorded, and the inline style of the content item is modified by modifying the scale attribute information in the DOM node element information, so as to achieve the purpose of generating and displaying the zoom map.

[0158] It can be understood that, by recording the node element information of the content items, this embodiment can also enable the split-screen container to distinguish different content items under the same application page, so that the process of adding content items to the split-screen container is more accurate.

[0159] Optionally, the step of recording the node element information includes:

[0160] In response to a selection operation on the content item, triggering a first preset drag event;

[0161] Based on the first preset drag event, a preset data acquisition function is called to record the node element information of the content item.

[0162] In this optional embodiment, the first preset drag event may be an OnDragstart event, and the preset data acquisition function may be dataTransfer.setData. Exemplarily, an OnDragstart event is added to a content item based on HTML5, and when a user clicks a content item, the OnDragstart event is triggered to call dataTransfer.setData to record the key and type of the content item.

[0163] Optionally, the step of displaying the zoomed image includes:

[0164] Calling a preset node copy function to copy the node element information of the content item and generate new node element information;

[0165] Changing the style attribute in the new node element information to generate the zoomed image;

[0166] The zoomed image is displayed.

[0167] In this embodiment, the preset node copy function may be a cloneNode function, and the style attribute may be a scale attribute. Exemplarily, the node element information is copied based on the cloneNode function, and dataTransfer.setDragImage is used to reduce the scale attribute to 0.3 times of the original value to reduce the style attribute, thereby achieving the purpose of generating a scaled image.

[0168] In some embodiments, the release operation includes:

[0169] In response to a release operation on the content item, releasing the content item in the split-screen container area and triggering a second preset drag event;

[0170] Based on the second preset drag event, the display of the zoomed image is canceled.

[0171] In this embodiment, the second preset drag event may be an Ondragend event. Exemplarily, an Ondragend event is added to the content item based on HTML5, and when the mouse button is released, the Ondragend event is triggered, and the zoom image displayed during the dragging process is removed.

[0172] In some embodiments, the step S301 includes:

[0173] In response to a drag operation on the content item, dragging the content item based on the drag trajectory;

[0174] If it is detected that the content item enters the area range of the split-screen container area, a target background color of the split-screen container area is displayed, where the target background color is a first color used to indicate that the split-screen container area allows the content item to be placed, or a second color used to indicate that the split-screen container area does not allow the content item to be placed;

[0175] If the background color is the first color, the content item is released to complete the drag operation.

[0176] In this embodiment, since the split-screen container may not be able to display other content items due to certain reasons (for example, the split-screen container is already occupied), in order to avoid the user from continuously performing drag operations without knowing it, this embodiment prompts the user of the available status of the current split-screen container with the target background color when the content item enters the split-screen container area, thereby improving the user experience.

[0177] Optionally, the step of displaying the target background color includes:

[0178] Listen for the third preset drag event;

[0179] If it is monitored that the third preset drag event is triggered, it is determined that the content item enters the area range of the split-screen container area, and the target background color of the split-screen container area is displayed.

[0180] In this optional embodiment, the third preset drag event may be an OnDragEnter event. Exemplarily, an OnDragEnter event is added to the split-screen container based on HTML5, and the target background color of the split-screen container is triggered by monitoring the OnDragEnter event to indicate the available state of the current split-screen container.

[0181] In some embodiments, Figure 1 Based on the embodiment shown, Figure 4 FIG. 1 is a flow chart of step S103 provided in an embodiment of the present application. Figure 1 The same steps will not be repeated here. Figure 4 As shown, step S103 includes steps S401 to S403, which are described in detail as follows:

[0182] Step S401, reading the first inline style and content information of the content item;

[0183] Step S402, adjusting the first inline style of the content item according to the area size of the split-screen container area to obtain a second inline style;

[0184] Step S403: display the content information in the split-screen container area based on the second inline style.

[0185] In this embodiment, the inline style is an inline style, which is used to apply a node element once and only once, so as to facilitate the quick switching of content split screens under the same application page. Exemplarily, the inline style is the style attribute in the node element information, and the style attribute includes information such as position, left, top, width and height. By modifying the style style, the first inline style is adjusted to obtain the second inline style.

[0186] In some embodiments, Figure 4 Based on the embodiment shown, after step S403, the following further includes:

[0187] Monitoring page window changes of the first application page;

[0188] If a change in the page window of the first application page is detected, window adaptation is performed on the content information of the split-screen container area;

[0189] The content information after the display window is adapted.

[0190] In this embodiment, since the first application page is a browser page, it can change based on changes in the browser window. Therefore, in order to improve the display effect, the content information is also changed with the window (ie, window adaptation).

[0191] Optionally, the window adaptation step includes:

[0192] Based on a preset window change function, monitoring page window changes of the first application page;

[0193] If it is monitored that the page window of the first application page changes, the second inline style is adjusted to obtain a third inline style;

[0194] Based on the third inline style, the content information is displayed in the split-screen container area.

[0195] In this optional embodiment, the preset window change function may be a ResizeObserve function. Exemplarily, ResizeObserve is used to monitor page fenp window changes, and when the window changes, the style (width, height, left) is changed, so that when the window changes, the content information in the split-screen container can also change accordingly.

[0196] In some embodiments, Figure 4 Based on the embodiment shown, after step S401, the following further includes:

[0197] Triggering the preset publish-subscribe event;

[0198] The first inline style is cached based on the preset publish-subscribe event.

[0199] In this embodiment, the preset publish-subscribe event is a computer event implemented based on a publish / subscribe mechanism. Optionally, when the first inline style and content information of a content item are read, a publish-subscribe event is triggered, wherein the split-screen container is the publisher and the content item is the subscriber, that is, the split-screen container publishes to read the first inline style and content information of the content item, and the content item caches the first inline style through an asynchronous callback method.

[0200] This embodiment uses publish-subscribe events to support simple broadcast communication. When the state of an object changes, the subscribed object will be automatically notified. The coupling between publishers and subscribers is reduced. The publisher only needs to publish messages and does not need to care about how the messages are used by subscribers. Subscribers only need to listen to the publisher's messages.

[0201] It is understandable that when the first inline style is adjusted, the cached first inline style is updated by the adjusted first inline style. For example, after the first inline style is adjusted to the second inline style, the first inline style is updated by the second inline style, that is, the second inline style is used as the new first inline style.

[0202] Optionally, after step S403, the method further includes:

[0203] If a split-screen closing event of the first application page is monitored, the inline style of the content item is restored based on the first inline style.

[0204] In this optional embodiment, the split screen closing event is a computer event for closing the split screen mode, which can be a system event or a user event. Optionally, the split screen closing event includes a user event triggered based on a preset shortcut command. The preset shortcut command includes but is not limited to a voice command, a remote control command, a mouse command, and a keyboard command. Exemplarily, the shortcut command is a keyboard shortcut key combination command, such as ctrl+shift+←.

[0205] In one embodiment, when the first application page is displayed, keyboard shortcut key combination instructions are monitored based on a function (such as addEventListener) for listening to events and processing corresponding events. When "ctrl+shift+←" is triggered, it is determined that the split-screen closing event of the first application page is monitored.

[0206] It should be noted that this embodiment also combines the preset distribution subscription event and uses the first inline style of the preset distribution subscription event to restore the content item, thereby improving the restoration efficiency and accuracy.

[0207] By way of example and not limitation, Figure 8 A schematic diagram of an application scenario flow of a split-screen display method of page content provided in an embodiment of the present application is shown.

[0208] like Figure 8 As shown, enter the document page and use AddEventListener to listen to the shortcut key (ctrl+shift+←) to listen to whether the split-screen mode is started. If the shortcut key is listened to, the split-screen mode is started for the document page to display the document area and the split-screen container area, where the document area and the split-screen container area each occupy 50% of the width by default.

[0209] When the split-screen mode is turned on, the draggable attribute (Draggable) is added to the DOM node element where the content items of the current document page (such as the field layout panel, advanced panel, foldable flex panel, attachments and tabs) are located. The pseudo code is: <div draggable="true">; and the first drag event (OnDragstart) and the second drag event (OnDragend) are added. The pseudo code is: <div ondragstart="function(){}"ondragend="function(){}">.

[0210] When you start dragging a content item (i.e., select a content item), the OnDragstart event is triggered, and the dataTransfer.setData function is used to record the key and type of the current content item, and the cloneNode function is used to copy the DOM node element information of the current content item, and the dataTransfer.setDragImage function is used to set the scaled image during dragging: the dataTransfer.setDragImage(Element) function is used to set a custom image, where Element is a DOM node element on the page. The scale attribute of the node element is modified to reduce it to 0.3 times the original size, thereby achieving the effect of a scaled image.

[0211] When the content item is dragged into the split-screen container area, the OnDragEnter event of the split-screen container is triggered, and the target background color of the split-screen container is displayed to indicate the available status of the current split-screen container.

[0212] After releasing the content item, trigger the OnDragend event to call the dataTransfer.getData function to obtain the key and type of the currently placed content item, and trigger the corresponding publish-subscribe event (the publisher is the split-screen container, and the subscriber is the content module). In the subscriber event callback, cache the inline style of the current content item, and modify the position, left, top, width, and height in the style of the current content item to achieve the effect of adaptive display of the content information of the content item in the split-screen container. Use the ResizeObserve function to monitor the changes of the fenp window of the current application page. When the window changes, adjust the corresponding style (width, height, left) according to the window changes to achieve window adaptation.

[0213] When the split-screen mode is started, if the shortcut key (ctrl+shift+←) is listened again, the split-screen mode is turned off, and the style of the content item is restored based on the inline style cached in the distribution subscription event, so that the content item is restored to the document page.

[0214] It should be noted that compared with the current related split-screen technology, this application has the following scenario characteristics:

[0215] 1. Content split screen only affects the content of the current tab, and the exclusive mode is still maintained for other tabs. The split screen does not affect the content display of other pages. For example, if one tab has a page A split screen based on the above method, and another tab has a page B split screen based on the above method, the split screen content of different application pages can be displayed by switching tabs.

[0216] 2. Combine some prefabricated split-screen content with business scenarios to directly display the content items in the business scenarios, and even customize the product and page demands according to user habits. For example, for some document pages, some users are used to entering them individually, while some users are used to combining and entering them. This application caches inline styles, and directly displays the form corresponding to the user's habits (such as combined form or separate form) the next time the page is opened.

[0217] Fig. 9 The flowchart of a multi-page display method provided in the embodiment of the present application is shown in FIG. The multi-page display method in the embodiment of the present application can be applied to a terminal device, which includes but is not limited to a smart phone, a laptop, a tablet computer, a desktop computer, and other devices. Fig. 9 As shown, the multi-page display method of this embodiment includes steps S901 to S903, which are described in detail as follows:

[0218] Step S901, obtaining multiple target application pages, each of which includes an application content area and a split-screen container area, the application content area includes one or more content items, and the split-screen container area displays content information of the content items;

[0219] Step S902, rearrange the plurality of target application pages;

[0220] Step S903: display the rearranged plurality of target application pages.

[0221] In this embodiment, the target application page is an application page obtained by splitting the screen based on the split-screen display method of the above page content. The rearrangement may be a split-screen function provided by the terminal device.

[0222] For example, for a tab containing a page A that is split based on the above method (including application content area a1 and split-screen container area a2), and another tab containing a page B that is split based on the above method (including application content area b1 and split-screen container area b2), the split-screen function of the terminal device is used to display page A and page B simultaneously, and ultimately the application content area a1, split-screen container area a2, application content area b1 and split-screen container area b2 can be displayed simultaneously on one display screen.

[0223] It is understandable that the split-screen process of the above-mentioned target application page can refer to the description of the split-screen display method of the above-mentioned page content, which will not be repeated here.

[0224] In order to implement the split-screen display method of the page content corresponding to the above method embodiment, so as to achieve the corresponding functions and technical effects. Fig.10 , Fig.10 The structural block diagram of a split-screen display device for page content provided in an embodiment of the present application is shown. For the convenience of explanation, only the parts related to the present embodiment are shown. The split-screen display device for page content provided in an embodiment of the present application includes:

[0225] A first display module 1001 is used to display a first application page, wherein the first application page includes a first application content area and a split-screen container area, and the first application content area includes one or more content items;

[0226] An adding module 1002, configured to respond to an adding operation on the content item and add the content item to the split-screen container area;

[0227] The second display module 1003 is used to display the content information of the content item in the split-screen container area.

[0228] In some embodiments, the first display module 1001 includes:

[0229] A first display submodule is used to display a second application page, where the second application page includes a second application content area, where the second application content area is the first application content area before the second application page is split;

[0230] a start submodule, configured to start a split-screen mode of the second application page if a split-screen start event of the second application page is monitored, wherein the split-screen mode is used to split the second application page into the first application content area and the split-screen container area to obtain the first application page;

[0231] The second display submodule is used to display the first application page.

[0232] In some embodiments, the promoter module comprises:

[0233] an inserting unit, configured to insert a split-screen container into the second application page if a split-screen start event of the second application page is monitored;

[0234] A layout unit is used to perform page layout on the second application page based on the second application content area and the split-screen container to obtain the first application page.

[0235] In some embodiments, the layout unit includes:

[0236] a scaling subunit, configured to scale the second application content area based on a preset layout ratio to obtain the first application content area and a blank area of ​​the first application page;

[0237] The filling subunit is used to fill the split-screen container into the blank area to obtain the split-screen container area.

[0238] In some embodiments, the split-screen start event includes a split-screen start event triggered based on a preset shortcut instruction.

[0239] In some embodiments, the adding operation is a dragging operation, and the adding module 1002 includes:

[0240] The dragging submodule is used to respond to the dragging operation on the content item and drag the content item to the split-screen container area based on the dragging track of the dragging operation.

[0241] In some embodiments, the drag operation includes a selection operation, a drag operation and a release operation, and the drag submodule includes:

[0242] a selection unit, configured to display a zoomed view of the content item in response to a selection operation on the content item;

[0243] a dragging unit, configured to respond to a dragging operation on the content item and drag the zoomed image to the split-screen container area based on the dragging trajectory;

[0244] A releasing unit is used to respond to a release operation on the content item, release the content item in the split-screen container area, and cancel the display of the zoomed image.

[0245] In some embodiments, the release unit comprises:

[0246] A first releasing subunit, configured to respond to a release operation on the content item, release the content item in the split-screen container area, and trigger a second preset drag event;

[0247] The cancel subunit is used to cancel the display of the zoom image based on the second preset drag event.

[0248] In some embodiments, the selection unit includes:

[0249] A recording subunit, configured to record node element information of the content item in response to a selection operation on the content item;

[0250] The first display subunit is used to display a zoomed image corresponding to the node element information according to the node element information.

[0251] In some embodiments, the recording subunit is specifically used to:

[0252] In response to a selection operation on the content item, triggering a first preset drag event;

[0253] Based on the first preset drag event, a preset data acquisition function is called to record the node element information of the content item.

[0254] In some embodiments, the first display subunit is specifically used for:

[0255] Calling a preset node copy function to copy the node element information of the content item and generate new node element information;

[0256] Changing the style attribute in the new node element information to generate the zoomed image;

[0257] The zoomed image is displayed.

[0258] In some embodiments, the dragging unit includes:

[0259] a dragging subunit, configured to respond to a drag operation on the content item and drag the content item based on the dragging track;

[0260] A second display subunit is used to display a target background color of the split-screen container area if it is detected that the content item enters the area range of the split-screen container area, wherein the target background color is a first color used to indicate that the split-screen container area allows the content item to be placed, or a second color used to indicate that the split-screen container area does not allow the content item to be placed;

[0261] The second releasing subunit is used to release the content item if the background color is the first color, so as to complete the drag operation.

[0262] In some embodiments, the second display subunit is specifically used for:

[0263] Listen for the third preset drag event;

[0264] If it is monitored that the third preset drag event is triggered, it is determined that the content item enters the area range of the split-screen container area, and the target background color of the split-screen container area is displayed.

[0265] In some embodiments, the drag submodule further includes:

[0266] The adding unit is used to add a draggable attribute to the node element of the content item.

[0267] In some embodiments, the second display module 1003 includes:

[0268] A reading submodule, used for reading the first inline style and content information of the content item;

[0269] an adjusting submodule, configured to adjust the first inline style of the content item according to the area size of the split-screen container area to obtain a second inline style;

[0270] The third display submodule is used to display the content information in the split-screen container area based on the second inline style.

[0271] In some embodiments, the second display module 1003 further includes:

[0272] A monitoring submodule, used for monitoring page window changes of the first application page;

[0273] An adaptive submodule, configured to perform window adaptation on the content information of the split-screen container area if a change in the page window of the first application page is detected;

[0274] The fourth display submodule is used to display the content information after the window is adapted.

[0275] In some embodiments, the adaptive submodule includes:

[0276] A monitoring unit, configured to monitor a page window change of the first application page based on a preset window change function;

[0277] an adjusting unit, configured to adjust the second inline style to obtain a third inline style if a change in the page window of the first application page is detected;

[0278] A display unit is used to display the content information in the split-screen container area based on the third inline style.

[0279] In some embodiments, the second display module 1003 further includes:

[0280] A triggering submodule, used to trigger the preset publish-subscribe event;

[0281] The cache submodule is used to cache the first inline style based on the preset publish-subscribe event.

[0282] In some embodiments, the second display module 1003 further includes:

[0283] The restoration submodule is used to restore the inline style of the content item based on the first inline style if a split-screen closing event of the first application page is monitored.

[0284] The above-mentioned multi-page display device can implement the multi-page display method of the above-mentioned method embodiment. The options in the above-mentioned method embodiment are also applicable to this embodiment and will not be described in detail here. The rest of the contents of the embodiment of this application can refer to the contents of the above-mentioned method embodiment, and will not be repeated in this embodiment.

[0285] In order to execute the multi-page display method corresponding to the above method embodiment, to achieve the corresponding functions and technical effects. Fig.11 , Fig.11 The structural block diagram of a multi-page display device provided in an embodiment of the present application is shown. For the convenience of explanation, only the parts related to the present embodiment are shown. The multi-page display device provided in an embodiment of the present application includes:

[0286] The acquisition module 1101 is used to acquire multiple target application pages, each of which includes an application content area and a split-screen container area, the application content area includes one or more content items, and the split-screen container area displays content information of the content items;

[0287] A rearrangement module 1102, configured to rearrange the plurality of target application pages;

[0288] The third display module 1103 is used to display the rearranged plurality of target application pages.

[0289] The above-mentioned multi-page display device can implement the multi-page display method of the above-mentioned method embodiment. The options in the above-mentioned method embodiment are also applicable to this embodiment and will not be described in detail here.

[0290] Fig.12 This is a schematic diagram of the structure of a terminal device provided in an embodiment of the present application. Fig.12 As shown, the terminal device 12 of this embodiment includes: at least one processor 120 ( Fig.12 Only one is shown in the figure) a processor, a memory 121, and a computer program 122 stored in the memory 121 and executable on the at least one processor 120, and when the processor 120 executes the computer program 122, the steps in any of the above method embodiments are implemented.

[0291] The terminal device 12 may be a computing device such as a smart phone, a laptop, a tablet computer, and a desktop computer. The terminal device may include but is not limited to a processor 120 and a memory 121. Those skilled in the art will appreciate that Fig.12 It is only an example of the terminal device 12 and does not constitute a limitation on the terminal device 12. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components, for example, it may also include input and output devices, network access devices, etc.

[0292] The processor 120 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0293] In some embodiments, the memory 121 may be an internal storage unit of the terminal device 12, such as a hard disk or memory of the terminal device 12. In other embodiments, the memory 121 may also be an external storage device of the terminal device 12, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the terminal device 12. Further, the memory 121 may also include both an internal storage unit of the terminal device 12 and an external storage device. The memory 121 is used to store an operating system, an application program, a boot loader (BootLoader), data, and other programs, such as the program code of the computer program, etc. The memory 121 may also be used to temporarily store data that has been output or is to be output.

[0294] In addition, an embodiment of the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in any of the above method embodiments are implemented.

[0295] An embodiment of the present application provides a computer program product. When the computer program product is run on a terminal device, the terminal device implements the steps in the above-mentioned method embodiments when executing the computer program product.

[0296] In several embodiments provided in the present application, it is understood that each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from that marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved.

[0297] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application can essentially be embodied in the form of a software product, or in other words, the part that contributes to the prior art or the part of the technical solution. The computer software product is stored in a storage medium, including several instructions for enabling a terminal device to execute all or part of the steps of the methods described in the various embodiments of the present application. The aforementioned storage media include: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk, and other media that can store program codes.

[0298] The specific embodiments described above further describe the purpose, technical solutions and beneficial effects of the present application in detail. It should be understood that the above description is only a specific embodiment of the present application and is not intended to limit the scope of protection of the present application. It is particularly pointed out that for those skilled in the art, any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of protection of the present application.

Claims

1. A split-screen display method for page content, characterized in that: include: Displaying a first application page, the first application page including a first application content area and a split-screen container area, the first application content area including one or more content items; In response to an adding operation on the content item, the content item is added to the split-screen container area; wherein when the content item enters the split-screen container area, an available state of the split-screen container area is indicated with a target background color; Displaying content information of the content item in the split-screen container area; Monitoring page window changes of the first application page; If a change in the page window of the first application page is detected, window adaptation is performed on the content information of the split-screen container area; The displaying of content information of the content item in the split-screen container area includes: Reading first inline style and content information of the content item; According to the area size of the split-screen container area, adjusting the first inline style of the content item to obtain a second inline style; Based on the second inline style, displaying the content information in the split-screen container area; After reading the first inline style and content information of the content item, the method further includes: Trigger preset publish and subscribe events; The first inline style is cached based on the preset publish-subscribe event.

2. The split-screen display method of page content according to claim 1, characterized in that: The displaying of the first application page includes: Displaying a second application page, where the second application page includes a second application content area, where the second application content area is the first application content area before the second application page is split; If a split-screen start event of the second application page is monitored, a split-screen mode of the second application page is started, where the split-screen mode is used to split the second application page into the first application content area and the split-screen container area to obtain the first application page; The first application page is displayed.

3. The split-screen display method of page content according to claim 1, characterized in that: The adding operation is a drag operation, and the responding to the adding operation on the content item, adding the content item to the split-screen container area, includes: In response to a drag operation on the content item, the content item is dragged to the split-screen container area based on a drag track of the drag operation.

4. The method for displaying page content on a split screen as claimed in claim 3, characterized in that: The drag operation includes a selection operation, a drag operation and a release operation, and the response to the drag operation on the content item, based on the drag track of the drag operation, dragging the content item to the split-screen container area, includes: In response to a selection operation on the content item, displaying a zoomed view of the content item; In response to a drag operation on the content item, dragging the zoomed image of the content item to the split-screen container area based on the drag trajectory; In response to a release operation on the content item, the content item is released in the split-screen container area, and the display of the zoomed image is canceled.

5. The method for displaying page content on a split screen as claimed in claim 4, characterized in that: The step of displaying a zoomed view of the content item in response to a selection operation on the content item includes: In response to a selection operation on the content item, recording node element information of the content item; According to the node element information, a zoomed image corresponding to the node element information is displayed.

6. The method for displaying page content on a split screen as claimed in claim 5, characterized in that: The displaying, according to the node element information, a zoomed image corresponding to the node element information includes: Calling a preset node copy function to copy the node element information of the content item and generate new node element information; Changing the style attribute in the new node element information to generate the zoomed image; The zoomed image is displayed.

7. The method for displaying page content on a split screen as claimed in claim 3, characterized in that: The step of responding to the drag operation on the content item and dragging the content item to the split-screen container area based on a drag track of the drag operation includes: In response to a drag operation on the content item, dragging the content item based on the drag trajectory; If it is detected that the content item enters the area range of the split-screen container area, a target background color of the split-screen container area is displayed, where the target background color is a first color used to indicate that the split-screen container area allows the content item to be placed, or a second color used to indicate that the split-screen container area does not allow the content item to be placed; If the background color is the first color, the content item is released to complete the drag operation.

8. The method for displaying page content on a split screen as claimed in claim 1, characterized in that: After displaying the content information in the split-screen container area based on the second inline style, the method further includes: If a split-screen closing event of the first application page is monitored, the inline style of the content item is restored based on the first inline style.

9. A multi-page display method, characterized in that: include: Acquire multiple target application pages, each of which includes an application content area and a split-screen container area, the application content area includes one or more content items, and the split-screen container area displays content information of the content items; wherein when the content item enters the split-screen container area, the available state of the split-screen container area is indicated with a target background color; Rearranging a plurality of target application pages; Displaying the rearranged target application pages; Monitor page window changes of application pages; If the page window of the application page is monitored to change, the content information of the split-screen container area is adapted to the window; The split-screen container area displays content information of the content item, including: Reading first inline style and content information of the content item; According to the area size of the split-screen container area, adjusting the first inline style of the content item to obtain a second inline style; Based on the second inline style, displaying the content information in the split-screen container area; After reading the first inline style and content information of the content item, the method further includes: Trigger preset publish and subscribe events; The first inline style is cached based on the preset publish-subscribe event.

10. A split-screen display device for page content, characterized in that: include: A first display module, used to display a first application page, the first application page includes a first application content area and a split-screen container area, the first application content area includes one or more content items; an adding module, configured to respond to an adding operation on the content item and add the content item to the split-screen container area; wherein when the content item enters the split-screen container area, an available state of the split-screen container area is indicated with a target background color; A second display module, used to display content information of the content item in the split-screen container area; An adaptive submodule, configured to perform window adaptation on the content information of the split-screen container area if a change in the page window of the first application page is detected; The second display module includes: A reading submodule, used for reading the first inline style and content information of the content item; an adjusting submodule, configured to adjust the first inline style of the content item according to the area size of the split-screen container area to obtain a second inline style; A third display submodule, configured to display the content information in the split-screen container area based on the second inline style; The second display module further includes: The trigger submodule is used to trigger preset publish-subscribe events; The cache submodule is used to cache the first inline style based on the preset publish-subscribe event.

11. A multi-page display device, characterized in that: include: an acquisition module, configured to acquire a plurality of target application pages, each of the target application pages comprising an application content area and a split-screen container area, the application content area comprising one or more content items, the split-screen container area displaying content information of the content items; wherein when the content item enters the split-screen container area, the available state of the split-screen container area is indicated with a target background color; A rearrangement module, used for rearranging the plurality of target application pages; A third display module, used to display the rearranged plurality of target application pages; Monitor page window changes of application pages; If the page window of the application page is monitored to change, the content information of the split-screen container area is adapted to the window; The split-screen container area displays content information of the content item, including: Reading first inline style and content information of the content item; According to the area size of the split-screen container area, adjusting the first inline style of the content item to obtain a second inline style; Based on the second inline style, displaying the content information in the split-screen container area; After reading the first inline style and content information of the content item, the method further includes: Trigger preset publish and subscribe events; The first inline style is cached based on the preset publish-subscribe event.

12. A terminal device, characterized in that: It includes a processor and a memory, the memory is used to store a computer program, and when the computer program is executed by the processor, it implements the split-screen display method of page content as described in any one of claims 1 to 8, or the multi-page display method as described in claim 9.

13. A computer-readable storage medium, characterized in that: It stores a computer program, which, when executed by a processor, implements the split-screen display method of page content as described in any one of claims 1 to 8, or the multi-page display method as described in claim 9.

Images