A method, device and medium for realizing resource sharing by encapsulating an iframe into a pop-up window

Abstract

The application belongs to the technical field of website development, and provides a method and device for realizing resource sharing by encapsulating iframe into a pop-up window and a medium. The application utilizes the content independence and cross-site content embedding capability of iframe to realize the independent operation of public functions; avoids the restriction of the same source policy of the browser through window.postMessage to realize free communication between pages; encapsulates a universal iframe container pop-up window plug-in realized by a native JavaScript to simulate the pop-up function interaction in the project to maintain consistency; and modularly encapsulates the communication logic, interaction effect, event monitoring and custom configuration, realizes the unified calling of public functions through the communication between the plug-in and the iframe source project; for the project using the plug-in (hereinafter referred to as the calling project), the plug-in is transmitted with a configuration object, and the plug-in can complete the plug-and-play of the public functions.

Description

Technical Field

[0001] This invention belongs to the field of website development technology. Specifically, it relates to a method, apparatus, and medium for achieving resource sharing by encapsulating an iframe into a pop-up window. Background Technology

[0002] In the development of web application collections or SASS platforms, there are often scenarios where certain modules or pages are used by various sub-pages. For functional modules, the solution is usually to encapsulate them into common components for sharing; for pages, you can also redirect to the target page, bring in relational data, and write the corresponding logic code.

[0003] For example, in common unified login and registration centers, sub-projects authenticate by redirecting to the login / registration center page before returning to the corresponding project with the authentication information. However, this method requires page redirection, and parameters may need to be appended to the URL. This jump-in / jump approach not only lacks an elegant and user-friendly experience but also limits the data transmission capacity and security. While implementing login and registration in each web project can ensure a good user experience and flexibility for each project, it makes code reuse impossible across different web frameworks, such as Vue and React, through the development of common components. This significantly increases the development and maintenance costs of writing repetitive code.

[0004] Therefore, there is an urgent need for a way to make users unaware of website entry and exit, maintain the integrity of the website during use while keeping data transmission confidential, and enable customization through configuration passed from sub-projects while maintaining only one set of code, thus ensuring reusability. Summary of the Invention

[0005] The purpose of this invention is to provide a method for resource sharing by encapsulating an iframe into a pop-up window, so as to solve the technical problems existing in the prior art.

[0006] To achieve the above objectives, the technical solution adopted by the present invention is as follows:

[0007] A method for achieving resource sharing by encapsulating an iframe into a pop-up window includes the following steps:

[0008] Step S1: Extract the public functions that need to be shared into independent modules, deploy them independently as a public project site that can be directly accessed, and listen for the message event sent by window.postMessage in the public project site;

[0009] Step S2: Define the configuration object for the iframe pop-up plugin. The configuration object includes at least the target address URL and the allowedOrigins array of origins that are allowed to receive messages.

[0010] Step S3: Create an iframe pop-up plugin, which encapsulates communication logic, interactive effects, event listeners, and custom configurations, and is configured to receive the configuration object; then, package the encapsulated iframe pop-up plugin and upload the packaged product to achieve sharing of the iframe pop-up plugin;

[0011] Step S4: In the calling project, import the iframe pop-up plugin and pass the configuration object to the iframe pop-up plugin to create an iframe pop-up plugin instance;

[0012] Step S5: Call the internal method of the iframe pop-up plugin instance, dynamically create an iframe element within the iframe pop-up plugin according to the passed configuration object, use it as the content of the iframe pop-up plugin, load the public project site resource specified by the URL, and open the pop-up window;

[0013] Step S6: Pass parameters to the public project site through the internal method of the iframe pop-up plugin instance;

[0014] Step S7: Use window.postMessage to enable bidirectional communication between the calling project and the public project site to call the public function.

[0015] Preferably, step S1 further includes: filtering and processing message sources according to a predefined array of allowed origins.

[0016] Preferably, in step S2, the configuration object further includes the following configuration items:

[0017] Width: Width of the iframe container;

[0018] height: the height of the iframe container;

[0019] message: Communication data passed to the iframe;

[0020] zIndex: Popup level; onClose:

[0021] The method is executed before closing; onError:

[0022] iframe error handling methods;

[0023] onIframeMessage: A custom method for receiving iframe message data;

[0024] onIframeLoaded: Custom handling method for iframe loading completion;

[0025] appendTo: The location where the pop-up window is mounted;

[0026] maskBackgroundColor: The background color of the mask layer.

[0027] Preferably, in step S3, the encapsulated plugin is packaged into esModule and commonjs using webpack or rollup, and uploaded to npm for sharing.

[0028] Preferably, the internal methods of the iframe pop-up plugin instance include: an open method for opening the pop-up; and a close method for closing the pop-up.

