A page loading method, device and terminal

Abstract

The application provides a page loading method and device and a terminal, and belongs to the technical field of computers.The page loading method comprises the following steps: when a target page is rendered, if the target page is a template page, template page file content is obtained, the template page file content is written into a label area of an iframe, the height of the template page file content is monitored, and the height of the iframe window is updated in real time; if the target page is an external link project page, the external link project is loaded by using a URL address in the iframe, a business function component of the external link project is rendered, and a target page element in a parent page of the iframe is inserted into the iframe.In the application, the height of the file content written into the iframe is monitored, the height of the iframe window can be dynamically adjusted, the element in the parent page of the iframe is inserted into the iframe, the element is arranged at the same level as the elements in the iframe, and the problem that the display effect of the page is poor due to the high level of the element is solved.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a page loading method, apparatus, and terminal. Background Technology

[0002] With the continuous development of the internet, people are increasingly using the network to obtain information and services, such as browsing online news, watching movies and TV shows, and online shopping. This information is primarily presented to users through web pages using web technology. As a gateway to human-computer interaction, web technology is a crucial and essential component of this interaction. The continuous development of the internet has placed higher demands on the updating of web pages, requiring service providers to frequently update their pages.

[0003] In existing technologies, page loading and updates are still packaged together and loaded onto a static resource server. If a page needs to be updated, it needs to be redeveloped, packaged, and then placed onto the static resource server. This approach cannot quickly deploy and adjust page changes, and if there is a problem with the page, the modification time is long. Furthermore, the height of the iframe page embedded in the page is usually passed as a parameter to the parent page to achieve height adaptation, but it does not adapt to height changes caused by the current operation in the iframe page, resulting in poor page display. Summary of the Invention

[0004] In view of this, the present invention provides a page loading method, apparatus and terminal to solve the problems of cumbersome page update process, slow loading speed, easy error occurrence and poor page display effect in the prior art.

[0005] To solve the above-mentioned technical problems, in a first aspect, the present invention provides a page loading method, comprising:

[0006] When rendering the target page, determine whether the target page is a template page or an external link project page;

[0007] If the target page is a template page, the template page file content of the template page is obtained, and the template page file content is written into the tag area of ​​the iframe with the corresponding ID according to the ID of the iframe tag. The height of the written template page file content is monitored, and the height of the iframe window is updated in real time according to the monitored height of the written template page file content.

[0008] If the target page is an external link project page, the external link project is loaded using the URL address in the iframe, the business function components of the external link project loaded into the iframe are rendered, and the target page element in the parent page of the iframe is inserted into the iframe to be set at the same level as the elements in the iframe.

[0009] Optionally, rendering the business function components of the external linked project loaded into the iframe includes:

[0010] The business function components of the external link project loaded into the iframe are called to the browser's global function as parameters;

[0011] The business function component is rendered using a global function call.

[0012] Optionally, rendering the business function components of the external linked project loaded into the iframe further includes:

[0013] Obtain the cascading style sheets of the business function components;

[0014] The business function components are rendered according to the Cascading Style Sheets (CSS) of the business function components.

[0015] Optionally, before determining whether the target page is a template page or an external link project loading page, the method further includes:

[0016] The system receives a target page sent by a backend template management platform, wherein the backend template management platform is used to configure and store the template page and the link addresses of external linked projects.

[0017] Optionally, the target page element is the header or footer element of the parent page of the iframe.

[0018] Secondly, the present invention also provides a page loading device, comprising:

[0019] The judgment module is used to determine whether the target page is a template page or an external link project page when rendering the target page;

[0020] The first loading module is used to, if the target page is a template page, obtain the template page file content of the template page, write the template page file content into the tag area of ​​the iframe with the corresponding ID according to the ID of the iframe tag, and monitor the height of the written template page file content, and update the height of the iframe window in real time according to the monitored height of the written template page file content.

[0021] The second loading module is used to load the external link project using the URL address in the iframe if the target page is an external link project page, render the business function components of the external link project loaded into the iframe, and insert the target page element in the parent page of the iframe into the iframe so that it is set at the same level as the element in the iframe.

[0022] Optionally, the second loading module includes:

[0023] The calling unit is used to call the browser's global function in the form of parameters the business function component of the external link project loaded into the iframe;

[0024] The first rendering unit is used to render data for the business function components using the invoked global function.

[0025] Optionally, the second loading module further includes:

[0026] The acquisition unit is used to acquire the cascading style sheets of the business function components;

[0027] The second rendering unit is used to render the business function component according to the Cascading Style Sheet of the business function component.

[0028] Optional, also includes:

[0029] The receiving module is used to receive the target page sent by the backend template management platform, wherein the backend template management platform is used to configure and store the template page and the link address of the external linked project.

[0030] Optionally, the target page element is the header or footer element of the parent page of the iframe.

[0031] Thirdly, the present invention also provides a terminal, 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, it implements any of the above-described page loading methods.

[0032] Fourthly, the present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps in any of the above-described page loading methods.

[0033] The beneficial effects of the above-described technical solution of the present invention are as follows:

[0034] In this embodiment of the invention, by using different loading methods for different page types, the probability of errors can be reduced and the loading speed can be accelerated. If a page error occurs, the content of the corresponding template page file or external link items can be quickly adjusted. Furthermore, by monitoring the height of the file content written to the iframe, the height of the iframe window can be dynamically adjusted. And by inserting the elements of the parent page of the iframe into the iframe, the elements can be set at the same level as the elements inside the iframe, thus solving the problem of poor page display caused by elements being too high in level. Attached Figure Description

[0035] Figure 1 This is a flowchart illustrating a page loading method provided in Embodiment 1 of the present invention;

[0036] Figure 2 This is a schematic diagram of the structure of a page loading device provided in Embodiment 2 of the present invention;

[0037] Figure 3 This is a schematic diagram of the structure of a terminal provided in Embodiment 3 of the present invention. Detailed Implementation

[0038] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the described embodiments of the present invention are within the scope of protection of the present invention.

[0039] Please see Figure 1 , Figure 1 This is a flowchart illustrating a page loading method according to Embodiment 1 of the present invention. The method can be applied to a terminal and includes the following steps:

[0040] Step 11: When rendering the target page, determine whether the target page is a template page or an external link project page.

[0041] In this embodiment of the invention, a template page refers to an HTML page used for display and user experience. The corresponding HTML page file includes HTML tags, CSS (Cascading Style Sheets), and Javascript files, thus containing the complete functionality of the template page. The Javascript file is a text file written in the Javascript scripting language, used to instruct page logic, define dynamic effects, and call common components. The template page can be uploaded to a backend template management platform for terminals to access and display. The content of the template page primarily focuses on various business functions.

[0042] In this embodiment of the invention, the external link project page, i.e. other web pages,

[0043] The target page can refer to the page to be displayed in the iframe area.

[0044] Step 12: If the target page is a template page, obtain the template page file content of the template page, write the template page file content into the tag area of ​​the iframe with the corresponding ID according to the ID of the iframe tag, and monitor the height of the written template page file content, and update the height of the iframe window in real time according to the monitored height of the written template page file content.

[0045] In this step, when the target page is a template page, the template page file content can be returned via an API. After obtaining the template page file content, the ID of the iframe's tag is retrieved, and then the obtained template page file content is written into the tag area of ​​the iframe corresponding to that ID. For example, for an iframe, the template page file content corresponding to its tag ID can be determined based on that tag ID, and then the determined template page file content is written into the iframe. Specifically, in HTML, the iframe is an HTML tag, typically written as follows:<iframe…> If so, the corresponding template page file can be written into this tag. Different business requirements in the template page file may cause the page to change due to changes in operations. Therefore, the height of the tag elements in each area of ​​the template page (or template page file) is set so that changes can be easily monitored.

[0046] In this embodiment of the invention, the height of the template page file content written within the iframe (i.e., the iframe tag area) can be monitored. Specifically, this can be achieved by monitoring the height of the written template page file content through the `contentDocument` attribute within the iframe. Therefore, the height of the iframe window can be updated in real time based on the monitored height of the written template page file content. In other words, since the iframe tag area needs to have its width and height set, and the height generally varies depending on the page content, it is necessary to obtain the height of the written template page file content and set it for the iframe tag so that it can be fully displayed. Subsequent page operations may cause changes in the written content, potentially leading to changes in the height. Therefore, by monitoring the height of the written template page file content, the height of the iframe window can be updated in real time, dynamically matching and displaying the corresponding page content to ensure optimal display.

