A page loading method, device, equipment, medium and program product

Abstract

The application discloses a page loading method and device, equipment, medium and program product, and relates to the technical field of Internet. The method comprises the following steps: determining an initial corresponding Flutter web page based on a Flutter application, and dynamically creating an Iframe in the Flutter web page; acquiring a first page jump instruction of the Flutter web page, and determining the page type of a jump page through the page route in the first page jump instruction; wherein the page type comprises an H5 page and a Flutter web page; performing page jump according to the page type, loading the jump page, and realizing bidirectional communication between the H5 page and the Flutter web page based on the Iframe. Through the technical scheme of the application, the mixed use of the Flutter web page and the H5 page can be supported, and data transmission and communication can be performed between the Flutter web page and the H5 page.

Description

Technical Field

[0001] This invention relates to the field of Internet technology, and in particular to a page loading method, apparatus, device, medium, and program product. Background Technology

[0002] With the continuous development of the information age, people are using mobile devices more and more, and the application of H5 (Hypertext Markup Language 5, HTML5) pages on mobile devices is also increasing. Currently, when native pages load H5 web page resources, they usually use WebView (a web page view, a control used to load web pages) for real-time loading. However, due to the different operating system platforms (currently mainly Android and iOS systems), and the existence of different versions of the same operating system and different versions of WebView, these objective factors cause H5 pages to face a series of problems during the loading process, such as compatibility issues and slow loading, affecting user experience and usability. Therefore, there is an urgent need for a method to overcome the page loading problems caused by loading via WebView when loading H5 pages. Summary of the Invention

[0003] In view of this, the purpose of this invention is to provide a page loading method, apparatus, device, medium, and program product that can directly convert native projects into pure H5 code to load pages, replacing the solution of loading pages through WebView. The specific solution is as follows:

[0004] Firstly, this application discloses a page loading method, including:

[0005] The initial corresponding Flutter webpage is determined based on the Flutter application, and an Iframe is dynamically created in the Flutter webpage;

[0006] Obtain the first page jump instruction of the Flutter web page, and determine the page type of the jump page through the page route in the first page jump instruction; wherein, the page type includes H5 page and Flutter web page;

[0007] Page redirection is performed according to the page type, the redirected page is loaded, and bidirectional communication between the H5 page and the Flutter web page is realized based on the Iframe.

[0008] Optionally, the step of redirecting the page according to the page type and loading the redirected page includes:

[0009] When the redirected page is the H5 page, the Iframe is displayed on the H5 page, and the H5 page always displays one Iframe.

[0010] Optionally, the step of implementing bidirectional communication between the H5 page and the Flutter webpage based on the Iframe includes:

[0011] Based on the H5 page, obtain the second page jump instruction of the H5 page;

[0012] Based on the second page jump instruction, the Uniform Resource Locator (URL) string is intercepted so as to determine whether a new Flutter web page needs to be opened.

[0013] Optionally, determining whether a new Flutter webpage needs to be opened based on the Uniform Resource Locator (URL) string includes:

[0014] When the new Flutter webpage is opened based on the H5 page, the Uniform Resource Locator string is removed from the Iframe page stack;

[0015] Obtain the preloaded H5 page, and then, according to the page route in the second page jump instruction, hide the Iframe while loading the preloaded H5 page and open the new Flutter web page.

[0016] Optionally, determining whether a new Flutter webpage needs to be opened based on the Uniform Resource Locator (URL) string includes:

[0017] If it is not necessary to open the new Flutter webpage, then determine the new H5 page to open based on the H5 page according to the page route in the second page jump instruction;

[0018] Open and display the iframe so that the new H5 page can be loaded through the iframe.

[0019] Optionally, the page loading method further includes:

[0020] When a page return jump is performed based on the H5 page, it is determined whether a pop-up event of the preset format performance.navigation.type is triggered;

[0021] If the pop-up event of the preset format of performance.navigation.type is triggered, the cross-domain message interface is called through the Iframe to perform the page return jump, so as to return the H5 page to the Flutter web page.

[0022] Secondly, this application discloses a page loading device, comprising:

[0023] The Iframe creation module is used to determine the initial corresponding Flutter web page based on the Flutter application, and dynamically create an Iframe in the Flutter web page;

[0024] The page type determination module is used to obtain the page jump instruction of the Flutter web page and determine the page type of the jump page through the page route in the page jump instruction; wherein, the page type includes H5 page and Flutter web page;

[0025] The page communication module is used to perform page redirection according to the page type, load the redirected page, and realize bidirectional communication between the H5 page and the Flutter web page based on the Iframe.

