Web page interconnection method, device, equipment and medium

Abstract

The present invention relates to the field of page display technology, and discloses a web page interconnection method, apparatus, device, and medium. The method comprises: using an iframe tool to embed a side window button component on a first page linked to a web page address; upon detecting that the side window button component is triggered, popping up an options bar in an area adjacent to the side window button component; receiving a first jump instruction, switching the options bar to an input link window; upon receiving a confirmation instruction, popping up a second page corresponding to the page address on the side of the first page using an iframe tool; the confirmation instruction is generated after a user enters and confirms the page address in the input link window; and based on the iframe tool, transmitting operation data between the first and second pages through an interconnection channel. The present invention enables a PC-side page to display a mobile terminal page using the iframe tool, and performs an interconnection test between the two on the PC side, thereby increasing the diversity of PC-side browsers.

Description

Technical Field

[0001] The present invention relates to the field of page display technology, and in particular to a web page interconnection method, device, equipment and medium. Background Art

[0002] At present, most application software (APP) can be converted into the form of H5 pages or mini-programs. The three can communicate with each other and can be opened simultaneously on mobile terminals for interconnection testing. However, in the existing technology, the web pages on the PC and the application software (APP) cannot be interconnected, and the application software cannot be opened on the PC for interconnection testing. This requires opening the PC and mobile terminals at the same time during the test process, and switching between the two interfaces in turn for testing, which brings great convenience. Summary of the Invention

[0003] The present invention provides a web page interconnection method, apparatus, computer equipment and storage medium, which realize mobile interconnection of applications between PC and mobile terminals, facilitate users to operate Web pages and mobile pages simultaneously in the browser of PC, improve the diversity of PC browsers and enhance user satisfaction.

[0004] A web page interconnection method, comprising:

[0005] Use the iframe tool to embed a side window button component on the first page linked to the web page address;

[0006] When it is detected that the side window button assembly is triggered, an option bar pops up in an area adjacent to the side window button assembly; the option bar includes a change link item;

[0007] Receiving a first jump instruction, switching the option bar to an input link window; the first jump instruction is an instruction triggered by the user confirming to select the modified link item;

[0008] After receiving the confirmation instruction, a second page corresponding to the page address pops up on the side of the first page through the iframe tool; the confirmation instruction is generated after the user enters the page address in the input link window and confirms it; the page address is the address of the mobile terminal application corresponding to the web page address;

[0009] Based on the iframe tool, operation data between the first page and the second page is transmitted through an interconnection channel.

[0010] A web page interconnection device, comprising:

[0011] A nested module is used to nest a side window button component on the first page linked to the web page address through the iframe tool;

[0012] A detection module, configured to pop up an option bar in an area adjacent to the side window button assembly when detecting that the side window button assembly is triggered; the option bar includes a change link item;

[0013] A receiving module, configured to receive a first jump instruction and switch the option bar to a link input window; the first jump instruction is an instruction triggered by the user confirming to select the link change item;

[0014] a pop-up module configured to, after receiving a confirmation instruction, pop up a second page corresponding to the page address on the side of the first page via the iframe tool; the confirmation instruction is generated after the user enters the page address in the link input window and confirms it; the page address is the address of the mobile terminal application corresponding to the web page address;

[0015] A transmission module is used to transmit the operation data between the first page and the second page through an interconnection channel based on the iframe tool.

[0016] A computer device comprises a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the web page interconnection method when executing the computer program.

[0017] A computer-readable storage medium stores a computer program, which implements the steps of the web page interconnection method when executed by a processor.

