Web page access method, device and equipment
By sending page loading requests to the main application backend server on the client and using the main application backend server as a forwarding agent, the cross-domain problem of page access between different modules is solved, and the same-original and same-domain access and page switching between the main application and the sub-application are realized.
Patent Information
- Application Number
- CN202311242886.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-09-22
- Publication Date
- 2025-03-25
AI Technical Summary
In the prior art, page access between different modules is caused by cross-domain problems due to homologous policies, making it difficult to deploy and realize inter-page communication in the same portal.
By implementing a Web web page access method on the client, a page loading request is sent to the main application backend server, and the main application backend server acts as a forwarding agent to obtain and forward the sub-application page information, thereby realizing the same-original and same-domain access between the main application and the sub-application.
It solves the cross-domain problem of page access between different modules, realizes mixed access between main application and sub-app, and supports page switching between main application and sub-app without language restrictions.
Smart Images

Figure CN119691298A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the technical field of web page development, and in particular to a method, device and equipment for accessing a web page. Background Art
[0002] At present, for the development of web pages, many front-end projects are developed and deployed in a mixed way, mainly including front-end http services and back-end API services. The front-end APP service loads the main frame of the web page through the main application, and the sub-applications corresponding to other different modules are embedded in the main application page through Iframe. The user's request for the front-end APP service is sent to the server that provides API services at the back end, and the API server provides the corresponding business services to the front end and updates the corresponding page.
[0003] The same-origin policy is a security policy proposed by Netscape. Now all browsers that support JavaScript will use this policy. It is the most core and basic security function of the browser. If the same-origin policy is missing, the normal function of the browser may be affected.
[0004] Simply put, it means that two resources are not from the same origin. For security reasons, the JavaScript in the page will have a cross-domain problem when requesting resources from non-same origins - that is, a cross-domain request. At this time, due to the same-origin policy, the page request triggered by the user will be prohibited by the browser, and a cross-domain problem will occur.
[0005] The sub-application pages corresponding to the above different modules are developed with different technologies, and the addresses of the servers providing API services at the back end are different. Therefore, switching between different module pages, jumping from the main application to the sub-application interface, and jumping from the sub-application interface to the main application interface, mostly refer to access to non-homologous resources. Finally, after deployment, it is difficult to access all module pages on the same portal. At the same time, developers of different modules have been unable to find a solution to the problem of difficulty in cross-module page communication. Summary of the invention
[0006] The present application provides a Web page access method, device and equipment to solve the problem that the existing pages between different modules are mostly accessed to non-homologous resources, and it is difficult to access all module pages on the same portal after deployment.
[0007] According to a first aspect of an embodiment of the present application, a method for accessing a web page is provided, which is applied to a client and includes:
[0008] Receiving and responding to a first user access operation on a first page of a first application, and acquiring user access information, wherein the user access information includes a second application page identifier;
[0009] In a case where the client cache does not include the second application page information, sending a page loading request to the first server, wherein the page loading request is used by the first server to obtain the second application page information from the second server;
[0010] Obtaining the second application page information;
[0011] The second application page is loaded according to the second application page information.
[0012] Optionally, the page loading request includes the second application page identifier; the page loading request is used to instruct the first server to obtain the second server identifier corresponding to the second application page identifier according to a target correspondence relationship, and obtain the second application page information from the second server; wherein the target correspondence relationship includes a correspondence between the page identifier and the server identifier.
[0013] Optionally, the method further comprises:
[0014] Obtaining a second correspondence between the second server identifier and the second application page identifier;
[0015] A synchronization request is sent to the first server, where the synchronization request is used by the first server to update the second corresponding relationship to the target corresponding relationship.
[0016] Optionally, when the client cache does not include the second application page information, the method further includes:
[0017] A context environment of the second application is created, wherein the context environment includes window information of the second application and registration events of the second application.
[0018] Optionally, the method further comprises:
[0019] Generating an interface between the first application and the second application according to a preset configuration file;
[0020] The interface is used for the first application and the second application to communicate different types of messages.
[0021] Optionally, generating an interface between the first application and the second application according to a preset configuration file includes:
[0022] Calling a function in the second application according to a preset configuration file, and sending a message to the first application through the called function;
[0023] An interface between the first application and the second application is established by dispatching a message.
[0024] Optionally, creating a context environment for the second application includes:
[0025] Reading shared information of the first application through an interface between the first application and the second application, where the shared information is received by the first application and obtained in response to a user setting operation;
[0026] The shared information is applied to the second application as a registration event, and the registration event is used to initialize data of the second application.
[0027] Optionally, the method further comprises:
[0028] In a case where the client cache includes the second application page information, the second application page is loaded according to the second application page information.
[0029] Optionally, sending a page loading request to the first server includes:
[0030] The second application page identifier is used as the secondary directory of the current route to obtain the real route address;
[0031] According to the real routing address, a page loading request is sent to the first server.
[0032] Optionally, the method further comprises:
[0033] The routing address change is monitored through the first application, and an indicator is added before the second application page address in the real routing address, and after it is added to the routing of the first server, a new URL is obtained.
[0034] According to a second aspect of an embodiment of the present application, a method for accessing a web page is provided, which is applied to a first server and includes:
[0035] Receive a page loading request sent by a client, where the page loading request is used by the first server to obtain second application page information;
[0036] Parsing the page loading request to determine a second server corresponding to the second application page information;
[0037] Acquire second application page information from the second server;
[0038] The acquired second application page information is sent to the client.
[0039] Optionally, parsing the page loading request to determine the second server corresponding to the second application page information includes:
[0040] Parsing the page loading request to determine a second application page identifier;
[0041] Determine the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target corresponding relationship;
[0042] The target correspondence relationship includes a correspondence relationship between a page identifier and a server identifier.
[0043] Optionally, parsing the page loading request to determine the second application page identifier includes:
[0044] Parsing the page loading request to determine the real routing address;
[0045] Parse the real routing address to determine that the address after the first server routing is the second application page identifier;
[0046] Determining the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target corresponding relationship includes:
[0047] According to a routing forwarding table established in advance according to the target corresponding relationship, matching the second application page identifier with the routing forwarding table;
[0048] If there is a matching page identifier, a forwarding path of the second server corresponding to the second application page information is determined according to the matching page identifier.
[0049] According to a third aspect of an embodiment of the present application, a web page access device is provided, including:
[0050] A page identification determination module, configured to receive and respond to a first user access operation on a first page of a first application, and obtain user access information, wherein the user access information includes a second application page identification;
[0051] a page request loading module, configured to send a page loading request to the first server when the client cache does not include the second application page information, wherein the page loading request is used by the first server to obtain the second application page information from the second server;
[0052] A page information acquisition module, used to acquire the second application page information;
[0053] A page loading module is used to load the second application page according to the second application page information.
[0054] According to a fourth aspect of an embodiment of the present application, a web page access device is provided, including:
[0055] A loading request receiving module, used to receive a page loading request sent by a client, wherein the page loading request is used by the first server to obtain the second application page information;
[0056] A loading request forwarding module, used to parse the page loading request and determine the second server corresponding to the second application page information;
[0057] A page information acquisition module, used to acquire the second application page information from the second server;
[0058] The page information forwarding module is used to send the acquired second application page information to the client.
[0059] According to a fifth aspect of an embodiment of the present application, a web page access device is provided, including: a memory and a processor; wherein:
[0060] The memory is used to store computer programs;
[0061] The processor is used to read the program in the memory and execute the Web page access method provided in the first aspect.
[0062] According to a sixth aspect of an embodiment of the present application, a web page access device is provided, including: a memory and a processor; wherein:
[0063] The memory is used to store computer programs;
[0064] The processor is used to read the program in the memory and execute the Web page access method provided by the second aspect.
[0065] According to the seventh aspect of the embodiments of the present application, a chip is provided, which is coupled to a memory in a device so that the chip calls program instructions stored in the memory during operation to implement the above-mentioned various aspects of the embodiments of the present application and any possible method involved in each aspect.
[0066] According to an eighth aspect of an embodiment of the present application, a computer-readable storage medium is provided, which stores program instructions. When the computer-readable storage medium is run on a computer, the computer executes the above-mentioned various aspects of the embodiment of the present application and any possible method involved in each aspect.
[0067] According to a ninth aspect of an embodiment of the present application, a computer program product is provided. When the computer program product is run on an electronic device, the electronic device executes and implements the above-mentioned various aspects of the embodiment of the present application and any possible method involved in each aspect.
[0068] The method, device and equipment for accessing a web page provided by the present application have the following beneficial effects:
[0069] The present application provides that all sub-application page loading requests are first sent to the main application backend server on the client front end, and forwarded by the main application backend server, thereby achieving the same origin and domain for the main application and all sub-applications, supporting mixed access to the main application and sub-applications, and having no language restrictions on the development of the main application. BRIEF DESCRIPTION OF THE DRAWINGS
[0070] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0071] Figure 1 A schematic diagram of an architecture system for hybrid deployment of main applications and sub-applications in related technologies;
[0072] Figure 2 A schematic diagram of a method for accessing a Web page applied to a client in an embodiment of the present application;
[0073] Figure 3 A schematic diagram of a method for accessing a web page applied to a main application backend server in an embodiment of the present application;
[0074] Figure 4 A schematic diagram of the system architecture corresponding to the Web page method exemplified in the embodiment of the present application;
[0075] Figure 5 A detailed flowchart of web page access in an embodiment of the present application;
[0076] Figure 6 A schematic diagram of the data flow of accessing a web page according to an example in the embodiment of the present application;
[0077] Figure 7 A schematic diagram of the structure of a Web access device provided in an embodiment of the present application;
[0078] Figure 8 This is a schematic diagram of the structure of another Web page access device provided in an embodiment of the present application;
[0079] Fig. 9 This is a schematic diagram of the structure of a Web page access device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0080] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.
[0081] Usually, the multi-application hybrid deployment process of a Web program is as follows: Figure 1 As shown in the figure, the main application and sub-application 1, sub-application 2, and sub-application 3 are deployed on the front-end APP. Iframe is an HTML tag that embeds another document in the current HTML document. The Iframe element creates an inline frame containing another document. Sub-application 1, sub-application 2, and sub-application 3 are embedded in the main application through Iframe, but the main application interacts with the main application backend server, while sub-application 1 interacts with the backend server of sub-application 1, sub-application 2 interacts with the backend server of sub-application 2, and sub-application 3 interacts with the backend server of sub-application 3.
[0082] JavaScript ("JS" for short) is a lightweight, interpreted or just-in-time compiled programming language with function priority. Although it is famous as a scripting language for developing web pages, it is also used in many non-browser environments. JavaScript is a dynamic scripting language based on prototype programming and multiple paradigms, and supports object-oriented, imperative, declarative, and functional programming paradigms. JS follows the same-origin policy, that is, the same protocol, the same domain name, and the same port number, otherwise it is considered cross-domain.
[0083] The same-origin policy is a well-known security policy proposed by Netscape. Now all browsers that support JavaScript use this policy. It is the most core and basic security function of the browser. If the same-origin policy is missing, the normal functions of the browser may be affected. Simply put, it means that two resources are not from the same source. For security reasons, when the JavaScript in the page requests resources from non-same sources, cross-domain problems will occur - that is, cross-domain requests. At this time, due to the same-origin policy, the page access request will be prohibited by the browser, which is the so-called cross-domain problem.
[0084] The above is the conventional HTML application integration method. Although this method can embed the three applications into the main application page through Iframe, since the backend server address of the main application is 192.168.1.100, the backend server address of sub-application 1 is 192.168.1.101, the backend server address of sub-application 2 is 192.168.1.102, and the backend server address of sub-application 3 is 192.168.1.103, the four applications (main application, applications 1-3) are not running under the same domain and same source strategy, which makes it difficult for the sub-applications to communicate with each other, and it is impossible to implement operations such as login / logout, token management, multi-language switching, and theme switching for the entire application.
[0085] In view of this, the present application embodiment proposes a method for accessing a web page, which is applied to a client, such as Figure 2 As shown, including:
[0086] Step 201, receiving and responding to a first user access operation on a first page of a first application, and obtaining user access information, wherein the user access information includes a second application page identifier;
[0087] In the embodiment of the present application, the first application can be a main application, and the second application can be a sub-application.
[0088] Exemplarily, the main application page receives and responds to the first user access operation to obtain the sub-application page identifier, wherein the first user access operation is a user click operation on the sub-application menu on the main application page, the click operation is used to start the sub-application and request to load the sub-application page.
[0089] Step 202: When the client cache does not include the second application page information, a page loading request is sent to the first server, where the page loading request is used by the first server to obtain the second application page information from the second server.
[0090] The second application page information is the page information corresponding to the second application page identifier. In the embodiment of the present application, a page loading request can be sent to the first server through a third application. The first server is the main application backend server, and the third application can be the main application Iframe component, and the sub-application page is embedded into the main application page through the main application Iframe component.
[0091] In the embodiment of the present application, when the main application performs a page click operation, the page loading request generated by the client, whether loading the main application page or loading the sub-application page, is sent by the client to the main application backend server. This is a resource request of the same origin and domain for the browser, thereby realizing the switching of resource requests of sub-applications corresponding to different functional modules.
[0092] Step 203: Obtain the second application page information.
[0093] After sending the page loading request to the main application backend server, the main application backend server forwards the page loading request to the corresponding sub-application server, obtains the second application page information from the corresponding sub-application server, and then sends it to the client.
[0094] Step 204: load the second application page according to the second application page information.
[0095] The embodiment of the present application solves the problem that page request switching between sub-applications and main applications of different functional modules cannot be realized due to their non-same origin. The present application uses the main application back-end server as a forwarding proxy server for the servers of other sub-applications, so that the browser considers that all page requests are of the same origin and domain, and thus will not intercept the corresponding page loading requests, thereby realizing page switching of different functional modules.
[0096] The embodiment of the present application sends a page loading request to the first server, including: using the second application page identifier as the secondary directory of the current route to obtain the real routing address; and sending a page loading request to the first server according to the real routing address.
[0097] Through the above method, it can be ensured that the Iframe component sends the sub-application page loading request to the main application backend server. When the user clicks the corresponding icon on the main application page to trigger the sub-application page loading, it will point to the corresponding sub-application page identifier. This application uses the sub-application page identifier as the real routing address obtained by the secondary directory of the current route, and the current route includes the route of the main application backend server. This means that the routing address corresponding to all sub-applications is the secondary directory of the main application backend server route, which can ensure that when the page request is loaded, the page request is sent to the main application backend server, and the main application backend server will be notified to the sub-application server to which the page loading request needs to be forwarded according to the routing address corresponding to the sub-application.
[0098] As an optional implementation, the page loading request includes the second application page identifier; the page loading request is used to instruct the first server to obtain the second server identifier corresponding to the second application page identifier according to a target correspondence relationship, and obtain the second application page information from the second server; wherein the target correspondence relationship includes a correspondence between the page identifier and the server identifier.
[0099] In the embodiment of the present application, the main application backend server stores the correspondence between different sub-application page identifiers and sub-application server identifiers. When the user clicks on the sub-application menu, a page loading request carrying the sub-application page identifier is generated and sent to the main application backend server, so that the main application backend server determines which sub-application server to obtain the sub-application page information from based on the correspondence between the sub-application page identifier and the sub-application server identifier.
[0100] As an optional implementation, the method of the embodiment of the present application further includes:
[0101] Obtaining a second correspondence between the second server identifier and the second application page identifier;
[0102] A synchronization request is sent to the first server, where the synchronization request is used by the first server to update the second corresponding relationship to the target corresponding relationship.
[0103] The client locally stores the correspondence between the sub-application page identifier and the sub-application server identifier. The correspondence between the sub-application page identifier and the sub-application server identifier can be pre-configured during the configuration phase, and the pre-configured correspondence can be synchronized to the main application backend server. The correspondence can also be updated, and after the update is completed, the updated correspondence between the sub-application page identifier and the sub-application server identifier can be synchronized to the main application backend server.
[0104] As an optional implementation, sending a page loading request to the first server includes:
[0105] The second application page identifier is used as the secondary directory of the current route to obtain the real route address;
[0106] According to the real routing address, a page loading request is sent to the first server.
[0107] Determine the page ID of the sub-application requested to be loaded through the main application, use the sub-application page ID as the secondary directory of the main application backend server routing, and obtain the real routing address; when it is determined that the embedded framework Iframe component of the third application, i.e. the main application, has not been created, create the embedded framework Iframe component of the main application, and send a page loading request to the main application backend server according to the real routing address through the Iframe component.
[0108] The main application detects the operation of clicking the sub-application menu on the main application page, determines that the operation points to the sub-application page identifier, and determines the real routing address by the main application; because it is a click on the sub-application menu, the sub-application has not yet been started, and the Iframe component for embedding the sub-application has not been created, so the main application first creates the Iframe component, and after creating the Iframe component, the Iframe component sends a page loading request to the main application backend server according to the real routing address. If an Iframe has been created by opening other sub-application menus before, the Iframe component directly sends a page loading request to the main application backend server according to the real routing address.
[0109] As an optional implementation, the first application monitors the routing address change, adds an indicator before the second application page address in the real routing address, and adds it to the routing of the first server to obtain a new URL.
[0110] In the embodiment of the present application, based on the operation of the sub-application menu on the main application page, an indicator is added to the front of the sub-application page identifier pointed to by the operation, and then added to the route of the main application backend server to obtain a new URL; the new URL is jumped to and the route resolution is triggered, and the sub-application page identifier to be jumped to is determined according to the indicator by parsing the new URL after the jump.
[0111] If the user clicks on the sub-application menu, the current URL address is the route of the main application backend server, and the operation will point to the corresponding sub-application page logo. Pre-set rules in the main application, automatically add indicators to the sub-application page logo that the current operation points to, and then add it to the route of the main application backend server to obtain a new URL.
[0112] A new URL is generated and displayed in the address bar, and an automatic jump is triggered (i.e., the URL address is updated) and parsed. During the parsing process, when the main application parses the indicator, it can be determined that the sub-application page needs to be loaded, and the sub-application that needs to be loaded is determined based on the sub-application page identifier after the indicator.
[0113] As an optional implementation, the method further includes: when the client cache includes the second application page information, loading the second application page according to the second application page information. If when requesting to load a sub-application page, the sub-application page may have been requested to be loaded before and the sub-application page information is cached in the client, the cached sub-application page information is loaded through the Iframe component. Otherwise, the Iframe component is used for loading again.
[0114] As an optional implementation, the method further includes: generating an interface between the first application and the second application according to a preset configuration file; the interface is used for the first application and the second application to communicate different types of messages. Specifically, the configuration file is stored on the client, and an interface between the main application and the sub-application can be generated by parsing the configuration file, so that the main application and the sub-application can communicate different types of messages through the interface, that is, complete the communication of different types of messages. The main application and the sub-application interface is established to meet the needs of developers when the main application and the sub-application interact.
[0115] As an optional implementation manner, generating an interface between the first application and the second application according to a preset configuration file includes:
[0116] A function is called in the second application according to a preset configuration file, and a message is dispatched to the first application through the called function; and an interface between the first application and the second application is established through the dispatched message.
[0117] By parsing the configuration file, the sub-application can call a function, and when the function is called, a message is dispatched to the main application to establish an interface between the first application and the second application, and the interface defines the message type when the main application and the sub-application communicate. In a possible implementation, when the sub-application is started, the main application reads the shared information that affects the loading of the sub-application through the interface, and applies the shared information to the sub-application.
[0118] As an optional implementation manner, when the client cache does not include the second application page information, the method further includes:
[0119] A context environment of the second application is created, wherein the context environment includes window information of the second application and registration events of the second application.
[0120] Specifically, a corresponding configuration file for creating a sub-application context environment may be configured locally, the sub-application window may be loaded by parsing the configuration file, an Iframe component may be created, and some data may be initialized through predefined registration events.
[0121] As an optional implementation, creating a context environment of the second application includes:
[0122] Reading shared information of the first application through an interface between the first application and the second application, where the shared information is received by the first application and obtained in response to a user setting operation;
[0123] The shared information is applied to the second application as a registration event, and the registration event is used to initialize data of the second application.
[0124] The above-mentioned method in the embodiment of the present application generates an interface between the main application and the sub-application. In the embodiment of the present application, when creating the context environment of the sub-application, the operations of the pre-defined user main application can be listened to, and shared information can be obtained according to the corresponding operations. For example, the user switches the page language of the main application from English to Chinese, or the user sets the window display mode from full screen to small window display, thereby obtaining the corresponding shared information and notifying the sub-application through the message corresponding to the interface. The sub-application uses the obtained shared information as a registration event, which can be used for data initialization of the sub-application, that is, determining to use the Chinese language environment and adopt a small window display when the sub-application starts loading.
[0125] The present application also provides a method for accessing a Web page, which is applied to a main application backend server, such as Figure 3 As shown, including:
[0126] Step 301, receiving a page loading request sent by a client, wherein the page loading request is used by a first server to obtain second application page information;
[0127] The above page loading request carries the second application page identifier, and the second application page information is the page information corresponding to the second application page identifier.
[0128] Step 302, parsing the page loading request to determine the second server corresponding to the second application page information;
[0129] Since the page loading request carries the second application page identifier, in an embodiment of the present application, the correspondence between the second application page identifier and the second server identifier is pre-stored in the main application backend server, the page loading request is parsed, and the second server corresponding to the second application page information is determined, including: parsing the page loading request to determine the second application page identifier; and determining the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target correspondence relationship.
[0130] Step 303, obtaining second application page information from the second server;
[0131] The second server receives the page loading request, obtains the corresponding second application page information according to the second application page identifier, and sends the obtained second application page information to the main application backend server.
[0132] Step 304: Send the acquired second application page information to the client.
[0133] In the Web page access method provided in the embodiment of the present application, the main application backend server is responsible for forwarding the sub-application request loading request and the second application page information, that is, it provides HTTP services as the main application backend server and serves as a forwarding proxy server for the sub-application.
[0134] As an optional implementation manner, parsing the page loading request to determine the second application page identifier includes:
[0135] Parsing the page loading request to determine the real routing address;
[0136] Parse the real routing address to determine that the address after the first server routing is the second application page identifier;
[0137] Determining the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target corresponding relationship includes:
[0138] According to the routing forwarding table established based on the target corresponding relationship, matching the second application page identifier with the routing forwarding table;
[0139] If there is a matching page identifier, a forwarding path of the second server corresponding to the second application page information is determined according to the matching page identifier.
[0140] As mentioned above, the real routing address is the address obtained by using the sub-application page identifier as the secondary directory of the current route. The current route includes the route of the main application backend server. A routing forwarding table is established in advance based on the correspondence between the second application page identifier and the second server. The routing forwarding table is used to indicate the forwarding path of each second application page identifier to the corresponding second server. The main application backend server parses and determines the second application page identifier after the main application backend server route, matches the second application page identifier with the page identifier in the routing forwarding table, and determines the forwarding path of the second server corresponding to the second application page information based on the matched page identifier, thereby forwarding the second application page identifier to the corresponding second server according to the forwarding path.
[0141] like Figure 4 The figure shows the framework diagram of the Web access method proposed in this application, which is mainly composed of two parts: the main application front end and the main application back end. The main application front end is mainly responsible for managing all sub-application main pages and loading sub-application pages through Iframe components. The main application back end is responsible for providing front-end HTTP services and providing proxy forwarding services for sub-applications. Through proxy forwarding, the requests sent by the front end are forwarded to the target server according to the proxy rules.
[0142] For example, the routing address of the main application backend server is 192.168.1.100, the routing address of the server of sub-application 1 is 192.168.1.101, the routing address of the server of sub-application 2 is 192.168.1.102, and the routing address of the server of sub-application 3 is 192.168.1.103.
[0143] The front-end Iframe uses the same IP (192.168.1.100) port to access all applications, so that the Iframe recognizes that all resource documents are in the same source and domain. Since a forwarding proxy is used, sub-applications can use any protocol such as http or https. In some cases, they can be deployed in the form of main application https + sub-application http.
[0144] The Iframe container created by the main application is a virtual container that can store multiple Iframe components. All Iframe components created by sub-applications are placed in this container. Mounting, uninstalling, and operating the application are to display or hide the corresponding Iframe components.
[0145] For example, the process of accessing a web page is as follows: Figure 5 As shown, including:
[0146] Open the main application website http: / / 192.168.1.100:8000 to display the main application page. The main application will create an environment to run the sub-application, including sub-application instances, sub-application caches, sub-application configurations, and other information.
[0147] According to the operation of clicking the sub-application menu on the main application page, it is determined that you need to jump to the sub-application page;
[0148] According to the sub-application app3 and page identifier pointed to by the operation, add the indicator # / apps to get the new URL, as follows:
[0149] http: / / 192.168.1.100:8000 / # / apps / app3 / view / joblist;
[0150] Apps is the fixed application container route of the front end, which means loading and displaying the subsequent sub-applications;
[0151] app3 is the sub-application name, indicating the application to be loaded and displayed;
[0152] view / joblist is the actual routing address of the sub-application, indicating the page ID of the sub-application to be displayed.
[0153] The current URL address bar displays http: / / 192.168.1.100:8000 / # / apps / app3 / view / joblist, and the routing address resolution is triggered;
[0154] When the main application route jumps to a new URL, the sub-application route needs to be parsed. Through route matching, the sub-application container route with the route address of apps is obtained, and the app3 sub-application is displayed, and the view / joblist page of the sub-application is jumped to.
[0155] In the main application, determine whether the sub-application app3 has been created (that is, whether it has been started or loaded). If the sub-application has been created, find the sub-application instance environment from the memory cache and mount the sub-application to the interface. Otherwise, create the sub-application context environment. This context environment includes the sub-application window information, Iframe component, sub-application information, registration events and other data initialization and some processing operations of the sub-application.
[0156] In the main application, convert the address http: / / 192.168.1.100:8000 / # / apps / app3 / view / joblist to the real routing address http: / / 192.168.1.100:8000 / app3 / # / view / joblist of the sub-application.
[0157] Create an Iframe component of the main application and assign the real routing address to the Iframe component in the main application:
[0158] Iframe.window.location.href="http: / / 192.168.1.100:8000 / app3 / # / view / joblist";
[0159] The Iframe component sends a page loading request to the main application backend server, and the request carries the page identifier http: / / 192.168.1.100:8000 / app3 / # / view / joblist. This is equivalent to mounting the routing address of the sub-application server http: / / 192.168.1.103:8000 / to the backend proxy forwarding directory / app3 / of the main application. The sub-application can be accessed through the port opened by the main application at http: / / 192.168.1.100:8000 / app3 / . This step realizes that app3 and the main application frontend have the same origin and domain. The main application backend server determines the target server through address matching, obtains the sub-application information from the target server and forwards it to the frontend, so as to start app3 and load the corresponding sub-application page.
[0160] In the sub-application, the function window.frameElement.dispatchEvent({}) is called to dispatch a message to the main application, and an interface between the main application and the sub-application is established. Since the sub-application runs under the Iframe component of the main application, the window.frameElement object of the sub-application is the Iframe object of the main application. In the main application, the function iframe.addEventListener(APP_EVENT,app_init.bind(this)) used to listen to events of the sub-application is used to listen to the Iframe event of the main application. As a registered event, the data initialization of the sub-application can be completed, the Iframe of the current sub-application is mounted on the interface, and the Iframes of other loaded sub-applications are hidden.
[0161] During the running of the sub-application, the history.pushState parameter of the sub-application's historical push status is intercepted, and the URL changes of the sub-application are monitored through the Hook pushState method. The sub-application's URL is converted to the main application's URL (http: / / 192.168.1.100:8000 / app3 / # / view / joblist is converted to http: / / 192.168.1.100:8000 / # / apps / app3 / view / joblist), and the converted URL is displayed in the browser address bar.
[0162] The specific data flow is as follows Figure 6 As shown, no further details are given here.
[0163] The above is a description of a method for accessing a Web page in the present application, and the following is a description of a device for executing the above-mentioned Web page access.
[0164] See also Figure 7 The present application embodiment provides a web page access device, including:
[0165] A page identification determination module 701 is used to receive and respond to a first user access operation on a first page of a first application, and obtain user access information, where the user access information includes a second application page identification;
[0166] A page request loading module 702, configured to send a page loading request to the first server when the client cache does not include the second application page information, wherein the page loading request is used by the first server to obtain the second application page information from the second server;
[0167] A page information acquisition module 703, used to acquire the second application page information;
[0168] The page loading module 704 is used to load the second application page according to the second application page information.
[0169] Optionally, the page loading request includes the second application page identifier; the page loading request is used to instruct the first server to obtain the second server identifier corresponding to the second application page identifier according to a target correspondence relationship, and obtain the second application page information from the second server; wherein the target correspondence relationship includes a correspondence between the page identifier and the server identifier.
[0170] Optionally, the device comprises:
[0171] A correspondence synchronization module is used to obtain a second correspondence between the second server identifier and the second application page identifier; send a synchronization request to the first server, and the synchronization request is used by the first server to update the second correspondence to the target correspondence.
[0172] Optionally, when the client cache does not include the second application page information, the page request loading module is further configured to:
[0173] A context environment of the second application is created, wherein the context environment includes window information of the second application and registration events of the second application.
[0174] Optionally, the device further comprises:
[0175] An interface communication module, used to generate an interface between the first application and the second application according to a preset configuration file;
[0176] The interface is used for the first application and the second application to communicate different types of messages.
[0177] Optionally, the interface communication module generates an interface between the first application and the second application according to a preset configuration file, including:
[0178] Calling a function in the second application according to a preset configuration file, and sending a message to the first application through the called function;
[0179] Different types of interfaces between the first application and the second application are established through different dispatch messages.
[0180] Optionally, the page request loading module creates a context environment of the second application, including:
[0181] Reading shared information of the first application through an interface between the first application and the second application, where the shared information is received by the first application and obtained in response to a user setting operation;
[0182] The shared information is applied to the second application as a registration event, and the registration event is used to initialize data of the second application.
[0183] Optionally, the page request loading module is also used to:
[0184] In a case where the client cache includes the second application page information, the second application page is loaded according to the second application page information.
[0185] Optionally, the page request loading module sends a page loading request to the first server, including:
[0186] The second application page identifier is used as the secondary directory of the current route to obtain the real route address;
[0187] According to the real routing address, a page loading request is sent to the first server.
[0188] Optionally, it also includes:
[0189] The routing update module is used to monitor the routing address change through the first application, add an indicator before the second application page address in the real routing address, and add it to the routing of the first server to obtain a new URL.
[0190] The present application also provides a web page access device, such as Figure 8 As shown, including:
[0191] A loading request receiving module 801 is used to receive a page loading request sent by a client, where the page loading request is used by the first server to obtain second application page information;
[0192] A loading request forwarding module 802 is used to parse the page loading request and determine the second server corresponding to the second application page information;
[0193] The page information acquisition module 803 is used to acquire the second application page information from the second server;
[0194] The page information forwarding module 804 is used to send the acquired second application page information to the client.
[0195] Optionally, the loading request forwarding module parses the page loading request to determine the second server corresponding to the second application page information, including:
[0196] Parsing the page loading request to determine a second application page identifier;
[0197] Determine the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target corresponding relationship;
[0198] The target correspondence relationship includes a correspondence relationship between a page identifier and a server identifier.
[0199] Optionally, the loading request forwarding module parses the page loading request to determine the second application page identifier, including:
[0200] Parsing the page loading request to determine the real routing address;
[0201] Parse the real routing address to determine that the address after the first server routing is the second application page identifier;
[0202] The loading request forwarding module determines the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target corresponding relationship, including:
[0203] According to a routing forwarding table established in advance according to the target corresponding relationship, matching the second application page identifier with the routing forwarding table;
[0204] If there is a matching page identifier, a forwarding path of the second server corresponding to the second application page information is determined according to the matching page identifier.
[0205] The above-mentioned first type of Web page access device provided in the embodiment of the present application and the Web page access method applied to the client provided in the above-mentioned embodiment of the present application belong to the same inventive concept, and the above-mentioned second type of Web page access device and the Web page access method applied to the main application server provided in the above-mentioned embodiment of the present application belong to the same inventive concept. The various implementation methods of the Web page access method provided in the above-mentioned embodiments can be applied to the implementation of the Web page access device in this embodiment, and will not be repeated here.
[0206] The Web page access device in the embodiment of the present application is described above from the perspective of modular functional entities. The Web page access device in the embodiment of the present application is described below from the perspective of hardware processing.
[0207] Refer to the following Fig. 9 The web page access device 190 according to this embodiment of the present application is described. Fig. 9 The displayed web page access device 190 is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.
[0208] like Fig. 9As shown, the web page access device 190 is in the form of a general electronic device. The components of the web page access device 190 may include but are not limited to: at least one processor 191, at least one memory 192, and a bus 193 connecting different system components (including the memory 192 and the processor 191). The memory 192 is used to store computer programs; the processor 191 is used to read the program in the memory and execute any of the above-mentioned web page access methods.
[0209] Bus 193 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a processor, or a local bus using any of a variety of bus architectures.
[0210] The memory 192 may include a readable medium in the form of a volatile memory, such as a random access memory (RAM) 1921 and / or a cache memory 1922 , and may further include a read-only memory (ROM) 1923 .
[0211] Memory 192 may also include a program / utility 1925 having a set (at least one) of program modules 1924, such program modules 1924 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.
[0212] The Web page access device 190 may also communicate with one or more external devices 194 (e.g., keyboards, pointing devices, etc.), one or more devices that enable a user to interact with the Web page access device 190, and / or any device that enables the Web page access device 190 to communicate with one or more other electronic devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 195. Furthermore, the Web page access device 190 may also communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) via a network adapter 196. As shown, the network adapter 196 communicates with other modules for the Web page access device 190 via a bus 193. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the Web page access device 190, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.
[0213] In some possible implementations, various aspects of a Web page access method provided by the present application may also be implemented in the form of a program product, which includes program code. When the program product is run on a computer device, the program code is used to enable the computer device to execute the steps of any one of the Web page access methods according to the various exemplary implementations of the present application described above in this specification.
[0214] The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.
[0215] The program product for accessing Web pages of the embodiment of the present application may adopt a portable compact disk read-only memory (CD-ROM) and include program code, and can be run on an electronic device. However, the program product of the present application is not limited thereto. In this document, a readable storage medium may be any tangible medium containing or storing a program, which may be used by or in combination with an instruction execution system, an apparatus or a device.
[0216] The readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, wherein the readable program code is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The readable signal medium may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.
[0217] The program code embodied on the readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination of the foregoing.
[0218] The program code for performing the operations of the present application can be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, etc., and also conventional procedural programming languages such as "C" language or similar programming languages. The program code can be executed entirely on the user electronic device, partially on the user device, as an independent software package, partially on the user electronic device and partially on the remote electronic device, or entirely on the remote electronic device or server. In the case of a remote electronic device, the remote electronic device can be connected to the user electronic device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external electronic device (for example, using an Internet service provider to connect through the Internet).
[0219] It should be noted that, although several units or subunits of the device are mentioned in the above detailed description, this division is merely exemplary and not mandatory. In fact, according to the embodiments of the present application, the features and functions of two or more units described above can be embodied in one unit. Conversely, the features and functions of one unit described above can be further divided into multiple units to be embodied.
[0220] In addition, although the operations of the method of the present application are described in a specific order in the drawings, this does not require or imply that the operations must be performed in this specific order, or that all the operations shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps.
[0221] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.
[0222] The present application is described with reference to the flowcharts and block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and block diagram, as well as the combination of the processes and boxes in the flowchart and block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and block diagram. Figure 1 Process or multiple processes and boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0223] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 Process or multiple processes and boxes Figure 1 A function specified in one or more boxes.
[0224] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 Process or multiple processes and boxes Figure 1 The steps for the functions specified in one or more boxes.
[0225] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications falling within the scope of the present application.
[0226] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.
Claims
1. A method for accessing a web page, applied to a client, characterized in that: include: receiving and responding to a first user access operation on a first page of a first application, and acquiring user access information, wherein the user access information includes a second application page identifier; In a case where the client cache does not include the second application page information, sending a page loading request to the first server, wherein the page loading request is used by the first server to obtain the second application page information from the second server; Obtaining the second application page information; The second application page is loaded according to the second application page information.
2. The method according to claim 1, characterized in that: The page loading request includes the second application page identifier; the page loading request is used to instruct the first server to obtain the second server identifier corresponding to the second application page identifier according to a target correspondence relationship, and obtain the second application page information from the second server; wherein the target correspondence relationship includes a correspondence between a page identifier and a server identifier.
3. The method according to claim 2, characterized in that The method further comprises: Obtaining a second correspondence between the second server identifier and the second application page identifier; A synchronization request is sent to the first server, where the synchronization request is used by the first server to update the second corresponding relationship to the target corresponding relationship.
4. The method according to claim 1, characterized in that: In the case where the client cache does not include the second application page information, the method further includes: A context environment of the second application is created, wherein the context environment includes window information of the second application and a registered event of the second application.
5. The method according to any one of claims 1 to 4, characterized in that: The method further comprises: Generating an interface between the first application and the second application according to a preset configuration file; The interface is used for the first application and the second application to communicate different types of messages.
6. The method according to claim 5, characterized in that Generating an interface between the first application and the second application according to a preset configuration file includes: Calling a function in the second application according to a preset configuration file, and sending a message to the first application through the called function; An interface between the first application and the second application is established by dispatching a message.
7. The method according to claim 5, characterized in that Create a context environment for the second application, including: Reading shared information of the first application through an interface between the first application and the second application, where the shared information is received by the first application and obtained in response to a user setting operation; The shared information is applied to the second application as a registration event, and the registration event is used to initialize data of the second application.
8. The method according to claim 1, characterized in that Also includes: In a case where the client cache includes the second application page information, the second application page is loaded according to the second application page information.
9. The method according to claim 1, characterized in that: Sending a page loading request to the first server, including: The second application page identifier is used as the secondary directory of the current route to obtain the real route address; According to the real routing address, a page loading request is sent to the first server.
10. The method according to claim 9, characterized in that Also includes: The routing address change is monitored through the first application, and an indicator is added before the second application page address in the real routing address, and after it is added to the routing of the first server, a new URL is obtained.
11. A method for accessing a web page, applied to a first server, characterized in that: include: Receive a page loading request sent by a client, where the page loading request is used by the first server to obtain second application page information; Parsing the page loading request to determine a second server corresponding to the second application page information; Acquire second application page information from the second server; The acquired second application page information is sent to the client.
12. The method according to claim 11, characterized in that Parsing the page loading request to determine the second server corresponding to the second application page information includes: Parsing the page loading request to determine a second application page identifier; Determine the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target corresponding relationship; The target correspondence relationship includes a correspondence relationship between a page identifier and a server identifier.
13. The method according to claim 12, characterized in that Parsing the page loading request to determine the second application page identifier includes: Parsing the page loading request to determine the real routing address; Parse the real routing address to determine that the address after the first server routing is the second application page identifier; Determining the second server corresponding to the second application page information according to the server identifier corresponding to the second application page identifier in the target corresponding relationship includes: According to a routing forwarding table established in advance according to the target corresponding relationship, matching the second application page identifier with the routing forwarding table; If there is a matching page identifier, a forwarding path of the second server corresponding to the second application page information is determined according to the matching page identifier.
14. A web page access device, characterized in that: include: A page identification determination module, configured to receive and respond to a first user access operation on a first page of a first application, and obtain user access information, wherein the user access information includes a second application page identification; a page request loading module, configured to send a page loading request to the first server when the client cache does not include the second application page information, wherein the page loading request is used by the first server to obtain the second application page information from the second server; A page information acquisition module, used to acquire the second application page information; A page loading module is used to load the second application page according to the second application page information.
15. A web page access device, characterized in that: include: A loading request receiving module, used to receive a page loading request sent by a client, wherein the page loading request is used by the first server to obtain the second application page information; A loading request forwarding module, used to parse the page loading request and determine the second server corresponding to the second application page information; A page information acquisition module, used to acquire the second application page information from the second server; The page information forwarding module is used to send the acquired second application page information to the client.
16. A web page access device, characterized in that: include: Memory and processor; Wherein, the memory is used to store computer programs; The processor is used to read the program in the memory and execute the method according to any one of claims 1-10, or execute the method according to any one of claims 11-13.
17. A computer program medium, characterized in that A computer program is stored thereon, characterized in that when the program is executed by a processor, the steps of the method according to any one of claims 1 to 10 are implemented, or the steps of the method according to any one of claims 11 to 13 are implemented.
Citation Information
Cited By
Data source configuration loading method, electronic equipment, medium and computer program product
CN121579094A