Page function component embedding method and device and medium

Abstract

The invention discloses a page function component embedding method and device and a medium, and the method comprises the steps: independently packaging different business functions, and obtaining a plurality of standardized function components; adding the URL paths of the plurality of standardized functional components into the SRC of an iframe label, and establishing a cross-domain resource sharing strategy in the iframe label; and embedding the plurality of standardized functional components into a main page by embedding the iframe tag into the main page. By establishing a cross-domain resource sharing strategy, cross-domain requests of different domains of a main page and a component are realized; sRC is added to the URL of the component, so that switching of different components is realized; and the public service component is embedded through iframe, so that rapid integration and multiplexing can be realized, and the development workload is reduced.

Description

Technical Field

[0001] This application relates to the field of data processing, and particularly to a method, device, and medium for embedding page function components. Background Art

[0002] In the era of the rapid development of digital business systems, when developing business systems, business systems are usually developed independently. As a result, common function components such as user login and data reports are repeatedly implemented in multiple systems, which not only increases the development cost and cycle, but also causes code redundancy and maintenance difficulties, and resource waste caused by repeated development of function modules.

[0003] Currently, in order to reduce repeated development, various developed function components are usually embedded in the main pages of different required business systems. However, although this web page embedding technology can achieve page nesting, it has significant limitations: First, since the function components and the main page belong to different access domains, cross-domain access restrictions make it difficult to interact with data between the main page and the embedded components; Second, when the state of the main page changes, the function components cannot synchronize data in a timely manner, easily leading to inconsistent page states or abnormal functions. Summary of the Invention

[0004] Embodiments of this application provide a method, device, and medium for embedding page function components, which are used to solve the problems of difficult cross-domain interaction and inconsistent page states in existing web page embedding technologies.

[0005] Embodiments of this application adopt the following technical solutions:

[0006] On the one hand, embodiments of this application provide a method for embedding function components in a page. The method includes:

[0007] Independently package different business functions to obtain multiple standardized function components; then add the URL paths of the multiple standardized function components to the SRC of the iframe tag, and establish a cross-origin resource sharing policy in the iframe tag; the cross-origin resource sharing policy includes multiple different types of cross-domain communication APIs; finally, embed the multiple standardized function components into the main page by embedding the iframe tag in the main page.

[0008] In one example, independently packaging different business functions to obtain multiple standardized function components specifically includes: independently packaging different business functions to obtain multiple initial function components; unifying the interface specifications of the multiple initial function components to obtain multiple standardized function components; the interface specifications include component data acquisition interface specifications, component data modification interface specifications, and status query interface specifications for interacting with external systems.

[0009] In one example, after embedding the multiple standardized functional components into the main page, the method further includes: setting status identifiers in the main page and the standardized functional components respectively; the status identifiers of the multiple standardized functional components being the same; then, when a standardized functional component is accessed, obtaining main page data and standardized functional component data through a data acquisition interface; and when an accessed standardized functional component has a status identifier inconsistent with that of the main page, modifying the status of the accessed standardized functional component through the main page and component data modification interface specification so as to synchronize the status of the accessed standardized functional component with that of the main page.

[0010] In one example, the method further includes: when an accessed standardized functional component has a status identifier consistent with that of the main page, generating a permission token corresponding to the access party according to a preset permission rule; the permission token including the access permission corresponding to the access party; and controlling the access of the access party to the accessed standardized functional component according to the permission token.

[0011] In one example, before controlling the access of the access party to the standardized functional component according to the permission token, the method further includes: determining whether the main page and the accessed standardized functional component are of the same origin; if the main page and the accessed standardized functional component are of the same origin, transmitting the main page access information to the accessed standardized functional component through a communication system; if the main page and the accessed standardized functional component are not of the same origin, transmitting the main page access information to the accessed standardized functional component according to the cross-domain communication API corresponding to the accessed standardized functional component.

[0012] In one example, the method further includes: recording the access interaction information between the main page and the accessed standardized functional business component; the access interaction information including data transmission, status change, and permission verification; and sending the access interaction information to the client for auditing and troubleshooting.