[0018] The web page interconnection method, device, computer equipment and storage medium provided by the present invention use an iframe tool to embed a side window button component on a first page linked to a web page address; when it is detected that the side window button component is triggered, an option bar pops up in an area adjacent to the side window button component; the option bar includes a change link item; a first jump instruction is received to switch the option bar to an input link window; the first jump instruction is an instruction for the user to confirm the selection of the change link item triggered; after receiving the confirmation instruction, a second page corresponding to the page address is popped up on the side of the first page through the iframe tool; the confirmation instruction is the user inputting the page in the input link window The address is generated after confirmation; the page address is the address of the mobile terminal application corresponding to the web page address; based on the iframe tool, the operation data between the first page and the second page is transmitted through the interconnection channel. Therefore, it is realized that the interface displayed on the mobile terminal is conveniently opened on the PC side through the iframe tool, and the mobile interconnection of applications between the PC side and the mobile terminal is realized, which is convenient for users to operate Web pages and mobile pages in the browser of the PC side at the same time, so as to achieve the effect of data interconnection of different pages, facilitate the page of the PC side to display the page of the mobile terminal, and operate the interconnection test between the two on the PC side, thereby improving the diversity of browsers on the PC side and improving user satisfaction. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0020] Figure 1 This is a schematic diagram of an application environment of a web page interconnection method according to an embodiment of the present invention;

[0021] Figure 2 is a flow chart of a web page interconnection method according to an embodiment of the present invention;

[0022] Figure 3 is a flow chart of step S40 of the web page interconnection method according to one embodiment of the present invention;

[0023] Figure 4 This is a flow chart of step S403 of the web page interconnection method according to one embodiment of the present invention;

[0024] Figure 5 This is a principle block diagram of a web page interconnection device according to one embodiment of the present invention;

[0025] Figure 6is a schematic diagram of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0026] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0027] The webpage interconnection method provided by the present invention can be applied in Figure 1 In an application environment, a client (computer device) communicates with a server via a network. The client (computer device) includes, but is not limited to, various personal computers, laptops, smartphones, tablet computers, and portable wearable devices. The server can be implemented as a standalone server or a server cluster consisting of multiple servers.

[0028] In one embodiment, if Figure 2 As shown, a web page interconnection method is provided, and its technical solution mainly includes the following steps S10-S50:

[0029] S10, using the iframe tool, embed a side window button component on the first page linked to the web page address.

[0030] It can be understood that the first page linked to the web page address is displayed on the browser on the PC side, the web page address is a URL, and the first page is the page corresponding to the web page address opened on the PC side. The nesting method is to add a button or cursor in the upper left corner or upper right corner of the page, that is, inserting a button component code on the native first page through the iframe tool to display the button component on the first page. The side window button component is a window button component that can pop up and jump on the side. The iframe tool is a tool for iframe layout built using the iframe framework, and is compatible with the plug-in tool of application software. The iframe tool is installed as a plug-in on the PC side and can drive the plug-in tool of application software. The page nesting function can be realized through the tag attributes in the iframe tool. The iframe tool contains tag attributes such as text arrangement, border, size, scroll bar, button, etc. The side window button component is a component developed by the iframe tool.

[0031] The browser is a software program on a PC that can open and browse web pages, and the browser is installed on the PC.

[0032] In one embodiment, before step S10, that is, before embedding a side window button component on the first page linked to the webpage address using the iframe tool, the following steps are included:

[0033] The web page address input is received on the browser.

[0034] Understandably, after the web page address is input on the browser, the input web page address is confirmed by pressing the "Enter" key or the "Go" button, and the web page address is received by the browser on the PC.

[0035] The web page data linked to the web page address is loaded.

[0036] It can be understood that the loading process is to construct an HTTP Request request through the browser, send the constructed HTTP Request request to the Internet server, receive the web page data in response to the HTTP Request request from the Internet server, and use the loading module to configure the configuration file in the browser according to the web page data, and store it in the cache pool. Finally, the web page data is loaded by the browser based on the configured configuration file. The web page data is the relevant data involved in displaying the page address.

[0037] The process of constructing the HTTP Request is to perform DNS resolution on the page address, resolve the page address into an IP address (Internet Protocol Address), and construct an HTTP request message in the format of the TCP / IP protocol.

[0038] The webpage data is rendered to obtain the first page and the rendered first page is displayed.