[0026] Thirdly, this application discloses an electronic device, which includes a processor and a memory; wherein the memory is used to store a computer program, which is loaded and executed by the processor to implement the page loading method as described above.

[0027] Fourthly, this application discloses a computer-readable storage medium for storing a computer program; wherein the computer program, when executed by a processor, implements the page loading method as described above.

[0028] Fifthly, this application discloses a computer program product that, when run on a terminal device, causes the terminal device to execute the page loading method as described above.

[0029] This application provides a page loading method, comprising: determining an initial corresponding Flutter webpage based on a Flutter application, and dynamically creating an Iframe within the Flutter webpage; obtaining a page jump instruction from the Flutter webpage, and determining the page type of the jump page through the page route in the page jump instruction; wherein the page type includes H5 pages and Flutter webpages; performing page jump according to the page type, loading the jump page, and implementing bidirectional communication between the H5 page and the Flutter webpage based on the Iframe. It is evident that since native projects often rely on WebView for page interaction when opening H5 pages, the technical solution of this application, after jumping according to different page types, utilizes an Iframe to achieve bidirectional communication between the H5 page and the Flutter webpage. This not only supports the mixed use of Flutter webpages and H5 pages but also allows complete reuse of the original Native code logic, further implementing the page loading process.

[0030] In addition, the page loading device, equipment, medium and program product provided in this application correspond to the above-mentioned page loading method and have the same effect. Attached Figure Description

[0031] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0032] Figure 1 This is a flowchart of a page loading method disclosed in this application;

[0033] Figure 2 This is one scenario disclosed in this application for opening an H5 page via an iframe;

[0034] Figure 3 This is a second scenario disclosed in this application for opening an H5 page via an iframe;

[0035] Figure 4 This is a schematic diagram of loading an H5 page based on an Iframe, as disclosed in this application;

[0036] Figure 5 This is a flowchart of a specific page loading method disclosed in this application;

[0037] Figure 6This is a schematic diagram of a page loading device disclosed in this application;

[0038] Figure 7 This is a structural diagram of an electronic device disclosed in this application. Detailed Implementation

[0039] 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 embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0040] Currently, native pages typically use WebView (a web page view, a control used to load web pages) to load H5 web page resources in real time. However, due to differences in operating system platforms (currently mainly Android and iOS), there are different versions of the same operating system and different versions of WebView. These objective factors cause H5 pages to face a series of different problems during the loading process, such as compatibility issues and slow loading, which affect the user experience and usability.

[0041] To address this, this application provides a page loading solution that can directly convert native projects into pure H5 code to load pages, replacing the solution of loading pages through WebView. It not only supports the mixed use of Flutter web pages and H5 pages, but also enables data transfer and communication between Flutter web pages and H5 pages.

[0042] This invention discloses a page loading method, see [link to relevant documentation]. Figure 1 As shown, the method includes:

[0043] Step S11: Determine the initial corresponding Flutter web page based on the Flutter application, and dynamically create an Iframe in the Flutter web page.

[0044] As you can understand, Flutter is an open-source mobile application development kit developed by Google for developing applications for Android, iOS, Windows, macOS, Linux Desktop, and Google Fuchsia. Flutter provides the same development experience as its mobile counterparts, thanks to the convenient Dart platform, the robust web platform ecosystem, and the flexible extensibility of the Flutter framework. Developers can now directly create web applications beyond iOS and Android. Flutter projects have a wide range of applications, such as configuring Flutter tools to support web, adding web support to projects that already support Android and iOS, creating new web-enabled projects, and running hybrid pages of web-enabled projects and Vue Web (H5 pages).

[0045] Therefore, in this embodiment, the page is loaded via a Flutter webpage based on a Flutter application. Since the WebView of the Flutter application does not support web-based Flutter projects, a new solution must be used to ensure compatibility with the previous method of mutual calls between JavaScript and HTML for page loading. Because the Dart SDK (Software Development Kit) supports web development, and all its functions are defined in the Dart:html (Hyper Text Markup Language) library, this interface can be directly called in Dart. In this embodiment, the H5 page is opened via an iframe to implement the page loading process, using HTML inline frame elements (…). <iframe>The `)` indicates a nested browsing context, which allows another HTML element to be embedded into the current page. This replaces the approach of loading pages via WebView, enabling the mixed use of Flutter web pages and H5 pages.

[0046] Step S12: Obtain the first page jump instruction of the Flutter web page, and determine the page type of the jump page through the page route in the first page jump instruction; wherein, the page type includes H5 page and Flutter web page.