[0013] In one example, after embedding multiple standardized functional components into the main page, the method further includes: when a change request of a standardized functional component is detected, replacing the URL path of the original standardized functional component in the SRC with the URL path of the changed standardized functional component.

[0014] In one example, after embedding multiple standardized functional components into the main page, the method further includes: performing functional testing on the multiple standardized functional business components; and removing the standardized functional business components that fail the functional testing and re-embedding new standardized functional components with the same function.

[0015] On the other hand, an embodiment of the present application provides a page embedding functional component device, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein, the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute a page embedding functional component method according to any one of the above.

[0016] On the other hand, an embodiment of the present application provides a non-volatile computer storage medium for page embedding functional components, storing computer-executable instructions that can execute a page embedding functional component method according to any one of the above.

[0017] The above at least one technical solution adopted in the embodiment of the present application can achieve the following beneficial effects:

[0018] In the present application, by establishing a cross-origin resource sharing policy in the iframe tag, cross-origin requests between different domains of the main page and business components are realized; then, by adding different business component URLs to the SRC of the iframe tag, it is ensured that when the component is updated, the URL pointing to the deployed business component is realized, and the switching of different business components is achieved; by embedding business components through iframes, fast integration and reuse can be realized, reducing the development workload. By unifying the business component interface specifications and call methods, data synchronization between the main page and the components is realized, and finally, unified identity authentication is completed through a preset permission library, greatly enhancing the security performance of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions of the present application, some embodiments of the present application will be described in detail below with reference to the drawings. In the drawings:

[0020] Figure 1 is a schematic flowchart of a method for embedding a page functional component provided by an embodiment of the present application;

[0021] Figure 2 is an interaction diagram between the main page and business components of a method for embedding a page functional component provided by an embodiment of the present application;

[0022] Figure 3 is a schematic structural diagram of a page embedding functional component device provided by an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0023] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and the corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, rather than all of them. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in this application without creative efforts belong to the scope of protection of this application.

[0024] The following will refer to the drawings to elaborate on some embodiments of this application in detail.

[0025] Figure 1 It is a flowchart of a method for embedding a page function component provided by an embodiment of this application. This method can be applied to different business fields. Some input parameters or intermediate results in this process allow manual intervention and adjustment to help improve accuracy.

[0026] The implementation of the analysis method involved in the embodiments of this application can be a terminal device or a server, and this application does not impose special restrictions on this. For the convenience of understanding and description, the following embodiments will be described in detail by taking a controller as an example.

[0027] It should be noted in advance that:

[0028] iframe (Inline Frame) is a tag in HTML used to embed another independent HTML document (or resource) in the current web page, forming a "page within a page". It allows developers to display multiple independent content areas simultaneously in a main page, and each area can be loaded, rendered, and interacted with independently.

[0029] In the embodiments of this application, the system architecture is divided into three layers, namely the top layer, the middle layer, and the bottom layer. Specifically: the top layer, the user access layer, where users access the main page containing iframes through a browser; the middle layer, the business component layer, with standard business components embedded through iframes, such as user login, data reports, etc. These components can be independent HTML pages from different service providers; the bottom layer, the service support layer, including a unified identity authentication platform, CORS policy configuration, web server, etc., providing support for the integration and access of business components.

[0030] Based on this, Figure 1 the process in

[0031] S101: Independently package different business functions to obtain multiple standardized function components.

[0032] It should be noted that in some embodiments of the present application, before independently encapsulating different business functions, it is necessary to first clarify the specific business requirements of the business function components to be embedded through iframes, such as user login, data display, navigation bars, etc. Then, according to the business requirements, plan the overall architecture of the system, including the front-end page, back-end service, database, and third-party services, etc.

[0033] Then, encapsulate different business functions independently to obtain multiple initial function components, and standardize the interfaces of the multiple initial function components to obtain multiple standardized function components; the interface specifications include component data acquisition interface specifications, component data modification interface specifications, and status query interface specifications for interacting with external systems, that is, including the unification of standards such as input parameters, output data, and call methods.