[0029] Preferably, the internal methods of the iframe pop-up plugin instance further include: the sendIframeMessage method, which is used to actively send a message to the iframe.

[0030] Preferably, in step S5, the iframe pop-up plugin, while dynamically creating iframe elements and loading resources, completes the implementation of pop-up effects and the processing logic within its lifecycle, and completes the listening to events defined in the configuration items.

[0031] To achieve the above objectives, the present invention also provides a computer-readable storage medium having a computer program stored thereon, the computer program being executed by a processor to implement the method described above for resource sharing by encapsulating an iframe into a pop-up window.

[0032] To achieve the above objectives, the present invention also provides an apparatus for resource sharing by encapsulating an iframe into a pop-up window, comprising: a processor and a memory; the memory for storing a computer program; the processor being connected to the memory and for executing the computer program stored in the memory, so that the apparatus for resource sharing by encapsulating an iframe into a pop-up window performs the method for resource sharing by encapsulating an iframe into a pop-up window as described above.

[0033] Compared with the prior art, the present invention has the following beneficial effects:

[0034] (1) By encapsulating the iframe into a pop-up window, the present invention avoids the user experience problems caused by traditional page jumps. When switching between different sub-items, users do not need to perceive page jumps, thus achieving a smooth and consistent user interaction experience.

[0035] (2) The present invention uses window.postMessage technology to ensure secure communication between the iframe and the main page, avoiding the security risk of transmitting sensitive information in plaintext via URL, and at the same time ensuring the reliability and security of communication through origin verification.

[0036] (3) This invention uses a plug-in development approach, which requires only one set of common project code to be used in different sub-projects, reducing the cost of writing and maintaining duplicate code, and supporting unified use under different Web frameworks (such as Vue, React, etc.).

[0037] (4) In this invention, the plugin provides rich configuration options and event callbacks, supports custom pop-up styles, event handling, data transmission, etc., and can realize personalized customization according to the needs of the calling project, which greatly enhances the scalability.

[0038] (5) Based on the method provided by the present invention, whether it is a single project or multiple sub-projects, the common functional modules can be called uniformly through the plugin, which simplifies the integration steps and improves the development efficiency. Attached Figure Description

[0039] Figure 1 This is a system architecture diagram of Embodiment 1 of the present invention.

[0040] Figure 2 This is a principle block diagram of Embodiment 3 of the present invention. Detailed Implementation

[0041] To enable those skilled in the art to have a clearer understanding of the present invention, the present invention will be further described in detail below with reference to embodiments. It should be understood that the specific embodiments described below are merely for illustrative purposes and to facilitate understanding. The technical solutions provided by the present invention are not limited to those provided in the following embodiments, nor should they limit the scope of protection of the present invention.

[0042] It should be noted that the illustrations provided in the following embodiments are only schematic representations of the basic concept of the present invention. Therefore, the drawings only show the components related to the present invention and are not drawn according to the actual number, shape and size of the components in the actual implementation. In the actual implementation, the shape, quantity and proportion of each component can be arbitrarily changed, and the layout of the components may also be more complex.

[0043] Example 1

[0044] like Figure 1 As shown, this embodiment provides a method for resource sharing by encapsulating an iframe into a pop-up window. This method leverages the content independence and cross-site content embedding capabilities of the iframe to enable independent operation of common functions; it uses `window.postMessage` to avoid browser same-origin policy restrictions, enabling free communication between pages; it encapsulates a generic iframe container pop-up plugin implemented in native JavaScript (hereinafter referred to as the iframe pop-up plugin) to simulate pop-up interactions within the project, maintaining consistency; and it modularly encapsulates communication logic, interaction effects, event listening, and custom configurations, enabling unified invocation of common functions through communication between the plugin and the iframe source project (hereinafter referred to as the common project); for projects using the plugin (hereinafter referred to as the calling project), simply passing a configuration object to the plugin enables plug-and-play functionality of the common functions.

[0045] The system architecture diagram provided in this embodiment is as follows: Figure 1 As shown, it mainly includes a public project site, an iframe pop-up plugin, and a calling project. The public project site is an independently deployed web application containing specific public functions (such as unified login, user registration, payment center, etc.). It is deployed through a standard web server (such as Nginx, Apache) and has a URL address that can be directly accessed via the public or intranet. The iframe pop-up plugin is a well-packaged JavaScript library designed to integrate with the calling project, responsible for creating and managing iframe pop-ups and handling all communication with the public project site. The calling project (attached) Figure 1 Project 1, Project 2, Project 3, etc., are any web applications that need to call public functions, such as a company's main website, back-end management system, or mobile H5 application.

[0046] This embodiment provides a method for achieving resource sharing by encapsulating an iframe into a pop-up window. The specific steps are as follows:

[0047] 1. Extract the common functions that need to be shared into independent modules.