[0039] It can be understood that the rendering process is to parse the web page data with HTML, CSS and JS, and build a rendering display tree according to the results of the parsing, and finally lay out and render the nodes of each rendering display tree according to the rendering display tree. The construction of the rendering display tree according to the parsing results includes building a DOM tree, a Render tree and a RenderLayer tree, and merging the DOM tree, the Render tree and the RenderLayer tree to obtain a rendering display tree, thereby rendering the web page data to obtain the first page, and displaying the rendered first page in the browser.

[0040] Among them, the HTML parsing includes the processes of decoding, word segmentation, parsing, and tree building. The decoding is to decode the encoded byte stream received on the network into Unicode characters; the word segmentation is to cut the Unicode character stream into individual words (Tokens) according to certain word segmentation rules; the parsing is to create corresponding nodes (Node) according to the semantics of the words; the tree building is to associate the nodes together to create a DOM tree; the CSS parsing is to match the HTML elements that meet each CSS rule, and then apply its Declaration declaration part to the HTML element; the JS parsing is to convert the web page data into a Styled DOM tree whose nodes have CSS Style and will respond to custom events.

[0041] S20, when it is detected that the side window button assembly is triggered, popping up an option bar in an area adjacent to the side window button assembly; the option bar includes a change link item.

[0042] It can be understood that the adjacent area is an area with a preset range that can be displayed around the side window button assembly, such as the lower left corner or upper right corner of the side window button assembly, etc. The preset range can be set according to needs, such as the range of a certain rectangular area. The option bar is a toolbar for realizing optional option functions. The display method of the option bar can be set according to needs. The option bar includes a change link item and a default link item. The change link item indicates the option of jumping to a manually entered address, and the default link item indicates the option of jumping to a default address.

[0043] S30, receiving a first jump instruction, switching the option bar to an input link window; the first jump instruction is an instruction triggered by the user confirming to select the modified link item.

[0044] It can be understood that the switching method is to make the original option bar disappear and generate the input link window, that is, the input link window covers the option bar, hides the option bar, and puts the link window on top. After receiving the first jump instruction, the input link window is a window in which the user can enter the page address to be jumped. The first jump instruction is an instruction triggered by the user confirming the selection of the changed link item. When the user needs to pop up the application software (APP) or the H5 page / applet window corresponding to the application software (APP) on the side of the current Web page, click the button / button component of the option bar to trigger the first jump instruction.

[0045] S40, after receiving the confirmation instruction, a second page corresponding to the page address pops up on the side of the first page through the iframe tool; the confirmation instruction is generated after the user enters the page address in the input link window and confirms it; the page address is the address of the mobile terminal application corresponding to the web page address.

[0046] Understandably, the confirmation instruction is generated after the user enters the page address in the input link window and confirms it, that is, when the user needs to pop up the address of the mobile terminal application corresponding to the current Web page (the first page), enter the address in the input link window, and click the "Confirm" button to trigger the generation of the confirmation instruction. The page address is the address of the mobile terminal application corresponding to the web page address, that is, the link address of the H5 page / applet corresponding to the application software (APP). The application software (APP) can be opened through the link address of the H5 page corresponding to the application software (APP), and the application software (APP) can be accessed through the link address of the applet corresponding to the application software. The pop-up window on the side of the first page The process of creating the second page corresponding to the page address is as follows: first, reducing the size of the first page through the iframe tool, that is, proportionally reducing the window size of the current web page (the first page) according to the preset reduction size; second, creating a side window corresponding to the page address in the display space released on the side of the first page, that is, creating a new default side window (blank iframe window), which is created by the iframe tool; third, setting the target address of the blank iframe window to the page address, loading the page data corresponding to the page address through the loading module of the iframe tool, and rendering to obtain the second page; finally, displaying the second page in the generated side window.

[0047] In one embodiment, if Figure 3 As shown, in step S40, that is, using the iframe tool to pop up a second page corresponding to the page address on the side of the first page, the following steps are included:

[0048] S401: Reduce the size of the first page using the iframe tool.

[0049] Understandably, the size of the first page is adjusted by the IframeResizer script in the iframe tool, the preset reduced size is input into the IframeResizer script, and the input IframeResizer script is executed to reduce the size of the first page.

[0050] S402: A side window corresponding to the page address pops up on the side of the first page.

[0051] It can be understood that within the space released by the reduction of the first page on the displayed interface, a blank side window with a default configuration is created through the new function (creat function) in the iframe tool, and the size of the side window is consistent with the size of the released space, so that the page address can be opened through the side window, and the side window occupies the space released by the reduction of the first page.

[0052] S403: Load and render the second page in the side window using the iframe tool.

[0053] It can be understood that the loading process is to set the SRC of the side window to the URL of the second page through the iframe tool; access the page data linked to the second page and obtain the page data; load the page data into the cache pool, that is, store it in the cache pool. The cache pool is the data exchange area occupied by the iframe tool in the memory for loading web pages or H5 pages / applets corresponding to web pages, as well as the storage space for synchronous transmission of data between web pages and pop-up H5 pages / applets.

[0054] Among them, the rendering process is to configure the configuration parameters of the side window according to the page data in the cache pool through the iframe tool, and build a document object tree and layout tree based on the page data; merge the object tree according to the layout tree to obtain a rendering display tree; and render and display the rendering display tree, and the second page is the page displayed by the H5 page / applet corresponding to the page address.

[0055] In one embodiment, if Figure 4 As shown, in step S403, that is, loading and rendering the second page in the side window by using the iframe tool, includes:

[0056] S4031: Loading the page data linked to the second page in the side window.

[0057] It can be understood that the page data is the H5 / mini program related configuration data required to load the second page.

[0058] In one embodiment, loading the page data linked to the second page in the side window includes:

[0059] The SRC of the side window is set to the URL of the second page through the iframe tool.

[0060] It can be understood that the URL (Uniform Resource Locator) of the second page is the link address of the second page. The page data can be accessed through the URL of the second page, and the URL is set into the SRC attribute in the side window.

[0061] The page data linked to the second page is accessed through the iframe tool, and the page data is obtained.

[0062] Understandably, the page data is accessed on the Internet through the iframe tool and downloaded.

[0063] The obtained page data is loaded into a cache pool through the iframe tool.

[0064] The present invention realizes setting the SRC of the side window to the URL of the second page through the iframe tool; accessing the page data linked to the second page through the iframe tool and obtaining the page data; and loading the obtained page data into the cache pool through the iframe tool. In this way, the page data can be automatically loaded into the cache pool through the iframe tool, which facilitates subsequent data interconnection.

[0065] S4032: Render the page data through the iframe tool to obtain the second page, and display the second page in the side window.

[0066] It can be understood that the rendering process is to configure the configuration parameters of the side window according to the page data in the cache pool through the iframe tool, and build a document object tree and a layout tree based on the page data; merge the object tree according to the layout tree to obtain a rendering display tree; and render and display the rendering display tree.

[0067] In one embodiment, step S4032, i.e., rendering the page data using the iframe tool to obtain the second page, includes:

[0068] Configuring the side window according to the page data through the iframe tool, and constructing a document object tree and a layout tree;

[0069] Understandably, HTML parsing is performed on the page data, and nodes are associated through the decoding, word segmentation, parsing and tree building steps of HTML parsing to construct a document object tree (DOM tree), as well as CSS parsing and JS parsing to construct a Render tree. The same nodes in the Render tree are then merged, and the corresponding relationship of the nodes is mapped to the RenderLayer tree, that is, the layout tree. The CSS is parsed to match the HTML elements that meet each CSS rule, and then its Declaration declaration part is applied to the HTML element; the JS parsing is to convert the web page data into a Styled DOM tree whose nodes have CSS Style and will respond to custom events.

[0070] Merge the document object tree according to the layout tree to obtain a rendering display tree;