[0034] Furthermore, after the interface specifications are unified, it is necessary to develop the front-end pages of the common business components, including HTML, CSS, and JavaScript, and then develop the back-end logic to handle business requests and data interactions. Finally, through the front-end and back-end joint debugging, use tools (such as Postman, Swagger) to verify the correctness of the interfaces, ensure the normal data interaction, and enable the interfaces of the components to work correctly.

[0035] S102: Add the URL paths of the multiple standardized function components to the SRC of the iframe tag, and establish a cross-origin resource sharing policy in the iframe tag; the cross-origin resource sharing policy includes multiple different types of cross-origin communication APIs.

[0036] It should be noted that in some embodiments of the present application, set the attributes such as width, height, and frameborder of the iframe as needed to adapt to the page layout and style, and add the URL paths of each standard function component to be embedded to the SRC of the iframe tag. Then, it is necessary to configure a cross-origin resource sharing policy (such as CORS) to allow cross-origin requests from a specific domain.

[0037] S103: Embed the multiple standardized function components into the main page by embedding the iframe tag in the main page.

[0038] It should be noted that in some embodiments of the present application, the iframe tag is embedded into the main page of the business system, and each required standardized function component is embedded into the main page of the business system. After the embedding is completed, functional tests will be performed on each standardized function business component. For example, test whether the user login function can run normally and whether there are BUGs, etc. After the test is completed, the standardized function business components that fail the functional test will be removed and new standardized function components with the same completed functions will be re-embedded.

[0039] Furthermore, status identifiers are respectively set in the standardized function components with qualified test functions and the main page; the status identifier specification types of multiple standardized function components are the same; and a permission rule library is set according to user needs.

[0040] When a standardized function component is accessed, it is necessary to first determine whether the main page and the accessed standardized function component are of the same origin. If the main page and the accessed standardized function component are of the same origin, the main page access information is transmitted to the accessed standardized function component through the communication system, that is, the main page data and the standardized function component data are obtained through the data acquisition interface; and it is judged whether the main page status identifier is consistent with the status identifier of the accessed standardized function component. When there is an accessed standardized function component with a status identifier inconsistent with the main page status identifier, the status of the accessed standardized function component is modified through the main page and component data modification interface specification to synchronize the status of the accessed standardized function component with the status of the main page.

[0041] If the main page and the accessed standardized function component are not of the same origin, the main page access information is transmitted to the accessed standardized function component according to the cross-domain communication API corresponding to the accessed standardized function component. That is, the main page data and the standardized function component data are obtained through the data acquisition interface; and it is judged whether the main page status identifier is consistent with the status identifier of the accessed standardized function component. When there is an accessed standardized function component with a status identifier inconsistent with the main page status identifier, the status of the accessed standardized function component is modified through the main page and component data modification interface specification, such as using APIs such as window.postMessage for secure cross-document message passing, to synchronize the status of the accessed standardized function component with the status of the main page.

[0042] Furthermore, when the main page status identifier is consistent with the status of the accessed standardized function component, that is, after the synchronization of the status, a permission token corresponding to the access party is generated according to the preset permission rules; the permission token includes the access permission corresponding to the access party, and according to the permission token, the access of the access party to the accessed standardized function component is controlled.

[0043] For example, assume that the main page is a large shopping mall, and the standardized functional components are the stores in the mall. The status of the stores needs to be synchronized with the status of the mall, that is, the data synchronization process. It is not allowed that the mall is open for business while the stores are not. When a user enters the mall, that is, when the user accesses the main page, a permission token will be given. For two users, A and B, the permission token of A has a greater privilege, so A can access more stores, while the permission token of B has a smaller privilege, so B can access fewer stores.

[0044] It should also be noted that in order to prevent unauthorized embedding of standardized functional components into the main page, response headers such as X-Frame-Options and Content-Security-Policy are added to the HTTP response header of the business component to control the embedding permission of iframes and prevent unauthorized embedding of the main page.