[0047] Step 13: If the target page is an external link project page, load the external link project using the URL address in the iframe, render the business function components of the external link project loaded into the iframe, and insert the target page element from the parent page of the iframe into the iframe so that it is set at the same level as the element in the iframe.

[0048] In this embodiment of the invention, when the target page is an external link project page, the external link project can be loaded using the iframe's src (i.e., source, which points to the location of the external resource, and the content pointed to will be applied to the current tag location in the document). Here, src contains the link address of the external link project, i.e., the URL (UniformResource Locator) address. Thus, different external link projects can be loaded by changing the URL address in the iframe.

[0049] For external linked projects loaded into this iframe, their business function components need to be rendered. For example, the business function components can be passed as parameters to the parent page of the iframe for rendering, and the rendering can be performed using the global functions common to the parent page, so as to realize the unified calling of common business in the project.

[0050] When an external link item is loaded as a URL, the external link item is written to local storage by the route, and the page route is recorded and tracked so that the page can be refreshed to the currently specified page.

[0051] Because page elements inside and outside the iframe exist at different levels—that is, elements in the parent page outside the iframe have a higher level than elements inside the iframe—some styles inside the iframe cannot override the styles of some elements outside the iframe (such as header and footer elements). This affects the page display and leads to a poor user experience. In this embodiment of the invention, by inserting the target page element from the parent page of the iframe into the iframe, the target page element and the elements in the iframe are set to the same level, achieving a display effect of equal level. This solves the problem of poor page display caused by elements having too high a level. The target page element can be determined according to actual needs.

[0052] The page loading method provided in this invention can reduce the probability of errors and speed up loading by using different loading methods for different page types. If a page error occurs, the content of the corresponding template page file or external link items can be quickly adjusted. Furthermore, by monitoring the height of the file content written to the iframe, the height of the iframe window can be dynamically adjusted. And by inserting the elements of the parent page of the iframe into the iframe, the elements can be set at the same level as the elements inside the iframe, solving the problem of poor page display caused by elements being too high in level.

[0053] The following example illustrates the page loading method described above.

[0054] In one optional implementation, rendering the business function components of the external link project loaded into the iframe includes:

[0055] The business function components of the external link project loaded into the iframe are called to the browser's global function as parameters;

[0056] The business function component is rendered using a global function call.

[0057] In this embodiment of the invention, when rendering the business function components of the external link project loaded into the iframe, the business function components of the external link project can be passed in the form of parameters to realize the call of the browser's global function, thereby realizing the data rendering of the business function components. As a result, the display effect of each business function component is unified in various iframe areas, that is, the display effect of the page is improved.

[0058] The global functions include commands for controlling the header and footer of the iframe's parent page, as well as functions for various styles such as unified confirmation pop-ups. These functions can be attached to the browser's BOM (Browser Object Model) window. The iframe's child pages can be called and controlled using `window.top`, serving various business functions.

[0059] In some embodiments of the present invention, optionally, rendering the business function components of the external link project loaded into the iframe further includes:

[0060] Obtain the cascading style sheets of the business function components;

[0061] The business function components are rendered according to the Cascading Style Sheets (CSS) of the business function components.

[0062] Since the parameters of the business function components cannot be transmitted along with CSS styles, in this embodiment of the invention, after the business function component calls the global function in the form of parameters, the Cascading Style Sheet (i.e., CSS) of the Huqiu business function component can be further processed, so that the global function will insert the obtained CSS styles and make the corresponding styles take effect.

[0063] In some embodiments of the present invention, before determining whether the target page is a template page or an external link project loading page, the method further includes:

[0064] The system receives a target page sent by a backend template management platform, wherein the backend template management platform is used to configure and store the template page and the link addresses of external linked projects.