[0071] It can be understood that the node attributes of each node in the document object tree are laid out according to the layout positions of each node in the layout tree to obtain the rendering display tree. The layout is the process of arranging and calculating geometric information such as the size and position of each element in the second page, and using the streaming layout model, the position area of ​​each node is determined in sequence from left to right or from top to bottom during the sequential traversal process. The rendering display tree is the node information of the tree structure of the page to be rendered and displayed.

[0072] The rendering display tree is rendered and displayed to display the second page in the side window.

[0073] It can be understood that the rendering display is a process of mapping the display tree to be rendered into a visual graphic, traversing the display tree to be rendered, calling the drawing method of each node to display its content on a canvas or bitmap, and finally presenting it in the browser application window to become the actual page seen by the user, thereby displaying the second page in the side window.

[0074] The present invention realizes configuring the side window according to the page data through the iframe tool, and constructing a document object tree and a layout tree; merging the document object tree according to the layout tree to obtain a rendering display tree; rendering and displaying the rendering display tree to display the second page in the side window. In this way, the second page can be rendered and displayed through the iframe tool, and two pages can be intuitively displayed on the same display interface, which is convenient for subsequent data interconnection.

[0075] S50: Based on the iframe tool, synchronously transmit the operation data between the first page and the second page through the interconnection channel, and display the operation result.

[0076] It can be understood that through the interconnection channel in the iframe tool, the interconnection channel can realize data sharing between the first page and the second page, that is, the data operated on the first page can be passed to the second page, so as to achieve mutual transmission of operation data, and the operation data between the first page or the second page is synchronously transmitted to the second page or the first page through the interconnection channel, so as to achieve synchronous display of operation results, so as to meet the requirement of verifying whether the display results are consistent through synchronization testing.

[0077] The present invention realizes the nesting of a side window button component on a first page linked to a web page address through an iframe tool; when it is detected that the side window button component is triggered, an option bar pops up in an area adjacent to the side window button component; the option bar includes a change link item; a first jump instruction is received, and the option bar is switched to an input link window; the first jump instruction is an instruction for the user to confirm the selection of the change link item; after receiving the confirmation instruction, a second page corresponding to the page address is popped up on the side of the first page through the iframe tool; the confirmation instruction is generated after the user enters the page address in the input link window and confirms it; The page address is the address of the mobile terminal application corresponding to the web page address; based on the iframe tool, the operation data between the first page and the second page is transmitted through the interconnection channel. Therefore, it is possible to conveniently open the interface displayed on the mobile terminal on the PC through the iframe tool, realize the mobile interconnection of applications between the PC and the mobile terminal, and facilitate users to operate Web pages and mobile pages in the PC browser at the same time, so as to achieve the effect of data interconnection of different pages, facilitate the PC page to display the mobile terminal page, operate the interconnection test between the two on the PC, and improve the diversity of PC browsers and user satisfaction.

[0078] In one embodiment, the option bar further includes a default link item. It is understandable that the option bar includes the default link item for the user to select.

[0079] In one embodiment, after the option bar pops up in the area adjacent to the side window button assembly, the method includes:

[0080] Receive a second jump instruction, and through the iframe tool, pop up a third page corresponding to the default page address on the side of the first page; the second jump instruction is an instruction triggered after the user confirms the selection of the default link item; the default link item is associated with the preset default page address.

[0081] It can be understood that by clicking the default link item in the option bar, the default page address can be directly called up, and a third page corresponding to the default page address pops up on the side of the first page. The first page and the third page are independent of each other and belong to pages in different domains. Among them, the second jump instruction is an instruction triggered after the user confirms the selection of the default link item; the default link item is associated with the preset default page address.

[0082] Based on the iframe tool, the interactive data of the first page and the third page are respectively transmitted through independent channels.