[0045] Furthermore, after the information is synchronized between the main page and the accessed standardized functional component, the access interaction information between the main page and the accessed standardized functional business component is recorded. The access interaction information includes data transmission, status change, and permission verification, and the access interaction information is sent to the client for auditing and troubleshooting. Finally, if a change request for the standardized functional component initiated by the user is detected, the URL path of the original standardized functional component in the SRC of the iframe tag is replaced with the URL path of the changed standardized functional component, so that it points to the URL of the deployed common business component, and the component switch can be completed.

[0046] It should be noted that although the embodiments of the present application are described with reference to Figure 1 to introduce and explain steps S101 to S103 in sequence, this does not mean that steps S101 to S103 must be executed in a strict order. The reason why the embodiments of the present application introduce and explain steps S101 to S103 in the order shown in Figure 1 is to facilitate those skilled in the art to understand the technical solution of the embodiments of the present application. In other words, in the embodiments of the present application, the order between steps S101 to S103 can be appropriately adjusted according to actual needs.

[0047] Through Figure 1The method establishes a cross - origin resource sharing policy in the iframe tag, realizing cross - origin requests between different domains of the main page and business components; then, by adding different business component URLs to the SRC of the iframe tag, it ensures that when the component is updated, the URL pointing to the deployed business component is used, realizing the switching of different business components; embedding business components through iframes can achieve rapid integration and reuse, reducing the development workload. By unifying the interface specifications and call methods of business components, data synchronization between the main page and components is achieved, and finally, unified identity authentication is completed through a preset permission library, greatly enhancing the security performance of the system.

[0048] Figure 2 This is an interaction diagram between the main page and business components of a page function component embedding method provided by an embodiment of the present application.

[0049] In Figure 2 it shows the interaction process between the parent page (main page) and the sub - page (business component), that is, the data synchronization process; first, obtain the page state of the parent page, then call the sub - page method to modify the sub - page state to complete state synchronization, then when the parent page saves the state, obtain the page data, then call the sub - page method to operate on the sub - page and modify the sub - page data to complete data synchronization. After the parent page state is saved, it is changed to an uneditable state, and the sub - page method is called to refresh the sub - page data and adjust the state. After the parent page is modified and saved, the page is closed, and the sub - page method is called to empty the sub - page data.

[0050] Figure 3 This is a schematic structural diagram of a page function component embedding device provided by an embodiment of the present application, including:

[0051] At least one processor; and,

[0052] A memory communicatively connected to the at least one processor; wherein,

[0053] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute a page function component embedding method as described in any one of the above.

[0054] A page function component embedding non - volatile computer storage medium provided by some embodiments of the present application stores computer - executable instructions, and the computer - executable instructions can execute a page function component embedding method as described in any one of the above.

[0055] Each embodiment in this application is described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for the embodiments of the device and the medium, since they are basically similar to the method embodiment, the description is relatively simple. For the relevant parts, reference can be made to the corresponding description in the method embodiment.

[0056] The device and the medium provided by the embodiments of this application correspond one by one to the method. Therefore, the device and the medium also have beneficial technical effects similar to those of their corresponding methods. Since the beneficial technical effects of the method have been described in detail above, the beneficial technical effects of the device and the medium will not be elaborated here.

[0057] Those skilled in the art should understand that the embodiments of the present invention can be provided as a method, a system, or a computer program product. Therefore, the present invention can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0058] The present invention is described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each flow and / or block in the flowchart and / or block diagram can be implemented by computer program instructions, and the combination of the flows and / or blocks in the flowchart and / or block diagram can also be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing devices generate a device for implementing the specified functions in Figure 1 one flow or multiple flows and / or blocks Figure 1 one block or multiple blocks.

[0059] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory generate a manufactured product including an instruction device, and the instruction device implements the specified functions in Figure 1 one flow or multiple flows and / or blocks Figure 1 one block or multiple blocks.

[0060] These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one process Figure 1 one process or multiple processes and / or blocks Figure 1 steps of the functions specified in one block or multiple blocks.