[0048] Common functions that need to be shared are extracted into independent modules, and separate pages are written and deployed independently as directly accessible sites (such as a unified login and registration center). In this common project, the message event sent by window.postMessage is listened for, and the message source is filtered and processed according to a predefined allowed origin array to improve security.

[0049] Code example:

[0050] window.addEventListener("message",receiveMessage, false);

[0051] function receiveMessage(event) {

[0052] var origin = event.origin

[0053] if (origin !== "http: / / example.org:8080") return;

[0054] / / ...todo.

[0055] II. Define the configuration object for the iframe pop-up plugin

[0056] The object contains the following configuration items:

[0057] width: string The width of the iframe container (if no width and height are specified, it will default to full-screen mode).

[0058] height: string The height of the iframe container

[0059] url: Required string - Target address of the iframe

[0060] message: Communication data passed from the object to the iframe.

[0061] allowOrigins: Required array. The array of origins that are allowed to receive messages.

[0062] zIndex: number. Dialog level defaults to 999.

[0063] onClose: function: () => void Method to execute before closing

[0064] onError: function: (event) => void iframe error handling method

[0065] onIframeMessage: function: (data) => void Custom method for receiving iframe message data

[0066] onIframeLoaded: function: (event) => void iframe loading completion custom handling method

[0067] appendTo: string | HTMLElement The location where the dialog will be attached. It supports passing in an ID or class (e.g., .dialog-class or #dialog-id), and the target HTML element.

[0068] maskBackgroundColor: string The background color of the mask layer can be set to transparent.

[0069] ## Internal Callable Methods

[0070] open: () => void Opens a pop-up window;

[0071] close: () => void Closes the pop-up window;

[0072] sendIframeMessage: (message: object) => void Actively sends data to the iframe;

[0073] III. Creating, Packaging, and Sharing Plugins

[0074] The iframe popup plugin is implemented using native JavaScript. Its core is to dynamically create iframe elements using document.createElement and communicate using window.postMessage. The encapsulated plugin is packaged into esModule and commonjs using webpack or rollup to ensure compatibility in multiple environments and uploaded to npm for sharing.

[0075] IV. Introducing the iframe pop-up plugin

[0076] In the calling project, the iframe pop-up plugin is imported, and a configuration object is passed to the iframe pop-up plugin to create an iframe pop-up plugin instance. The calling project can import the iframe pop-up plugin through npm or a js resource package, and call the internal methods of the instance to complete the overall use of the common project. The internal methods of the iframe pop-up plugin instance include: the open method, which is used to open the pop-up; the close method, which is used to close the pop-up; and the sendIframeMessage method, which is used to actively send a message to the iframe.

[0077] Code example:

[0078] const frameDialog = new useIframeDialog({

[0079] width: '50%',

[0080] height: '50%',

[0081] allowOrigins: [],

[0082] url: 'http: / / example.org:8080 / test.html',

[0083] message: {

[0084] systemCode: 'test',

[0085] themeColor: 'pink'

[0086] },

[0087] onIframeMessage: function(data) {

[0088] console.log('onIframeMessage', data);

[0089] }

[0090] });

[0091] frameDialog.open(); / / Open the Dialog window

[0092] 5. Load public project site resources specified by the URL

[0093] The `open` method of the iframe popup plugin instance is called. Based on the passed configuration object, an iframe element is dynamically created within the iframe popup plugin, which is then used as the content of the iframe popup plugin. Resources from the public project site specified by the URL are also loaded. While dynamically creating the iframe element and loading resources, the iframe popup plugin implements the popup effects and handles its lifecycle logic, and listens for events defined in the configuration.

[0094] VI. Transmitting parameters to public project sites

[0095] The `sendIframeMessage` method is used to pass parameters to the URL project. After obtaining the plugin instance, the `sendIframeMessage` method can be called at any time to actively send messages to the public project site. This method is suitable for dynamically passing data based on user interaction after the pop-up window is opened.

[0096] Code example:

[0097] sendIframeMessage(message) {

[0098] if (this.iframeElement && this.iframeElement.contentWindow) {

[0099] this.iframeElement.contentWindow.postMessage(message, url);

[0100] }

[0101] VII. Enable the invocation of public functions

[0102] The window.postMessage method enables bidirectional communication between the calling project and the public project site to complete the invocation of public functions.

[0103] Through the above steps, those skilled in the art can clearly understand how to implement, encapsulate, and use the iframe pop-up plugin, thereby enabling secure, efficient, and flexible invocation of independently deployed public functions in different calling projects.

[0104] Example 2

[0105] This embodiment provides a computer-readable storage medium on which a computer program is stored. The computer program is executed by a processor to implement the method of resource sharing by encapsulating an iframe into a pop-up window provided in Embodiment 1. Those skilled in the art will understand that all or part of the steps of the method provided in Embodiment 1 can be implemented by hardware related to the computer program. The aforementioned computer program can be stored in a computer-readable storage medium. When the program is executed, it performs the steps of the method provided in Embodiment 1. The aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0106] Example 3

[0107] like Figure 2As shown, this embodiment provides a resource sharing device by encapsulating an iframe into a pop-up window, including: a processor and a memory; the memory is used to store computer programs; the processor is connected to the memory and is used to execute the computer programs stored in the memory, so that the resource sharing device by encapsulating an iframe into a pop-up window performs the resource sharing method by encapsulating an iframe into a pop-up window provided in Embodiment 1.

[0108] Specifically, memory includes various media that can store program code, such as ROM, RAM, magnetic disks, USB flash drives, memory cards, or optical discs.

[0109] Preferably, the processor can be a general-purpose processor, including a central processing unit, a network processor, etc.; it can also be a digital signal processor, an application-specific integrated circuit, a field-programmable gate array or other programmable logic device, discrete gate or transistor logic device, or discrete hardware component.

[0110] The above embodiments are merely illustrative of the principles and effects of the present invention and are not intended to limit the invention. Any person skilled in the art can modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by those skilled in the art without departing from the spirit and technical concept disclosed in the present invention should still be covered by the claims of the present invention.

Claims

1. A method for achieving resource sharing by encapsulating an iframe into a pop-up window, characterized in that, Includes the following steps: Step S1: Extract the public functions that need to be shared into independent modules, deploy them independently as a public project site that can be directly accessed, and listen for message events sent by window.postMessage in the public project site; Step S1 also includes: filtering and processing message sources according to a predefined allowed origin array; Step S2: Define the configuration object for the iframe pop-up plugin. The configuration object includes at least the target address URL and the allowOrigins array of origins that are allowed to receive messages. Step S3: Create an iframe pop-up plugin. This plugin leverages the content independence and cross-site content embedding capabilities of iframes, implemented using native JavaScript. It modularizes and encapsulates communication logic, interactive effects, event listeners, and custom configurations, and is configured to receive the configuration object. Then, the encapsulated iframe pop-up plugin is packaged and uploaded to achieve sharing. In step S3, the encapsulated plugin is packaged into esModule and commonjs using webpack or rollup and uploaded to npm for sharing. Step S4: In the calling project, import the iframe pop-up plugin and pass the configuration object to the iframe pop-up plugin to create an iframe pop-up plugin instance; Step S5: Call the internal method of the iframe pop-up plugin instance, dynamically create an iframe element within the iframe pop-up plugin according to the passed configuration object, use it as the content of the iframe pop-up plugin, load the public project site resource specified by the URL, and open the pop-up window; Step S6: Pass parameters to the public project site through the internal method of the iframe pop-up plugin instance; Step S7: Use window.postMessage to enable bidirectional communication between the calling project and the public project site to call the public function.

2. The method for resource sharing by encapsulating an iframe into a pop-up window according to claim 1, characterized in that, In step S2, the configuration object also includes the following configuration items: Width: Width of the iframe container; height: the height of the iframe container; message: Communication data passed to the iframe; zIndex: Popup level; onClose: The method is executed before closing; onError: iframe error handling methods; onIframeMessage: A custom method for receiving iframe message data; onIframeLoaded: A custom handling method for when the iframe is loaded; appendTo: The location where the pop-up window is mounted; maskBackgroundColor: The background color of the mask layer.

3. The method for resource sharing by encapsulating an iframe into a pop-up window according to claim 2, characterized in that, The internal methods of the iframe pop-up plugin instance include: an open method for opening the pop-up; and a close method for closing the pop-up.

4. The method for resource sharing by encapsulating an iframe into a pop-up window according to claim 3, characterized in that, The internal methods of the iframe pop-up plugin instance also include the sendIframeMessage method, which is used to actively send a message to the iframe.

5. The method for resource sharing by encapsulating an iframe into a pop-up window according to claim 4, characterized in that, In step S5, the iframe pop-up plugin dynamically creates iframe elements and loads resources while implementing pop-up effects and processing logic within its lifecycle, and listens to events defined in the configuration items.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that, The computer program is executed by a processor to implement the method of resource sharing by encapsulating an iframe into a pop-up window as described in any one of claims 1 to 5.

7. A device for achieving resource sharing by encapsulating an iframe into a pop-up window, characterized in that, include: Processor and memory; The memory is used to store computer programs; the processor is connected to the memory and is used to execute the computer programs stored in the memory, so that the apparatus for resource sharing by encapsulating iframes into pop-ups performs the method for resource sharing by encapsulating iframes into pop-ups as described in any one of claims 1 to 5.

Images