[0083] It can be understood that the independent channel in the iframe tool can be allocated to separate channels for the first page and the third page respectively. The independent channel is a transmission channel corresponding to each open page allocated to the open page, and the proportion of the independent channel is adjusted according to the currently displayed page. For example, the two displayed pages account for 40% and 40% of the independent channel respectively, and the remaining 20% ​​is evenly distributed to the pages that are not displayed.

[0084] In this way, the interactive data between the first page and the external network and the interactive data between the third page and the external network are independent of each other and do not interfere with each other. They can be operated independently on the pages displayed on both sides, making it easy for users to select operations.

[0085] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0086] In one embodiment, a web page interconnection device is provided, which corresponds to the web page interconnection method in the above embodiment. Figure 5 As shown, the webpage interconnection device includes a nesting module 11, a detection module 12, a receiving module 13, a pop-up module 14 and a transmission module 15. The functional modules are described in detail as follows:

[0087] The nesting module 11 is used to nest a side window button component on the first page linked to the webpage address through an iframe tool;

[0088] A detection module 12 is configured to pop up an option bar in an area adjacent to the side window button assembly when detecting that the side window button assembly is triggered; the option bar includes a change link item;

[0089] The receiving module 13 is configured to receive a first jump instruction and switch the option bar to a link input window; the first jump instruction is an instruction triggered by the user confirming to select the link change item;

[0090] The pop-up module 14 is configured to, after receiving a confirmation instruction, pop up a second page corresponding to the page address on the side of the first page through the iframe tool; the confirmation instruction is generated after the user enters the page address in the link input window and confirms it; the page address is the address of the mobile terminal application corresponding to the web page address;

[0091] The transmission module 15 is used to transmit the operation data between the first page and the second page through the interconnection channel based on the iframe tool.

[0092] The specific definition of the web page interconnection device can be found in the definition of the web page interconnection method above and will not be repeated here. Each module in the aforementioned web page interconnection device may be implemented in whole or in part through software, hardware, or a combination thereof. Each module may be embedded in or independent of a processor in a computer device in the form of hardware, or may be stored in the form of software in a memory in the computer device, so that the processor can call and execute the corresponding operations of each module.

[0093] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Figure 6 As shown. The computer device includes a processor, memory, a network interface, and a database connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal via a network connection. When executed by the processor, the computer program implements a webpage interconnection method.

[0094] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the web page interconnection method in the above embodiment is implemented.

[0095] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the web page interconnection method in the above embodiment is implemented.

[0096] Those skilled in the art will appreciate that all or part of the processes in the above-described embodiments can be implemented by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the above-described embodiments. Among them, any reference to memory, storage, database or other media used in the embodiments provided by the present invention can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct RAM bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM).

[0097] Those skilled in the art will clearly understand that for the sake of convenience and brevity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0098] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention, and should all be included in the scope of protection of the present invention.

Claims

1. A web page interconnection method, characterized in that: include: Use the iframe tool to embed a side window button component on the first page linked to the web page address; When it is detected that the side window button assembly is triggered, an option bar pops up in an area adjacent to the side window button assembly; The option bar includes a change link item; Receiving a first jump instruction, switching the option bar to an input link window; the first jump instruction is an instruction triggered by the user confirming to select the modified link item; After receiving the confirmation instruction, a second page corresponding to the page address pops up on the side of the first page through the iframe tool; the confirmation instruction is generated after the user enters the page address in the input link window and confirms it; The page address is the address of the mobile terminal application corresponding to the web page address; Based on the iframe tool, the operation data between the first page and the second page is transmitted through the interconnection channel; The method of popping up a second page corresponding to the page address on the side of the first page by using the iframe tool includes: Using the iframe tool, reducing the size of the first page; Popping up a side window corresponding to the page address on the side of the first page; Loading and rendering the second page in the side window through the iframe tool; The loading and rendering of the second page in the side window by using the iframe tool includes: Loading the page data linked to the second page in the side window; Rendering the page data through the iframe tool to obtain the second page, and displaying the second page in the side window; The step of rendering the page data by the iframe tool to obtain the second page includes: The side window is configured according to the page data through the iframe tool, and a document object tree and a layout tree are constructed. The page data is parsed in HTML, and nodes are associated through the decoding, word segmentation, parsing and tree construction steps of the HTML parsing to construct a document object tree. CSS parsing and JS parsing are also performed to construct a render tree. The render tree then merges identical nodes and maps the corresponding relationships of the nodes to the layout tree. The CSS is parsed to match the HTML elements that satisfy each CSS rule, and then its declaration portion is applied to the HTML element. The JS parsing converts the web page data into a styled DOM tree whose nodes have CSS styles and respond to custom events. Merge the document object tree according to the layout tree to obtain a rendering display tree; The rendering display tree is rendered and displayed to display the second page in the side window.