[0047] In this embodiment of the application, when a page jump occurs on a Flutter webpage, the page routing is used to determine whether the page to be jumped to is a Flutter webpage or an H5 page. Since the jump paths of Flutter webpages and H5 pages are different, the page routing can be used to determine whether the page to be jumped to is a Flutter webpage or an H5 page.

[0048] Step S13: Perform page redirection according to the page type, load the redirected page, and realize bidirectional communication between the H5 page and the Flutter web page based on the Iframe.

[0049] In one specific embodiment, when interacting with an H5 page through a Flutter webpage, if the page to be jumped from the Flutter webpage is an H5 page, the Iframe needs to be displayed on the H5 page, and the H5 page should always display one Iframe.

[0050] It can be understood that when opening an H5 page through an iframe, there are the following two scenarios: The first scenario is shown in Figure 2. The Flutter web page directly opens an H5 page through an iframe, and the content loaded in the H5 page is all the content of the H5 page. The second scenario is shown in Figure 3. The Flutter web page opens an H5 page through an iframe, and after intercepting the URL (Uniform Resource Locator), it opens a Flutter Web page. That is, the Flutter web page first opens an H5 page, and then opens a FlutterWeb page based on the H5 page. Since each iframe is an independent web page, in the second scenario, when the number of iframes in a main page gradually increases, the consumption of hardware resources will also gradually increase. Moreover, when opening multiple Iframe containers based on the Safari browser on an iPhone device, there may be a problem of browser return stack exception. Therefore, in the embodiments of the present application, when opening an H5 page, the Iframe is displayed, and always one iframe is maintained, thus overcoming the problem of browser return stack exception caused by opening multiple iframes.

[0051] In the embodiments of the present application, when implementing two-way communication between the H5 page and the Flutter web page based on the Iframe, if in the IFRAME mode, a new Flutter web page is opened based on the H5 page, it is judged whether to open a new Flutter web page by intercepting the URL. In this process, the relevant context will be generated in the sub-application. In this way, the page of the sub-application can be directly embedded in the specified area of the host application for display, without involving the transformation of the sub-application, which is more convenient to implement.

[0052] It should be noted that if a new Flutter webpage is to be opened, the intercepted URL needs to be cleared from the Iframe page stack using `history.back()` first. Then, a preloaded H5 page is loaded as an intermediary. Based on the page routing, the Iframe page is hidden while the new Flutter webpage is being loaded, and the new Flutter webpage is opened simultaneously. Specifically, when the new Flutter webpage is opened based on the H5 page, the Uniform Resource Locator (URL) string is cleared from the Iframe page stack; the preloaded H5 page is obtained, and then, based on the page routing in the second page jump instruction, the Iframe is hidden while the preloaded H5 page is being loaded, and the new Flutter webpage is opened. It is understandable that if another H5 page is opened, the same judgment needs to be made. It is necessary to determine whether a new H5 page is being opened based on the page routing. If a new H5 page is opened, the Iframe is displayed, and the content of the new H5 page is loaded. Specifically, if it is not necessary to open the new Flutter webpage, then the new H5 page to be opened based on the H5 page is determined according to the page route in the second page jump instruction; the Iframe is opened and displayed so that the new H5 page can be loaded through the Iframe.

[0053] This application provides a page loading method, comprising: determining an initial corresponding Flutter webpage based on a Flutter application, and dynamically creating an Iframe in the Flutter webpage; obtaining a page jump instruction from the Flutter webpage, and determining the page type of the jump page through the page route in the page jump instruction; wherein the page type includes H5 pages and Flutter webpages; performing page jump according to the page type, loading the jump page, and realizing bidirectional communication between the H5 page and the Flutter webpage based on the Iframe. It can be seen that since native projects often use WebView for page interaction when opening H5 pages, the technical solution of this application, after jumping according to the page type of different jump pages, utilizes an Iframe to realize bidirectional communication between the H5 page and the Flutter webpage, which not only supports the mixed use of Flutter webpages and H5 pages, but also completely reuses the original Native code logic, further realizing the page loading process.