[0065] In other words, the target page displayed in the terminal window is sent by the backend template management platform. This platform is used to configure, store, and upload the HTML template pages and the link addresses of external linked projects for display in the browser window. Therefore, when errors occur in the template pages or external linked projects, or when changes are needed, adjustments can be made in real time, accelerating page adjustments, ensuring efficient page loading, and reducing the error rate.

[0066] In some embodiments of the present invention, optionally, the target page element is the header or footer element of the parent page of the iframe. That is, the header or footer element of the parent page of the iframe can be inserted into the iframe to achieve a sibling level with the elements inside the iframe, thus solving the problem of poor page display caused by elements being too high-level.

[0067] In summary, by employing different loading methods for different page types in this embodiment of the invention, the probability of errors can be reduced and the loading speed can be accelerated. If a page error occurs, the content of the corresponding template page file or external link items can be quickly adjusted. Furthermore, by monitoring the height of the file content written to the iframe, the height of the iframe window can be dynamically adjusted. And by inserting the elements of the parent page of the iframe into the iframe, the elements can be set at the same level as the elements inside the iframe, thus solving the problem of poor page display caused by elements being too high in level.

[0068] Please see Figure 2 , Figure 2 This is a schematic diagram of a page loading device according to Embodiment 2 of the present invention. The device 20 includes:

[0069] The judgment module 21 is used to determine whether the target page is a template page or an external link project page when rendering the target page;

[0070] The first loading module 22 is used to, if the target page is a template page, obtain the template page file content of the template page, write the template page file content into the tag area of ​​the iframe with the corresponding ID according to the ID of the iframe tag, and monitor the height of the written template page file content, and update the height of the iframe window in real time according to the monitored height of the written template page file content.

[0071] The second loading module 23 is used to load the external link project using the URL address in the iframe if the target page is an external link project page, render the business function components of the external link project loaded into the iframe, and insert the target page element in the parent page of the iframe into the iframe so that it is set at the same level as the element in the iframe.

[0072] Optionally, the second loading module includes:

[0073] The calling unit is used to call the browser's global function in the form of parameters the business function component of the external link project loaded into the iframe;

[0074] The first rendering unit is used to render data for the business function components using the invoked global function.

[0075] Optionally, the second loading module further includes:

[0076] The acquisition unit is used to acquire the cascading style sheets of the business function components;

[0077] The second rendering unit is used to render the business function component according to the Cascading Style Sheet of the business function component.

[0078] Optionally, the device further includes:

[0079] The receiving module is used to receive the target page sent by the backend template management platform, wherein the backend template management platform is used to configure and store the template page and the link address of the external linked project.

[0080] Optionally, the target page element is the header or footer element of the parent page of the iframe.

[0081] The embodiments of the present invention are product embodiments corresponding to the method embodiment one described above, and therefore will not be repeated here. For details, please refer to the embodiment one described above.

[0082] Please see Figure 3 , Figure 3 This is a schematic diagram of the structure of a terminal provided in Embodiment 3 of the present invention. The terminal 30 includes a processor 31, a memory 32, and a computer program stored in the memory 32 and executable on the processor 31. When the processor 31 executes the computer program, it performs the following steps:

[0083] When rendering the target page, determine whether the target page is a template page or an external link project page;

[0084] If the target page is a template page, the template page file content of the template page is obtained, and the template page file content is written into the tag area of ​​the iframe with the corresponding ID according to the ID of the iframe tag. The height of the written template page file content is monitored, and the height of the iframe window is updated in real time according to the monitored height of the written template page file content.

[0085] If the target page is an external link project page, the external link project is loaded using the URL address in the iframe, the business function components of the external link project loaded into the iframe are rendered, and the target page element in the parent page of the iframe is inserted into the iframe to be set at the same level as the elements in the iframe.

[0086] In this embodiment of the invention, optionally, when the processor 31 executes the computer program, it may also perform the following steps:

[0087] The rendering of the business function components of the external link project loaded into the iframe includes:

[0088] The business function components of the external link project loaded into the iframe are called to the browser's global function as parameters;

[0089] The business function component is rendered using a global function call.

[0090] In this embodiment of the invention, optionally, when the processor 31 executes the computer program, it may also perform the following steps:

[0091] The rendering of the business function components of the external link project loaded into the iframe also includes:

[0092] Obtain the cascading style sheets of the business function components;

[0093] The business function components are rendered according to the Cascading Style Sheets (CSS) of the business function components.

[0094] In this embodiment of the invention, optionally, when the processor 31 executes the computer program, it may also perform the following steps:

[0095] The system receives a target page sent by a backend template management platform, wherein the backend template management platform is used to configure and store the template page and the link addresses of external linked projects.

[0096] In this embodiment of the invention, optionally, the target page element is the header or footer element of the parent page of the iframe.

[0097] The specific working process of this invention embodiment is the same as that in the method embodiment one above, so it will not be repeated here. For details, please refer to the description of the method steps in the method embodiment one above.

[0098] Embodiment 4 of the present invention provides a computer-readable storage medium storing a computer program thereon. When executed by a processor, the computer program implements the steps of any of the page loading methods in Embodiment 1 above. For details, please refer to the description of the method steps in the corresponding embodiments above.

[0099] The aforementioned computer-readable storage media include both permanent and non-permanent, removable and non-removable media, which can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transfer medium that can be used to store information accessible by a computing device.

[0100] The above description represents the preferred embodiments of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A page loading method, characterized in that, include: When rendering the target page, determine whether the target page is a template page or an external link project page; If the target page is a template page, the template page file content of the template page is obtained, and the template page file content is written into the tag area of ​​the iframe with the corresponding ID according to the ID of the iframe tag. The height of the written template page file content is monitored, and the height of the iframe window is updated in real time according to the monitored height of the written template page file content. If the target page is an external link project page, the external link project is loaded using the URL address in the iframe, the business function components of the external link project loaded into the iframe are rendered, and the target page element in the parent page of the iframe is inserted into the iframe to be set at the same level as the elements in the iframe.

2. The method according to claim 1, characterized in that, The rendering of the business function components of the external link project loaded into the iframe includes: The business function components of the external link project loaded into the iframe are called to the browser's global function as parameters; The business function component is rendered using a global function call.

3. The method according to claim 1 or 2, characterized in that, The rendering of the business function components of the external link project loaded into the iframe also includes: Obtain the cascading style sheets of the business function components; The business function components are rendered according to the Cascading Style Sheets (CSS) of the business function components.

4. The method according to claim 1, characterized in that, Before determining whether the target page is a template page or an external link project loading page, the process also includes: The system receives a target page sent by a backend template management platform, wherein the backend template management platform is used to configure and store the template page and the link addresses of external linked projects.

5. The method according to claim 1, characterized in that, The target page element is the header or footer element of the parent page of the iframe.

6. A page loading device, characterized in that, include: The judgment module is used to determine whether the target page is a template page or an external link project page when rendering the target page; The first loading module is used to, if the target page is a template page, obtain the template page file content of the template page, write the template page file content into the tag area of ​​the iframe with the corresponding ID according to the ID of the iframe tag, and monitor the height of the written template page file content, and update the height of the iframe window in real time according to the monitored height of the written template page file content. The second loading module is used to load the external link project using the URL address in the iframe if the target page is an external link project page, render the business function components of the external link project loaded into the iframe, and insert the target page element in the parent page of the iframe into the iframe so that it is set at the same level as the element in the iframe.

7. The apparatus according to claim 6, characterized in that, The second loading module includes: The calling unit is used to call the browser's global function in the form of parameters the business function component of the external link project loaded into the iframe; The first rendering unit is used to render data for the business function components using the invoked global function.

8. The apparatus according to claim 6 or 7, characterized in that, The second loading module also includes: The acquisition unit is used to acquire the cascading style sheets of the business function components; The second rendering unit is used to render the business function component according to the Cascading Style Sheet of the business function component.

9. The apparatus according to claim 6, characterized in that, Also includes: The receiving module is used to receive the target page sent by the backend template management platform, wherein the backend template management platform is used to configure and store the template page and the link address of the external linked project.

10. The apparatus according to claim 6, characterized in that, The target page element is the header or footer element of the parent page of the iframe.

11. A terminal, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor; characterized in that, When the processor executes the computer program, it implements the page loading method as described in any one of claims 1 to 5.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the page loading method as described in any one of claims 1 to 5.

Images