[0061] In a typical configuration, a computing device includes one or more processors (CPUs), an input / output interface, a network interface, and memory.

[0062] The memory may include non-permanent memory in the computer-readable medium, random access memory (RAM), and non-volatile memory in the form of, for example, read-only memory (ROM) or flash memory (flash RAM). The memory is an example of a computer-readable medium.

[0063] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology for information storage. The information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette tapes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media, such as modulated data signals and carrier waves.

[0064] It should also be noted that the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, commodity or device comprising a series of elements not only includes those elements, but also includes other elements not expressly listed, or also includes elements inherent to such process, method, commodity or device. Without further limitation, an element defined by the statement "comprising one..." does not exclude the presence of another identical element in the process, method, commodity or device comprising the element.

[0065] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, various changes and modifications can be made to the present application. Any modification, equivalent replacement, improvement, etc. made within the technical principle of the present application shall fall within the protection scope of the present application.

Claims

1. A method for embedding a page function component, characterized in that, The method includes: Independently encapsulate different business functions to obtain multiple standardized function components; Add the URL paths of the multiple standardized function components to the SRC of the iframe tag, and establish a cross - origin resource sharing policy in the iframe tag; the cross - origin resource sharing policy includes multiple different types of cross - origin communication APIs; Embed the multiple standardized function components into the main page by embedding the iframe tag in the main page.

2. The method according to claim 1, wherein The step of independently encapsulating different business functions to obtain multiple standardized function components specifically includes: Independently encapsulate different business functions to obtain multiple initial function components; Unify the interface specifications for the multiple initial function components to obtain multiple standardized function components; the interface specifications include a component data acquisition interface specification, a component data modification interface specification, and a status query interface specification for interacting with external systems.

3. The method according to claim 2, wherein After embedding the multiple standardized function components into the main page, the method further includes: Set status identifiers in the main page and the standardized function components respectively; the status identifiers of the multiple standardized function components are the same; When a standardized function component is accessed, obtain the main page data and the standardized function component data through the data acquisition interface; When the accessed standardized function component has a status identifier inconsistent with that of the main page, modify the status of the accessed standardized function component through the main page and the component data modification interface specification to synchronize the status of the accessed standardized function component with the status of the main page.

4. The method according to claim 3, wherein The method further includes: When the accessed standardized function component has a status identifier consistent with that of the main page, generate a permission token corresponding to the access party according to a preset permission rule; the permission token includes the access permission corresponding to the access party; Control the access of the access party to the accessed standardized function component according to the permission token.

5. The method according to claim 4, characterized in that Before controlling the access of the access party to the standardized function component according to the permission token, the method further includes: Judge whether the main page and the accessed standardized function component are of the same origin; If the main page and the accessed standardized function component are of the same origin, transmit the main page access information to the accessed standardized function component through the communication system; If the main page and the accessed standardized function component are not of the same origin, transmit the main page access information to the accessed standardized function component according to the cross - origin communication API corresponding to the accessed standardized function component.

6. The method according to claim 5, wherein The method further includes: Record the access interaction information between the main page and the accessed standardized function business component; the access interaction information includes data transmission, status change, and permission verification; Send the access interaction information to the client for auditing and troubleshooting.

7. The method according to claim 1, characterized in that, After embedding the multiple standardized function components into the main page, the method further includes: When a change request of the standardized function component is detected, replace the URL path of the original standardized function component in the SRC with the URL path of the changed standardized function component.

8. The method according to claim 1, wherein After embedding the multiple standardized functional components into the main page, the method further includes: Performing functional tests on the multiple standardized functional business components; Removing the standardized functional business components that fail the functional tests and re-embedding new standardized functional components with the same functions.

9. A page function component embedding device, characterized in that, Including: At least one processor; And, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute a method for embedding page functional components according to any one of claims 1-8 above.

10. A page function component is embedded in a storage medium, which stores computer-executable instructions, and is characterized in that The computer-executable instructions can execute a method for embedding page functional components according to any one of claims 1-8 above.

Images