[0054] As shown in Figure 4, it is a schematic diagram of the process for示例性 providing the H5 page loading based on Iframe. In the flowchart in the figure, it can be mainly divided into two modules. One is to open the H5 page through the Flutter web page; the other is the communication between the Flutter web page and the Iframe container. It can be understood that the Native app is an application developed using native languages based on the Android operating system, and when loading the H5 page, it is loaded through the WebView. The present application now aims to implement the previous JS mutual call solution on the Flutter web page, open the H5 page through the iframe, so that based on the Flutter native and WebView projects, it can meet the Android and iOS projects with a single set of code, and at the same time, it can achieve the same effect as the Flutter web page and the H5 page, support the mixed use of the Flutter web page and the H5 page, not only solve the problem of data transfer and communication between the Flutter web page and the H5 page, but also can fully reuse the original Native code logic. In addition, when the Flutter web page communicates with the Iframe container, a postMessage solution is used, and it is made applicable to securely implement cross-origin communication through the window.postMessage method. This solution can send messages to the Iframe, and at the same time, the Iframe can also send messages to the external container. It can be seen that the logic provided in Figure 4 can support the mixed use of the Flutter web page and the H5 page, can implement the communication between the Flutter web page and the H5 page, and can achieve the routing jump between the Flutter web page and the H5 page through URL interception. Integrating the above three parts realizes the page loading process in the solution of the present application.

[0055] In a specific embodiment, for the processing of the return logic, when the H5 page returns to the Flutter web page, as shown in Figure 5, the method includes:

[0056] Step S21: When performing a page return jump based on the H5 page, determine whether a pop-up event of the performance.navigation.type in a preset format is currently triggered.

[0057] Step S22: If the pop-up event of the performance.navigation.type in the preset format is currently triggered, call the cross-domain message interface through the Iframe to perform the page return jump, so as to return the H5 page to the Flutter web page.

[0058] In the embodiment of the present application, cross-origin communication between the Flutter web page and the H5 page is achieved by calling the postmessage (cross-domain message interface). It can be understood that when A opens page B through a transit page, the transit page determines whether it jumps from A or B through performance.navigation.type. Therefore, when the H5 page returns to the Flutter web page, it is determined whether it is a pop-up event of the performance.navigation.type in a preset format by preloading the H5 page, that is, it is determined whether window.performance.navigation.type == 2 is a POP (pop-up) event by preloading the H5 page. If the H5 page returns to the Flutter web page, then further trigger a postMessage to the Flutter web page through the window of the Iframe to execute the page return event.

[0059] ">Correspondingly, an embodiment of the present application also discloses a page loading device. As shown in Figure 6, the device includes:

[0060] ">An Iframe creation module 11, configured to determine an initially corresponding Flutter web page based on a Flutter application, and dynamically create an Iframe in the Flutter web page;

[0061] ">A page type determination module 12, configured to obtain a page jump instruction of the Flutter web page, and determine the page type of the jump page through the page route in the page jump instruction; wherein, the page type includes an H5 page and a Flutter web page;

[0062] ">A page communication module 13, configured to perform page jumps according to the page type, load the jump page, and implement two-way communication between the H5 page and the Flutter web page based on the Iframe.

[0063] ">Among them, for the more specific working processes of the above various modules, reference can be made to the corresponding content disclosed in the foregoing embodiments, and details will not be elaborated herein.

[0064] ">It can be seen that through the above solution of this embodiment, including: determining an initially corresponding Flutter web page based on a Flutter application, and dynamically creating an Iframe in the Flutter web page; obtaining a page jump instruction of the Flutter web page, and determining the page type of the jump page through the page route in the page jump instruction; wherein, the page type includes an H5 page and a Flutter web page; performing page jumps according to the page type, loading the jump page, and implementing two-way communication between the H5 page and the Flutter web page based on the Iframe. It can be seen that since the native project often performs interactions between pages based on WebView when opening an H5 page, and through the technical solution of the present application, after jumping according to the page type of different jump pages, two-way communication between the H5 page and the Flutter web page is implemented using an Iframe, which can not only support the mixed use of Flutter web pages and H5 pages, but also fully reuse the original Native code logic to further implement the page loading process.

[0065] Furthermore, the embodiment of the present application also discloses an electronic device. Figure 7 is a structural diagram of the electronic device 20 shown according to an exemplary embodiment. The content in the figure should not be regarded as any restriction on the scope of use of the present application.

[0066] Figure 7 is a schematic structural diagram of an electronic device 20 provided by the embodiment of the present application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. Among them, the memory 22 is used to store a computer program, and the computer program is loaded and executed by the processor 21 to implement the relevant steps in the page loading method disclosed in any of the foregoing embodiments. In addition, the electronic device 20 in this embodiment may specifically be a computer.

[0067] In this embodiment, the power supply 23 is used to provide working voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and external devices, and the communication protocol it follows is any communication protocol applicable to the technical solution of the present application, and no specific limitation is imposed on it here; the input / output interface 25 is used to obtain external input data or output data to the outside, and its specific interface type can be selected according to specific application needs, and no specific limitation is made here.

[0068] In addition, as a carrier for resource storage, the memory 22 may be a read-only memory, a random access memory, a disk, or an optical disc, etc. The resources stored thereon may include an operating system 221, a computer program 222, and data 223, etc. The data 223 may include various kinds of data. The storage method may be temporary storage or permanent storage.