2. The webpage interconnection method according to claim 1, wherein: The option bar also includes a default link item; After the option bar pops up in the area adjacent to the side window button assembly, the method includes: receiving a second jump instruction, and popping up a third page corresponding to the default page address on the side of the first page through the iframe tool; the second jump instruction is triggered after the user confirms and selects the default link item; the default link item is associated with the preset default page address; Based on the iframe tool, the interactive data of the first page and the third page are respectively transmitted through independent channels.

3. The webpage interconnection method according to claim 1, wherein: Before embedding a side window button component on the first page linked to the webpage address using the iframe tool, the method includes: Receiving the web page address input on the browser; Loading web page data linked to the web page address; The webpage data is rendered to obtain the first page and the rendered first page is displayed.

4. The webpage interconnection method according to claim 1, wherein: The loading of the page data linked to the second page in the side window includes: Setting the SRC of the side window to the URL of the second page through the iframe tool; Accessing the page data linked to the second page through the iframe tool and obtaining the page data; The obtained page data is loaded into a cache pool through the iframe tool.

5. A web page interconnection device, characterized in that: include: A nested module is used to nest a side window button component on the first page linked to the web page address through the iframe tool; A detection module, configured to pop up an option bar in an area adjacent to the side window button assembly when detecting that the side window button assembly is triggered; The option bar includes a change link item; A receiving module, configured to receive a first jump instruction and switch the option bar to a link input window; the first jump instruction is an instruction triggered by the user confirming to select the link change item; a pop-up module configured to, after receiving a confirmation instruction, pop up a second page corresponding to the page address on the side of the first page via the iframe tool; the confirmation instruction is generated after the user enters the page address in the link input window and confirms it; the page address is the address of the mobile terminal application corresponding to the web page address; A transmission module, configured to transmit the operation data between the first page and the second page through an interconnection channel based on the iframe tool; The method of popping up a second page corresponding to the page address on the side of the first page by using the iframe tool includes: Using the iframe tool, reducing the size of the first page; Popping up a side window corresponding to the page address on the side of the first page; Loading and rendering the second page in the side window through the iframe tool; The loading and rendering of the second page in the side window by using the iframe tool includes: Loading the page data linked to the second page in the side window; Rendering the page data through the iframe tool to obtain the second page, and displaying the second page in the side window; The step of rendering the page data by the iframe tool to obtain the second page includes: The side window is configured according to the page data through the iframe tool, and a document object tree and a layout tree are constructed. The page data is parsed in HTML, and nodes are associated through the decoding, word segmentation, parsing and tree construction steps of the HTML parsing to construct a document object tree. CSS parsing and JS parsing are also performed to construct a render tree. The render tree then merges identical nodes and maps the corresponding relationships of the nodes to the layout tree. The CSS is parsed to match the HTML elements that satisfy each CSS rule, and then its declaration portion is applied to the HTML element. The JS parsing converts the web page data into a styled DOM tree whose nodes have CSS styles and respond to custom events. Merge the document object tree according to the layout tree to obtain a rendering display tree; The rendering display tree is rendered and displayed to display the second page in the side window.

6. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the web page interconnection method according to any one of claims 1 to 4 is implemented.

7. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the web page interconnection method according to any one of claims 1 to 4 is implemented.

Images