[0069] Among them, the operating system 221 is used to manage and control each hardware device and the computer program 222 on the electronic device 20, and it may be Windows Server, Netware, Unix, Linux, etc.In addition to including a computer program capable of performing the page loading method executed by the electronic device 20 as disclosed in any of the foregoing embodiments, computer program 222 may further include a computer program capable of performing other specific tasks.

[0070] Furthermore, embodiments of this application also disclose a computer-readable storage medium, which includes random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disks, magnetic disks, optical disks, or any other form of storage medium known in the art. The computer program, when executed by a processor, implements the aforementioned page loading method. Specific steps of this method can be found in the corresponding content disclosed in the foregoing embodiments, and will not be repeated here.

[0071] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. Similar or identical parts between embodiments can be referred to mutually. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to the method section.

[0072] The steps of page loading or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, register, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.

[0073] Finally, it should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0074] The above provides a detailed description of a page loading method, apparatus, device, medium, and program product provided by the present invention. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of the present invention. Therefore, the content of this specification should not be construed as a limitation of the present invention.< / iframe>

Claims

1. A page loading method, characterized in that, include: The initial corresponding Flutter webpage is determined based on the Flutter application, and an Iframe is dynamically created in the Flutter webpage; Obtain the first page jump instruction of the Flutter web page, and determine the page type of the jump page through the page route in the first page jump instruction; wherein, the page type includes H5 page and Flutter web page; Page redirection is performed according to the page type, the redirected page is loaded, and bidirectional communication between the H5 page and the Flutter webpage is realized based on the Iframe; The step of redirecting the page according to the page type, loading the redirected page, and implementing bidirectional communication between the H5 page and the Flutter webpage based on the Iframe includes: When the redirected page is the H5 page, the Iframe is displayed on the H5 page, and the H5 page always displays one Iframe; Based on the H5 page, obtain the second page jump instruction of the H5 page; Based on the second page jump instruction, the Uniform Resource Locator (URL) string is intercepted so as to determine whether a new Flutter web page needs to be opened.

2. The page loading method according to claim 1, characterized in that, The step of determining whether a new Flutter webpage needs to be opened based on the Uniform Resource Locator (URL) string includes: When the new Flutter webpage is opened based on the H5 page, the Uniform Resource Locator string is removed from the Iframe page stack; Obtain the preloaded H5 page, and then, according to the page route in the second page jump instruction, hide the Iframe while loading the preloaded H5 page and open the new Flutter web page.

3. The page loading method according to claim 1, characterized in that, The step of determining whether a new Flutter webpage needs to be opened based on the Uniform Resource Locator (URL) string includes: If it is not necessary to open the new Flutter webpage, then determine the new H5 page to open based on the H5 page according to the page route in the second page jump instruction; Open and display the iframe so that the new H5 page can be loaded through the iframe.

4. The page loading method according to any one of claims 1 to 3, characterized in that, Also includes: When a page return jump is performed based on the H5 page, it is determined whether a pop-up event of the preset format performance.navigation.type is triggered; If the pop-up event of the preset format of performance.navigation.type is triggered, the cross-domain message interface is called through the Iframe to perform the page return jump, so as to return the H5 page to the Flutter web page.

5. A page loading device, characterized in that, include: The Iframe creation module is used to determine the initial corresponding Flutter web page based on the Flutter application, and dynamically create an Iframe in the Flutter web page; The page type determination module is used to obtain the page jump instruction of the Flutter web page and determine the page type of the jump page through the page route in the page jump instruction; wherein, the page type includes H5 page and Flutter web page; The page communication module is used to perform page redirection according to the page type, load the redirected page, and realize bidirectional communication between the H5 page and the Flutter web page based on the Iframe; The page communication module is specifically used for: When the redirected page is the H5 page, the Iframe is displayed on the H5 page, and the H5 page always displays one Iframe; Based on the H5 page, obtain the second page jump instruction of the H5 page; Based on the second page jump instruction, the Uniform Resource Locator (URL) string is intercepted so as to determine whether a new Flutter web page needs to be opened.

6. An electronic device, characterized in that, The electronic device includes a processor and a memory; wherein the memory is used to store a computer program, which is loaded and executed by the processor to implement the page loading method as described in any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that, Used to store computer programs; wherein the computer programs, when executed by a processor, implement the page loading method as described in any one of claims 1 to 4.

8. A computer program product, characterized in that, When the computer program product is run on a terminal device, the terminal device performs the page loading method according to any one of claims 1 to 4.

Images