Message broadcasting method and device, electronic equipment and storage medium
By embedding hidden tags and broadcast channels within the application page, the challenges of cross-domain and cross-page message broadcasting are solved, achieving efficient and loosely coupled message passing, improving cross-page communication capabilities within the browser, simplifying the system architecture, and reducing implementation complexity.
Patent Information
- Application Number
- CN202511209738.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-08-27
- Publication Date
- 2025-12-23
AI Technical Summary
Existing technologies for implementing cross-domain and cross-page message broadcasting on the front end suffer from problems such as lack of broadcasting capabilities, restrictions imposed by the same-origin policy, complex implementation logic, high performance overhead, or dependence on backend services. There is a lack of a pure front-end, loosely coupled, high-performance, and easily implemented general solution.
By embedding a hidden label within the application page, message passing is achieved using a broadcast page and a broadcast channel. The application page sends the target message to the broadcast page through the hidden label, the broadcast page forwards the message to the broadcast channel, the broadcast channel receives and broadcasts the message, and the application page listens for and processes the message received by the broadcast channel.
It enables cross-page message broadcasting, improves cross-domain communication capabilities and message broadcasting efficiency, reduces system architecture complexity, reduces network latency and resource management risks, and features clear logic, simple implementation, and easy deployment and expansion.
Smart Images
Figure CN121193552A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of computer, and particularly relates to a message broadcasting method and device, electronic equipment and storage medium. BACKGROUND
[0002] In modern web application development, with the popularity of single-page applications (SPAs) and micro-frontend architecture, the communication demand between front-end pages is increasingly complex. Especially in cross-domain (Cross-origin) and cross-page (Cross-tab / Cross-window) scenarios, it is the key to realize stable and efficient message passing for building complex collaborative applications.
[0003] The prior art solutions generally have problems such as lack of broadcasting capability, limitation by same-origin policy, complex implementation logic, large performance overhead or dependence on backend services when implementing front-end cross-domain and cross-page message broadcasting. Therefore, there is an urgent need in the market for a pure front-end, low-coupling, high-performance and easy-to-implement general solution. SUMMARY
[0004] Embodiments of the present disclosure provide a message broadcasting method, device, electronic equipment and storage medium.
[0005] In a first aspect, embodiments of the present disclosure provide a message broadcasting method, comprising: sending, by an application page, a target message to a broadcast page through an embedded hidden tag; forwarding, by the broadcast page, the target message to a broadcast channel; receiving and broadcasting, by the broadcast channel, the target message; and listening, by the application page, to the broadcast channel through the hidden tag, receiving the message broadcast by the broadcast channel, and processing the received message according to the received message and the target message.
[0006] In a second aspect, embodiments of the present disclosure provide a message broadcasting device, comprising: a message sending unit configured to send, by an application page, a target message to a broadcast page through an embedded hidden tag; a message forwarding unit configured to forward, by the broadcast page, the target message to a broadcast channel; a message broadcasting unit configured to receive and broadcast, by the broadcast channel, the target message; and a message processing unit configured to listen, by the application page, to the broadcast channel through the hidden tag, receive the message broadcast by the broadcast channel, and process the received message according to the received message and the target message.
[0007] In a third aspect, embodiments of the present disclosure provide an electronic equipment, comprising a memory, a processor, a bus, and a computer program stored in the memory and executable on the processor, wherein the processor implements the message broadcasting method as described in the first aspect when executing the computer program.
[0008] In a fourth aspect, an embodiment of the present disclosure provides a non-transitory computer-readable storage medium, having stored thereon a computer program, which, when executed by a processor, implements the message broadcasting method as described in the first aspect.
[0009] The technical solution of the present disclosure can send a target message to a broadcast page through an embedded hidden tag in an application page. After receiving the target message, the broadcast page forwards the target message to a broadcast channel. After receiving the target message, the broadcast channel receives and broadcasts the target message. The application page listens to the broadcast channel through the hidden tag, receives the message broadcast by the broadcast channel, and processes the received message according to the received message and the target message. The application of the scheme of the present disclosure can implement a cross-page message broadcasting method in a browser, improve the cross-domain communication capability, and improve the message broadcasting efficiency.
[0010] It should be understood that the content described in this part is not intended to identify key or important features of the embodiments of the present disclosure, nor to limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS
[0011] The accompanying drawings are used to better understand the present scheme and do not limit the present disclosure. Among them:
[0012] Figure 1 An exemplary architecture diagram in which one embodiment of the message broadcasting method of the present disclosure can be applied;
[0013] Figure 2 A flowchart of one embodiment of the message broadcasting method of the present disclosure;
[0014] Figure 3 A flowchart of another embodiment of the message broadcasting method of the present disclosure;
[0015] Figure 4 A structural diagram of one embodiment of the message broadcasting device of the present disclosure;
[0016] Figure 5 A structural diagram of one embodiment of the electronic device of the present disclosure. DETAILED DESCRIPTION
[0017] It should be noted that the following detailed description is exemplary and is intended to provide further explanation of the present disclosure. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as generally understood by those skilled in the art to which the present disclosure belongs.
[0018] It is to be understood that the terminology used herein is for the purpose of describing specific embodiments only and is not intended to be limiting of example embodiments in accordance with the present disclosure. As used herein, the singular forms "a", "an" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will be further understood that the terms "comprises" and / or "comprising," when used in this specification, specify the presence of stated features, steps, operations, devices, components and / or combinations thereof, but do not preclude the presence or addition of one or more other features, steps, operations, devices, components and / or combinations thereof.
[0019] The embodiments in the present disclosure and the features in the embodiments can be combined with each other in the case of no conflict.
[0020] In order to make the technical solutions and advantages of the present disclosure clearer, the present disclosure will be further described in detail below with reference to the drawings and specific embodiments.
[0021] Figure 1 An exemplary architecture 100 is shown, in which embodiments of the message broadcasting method or the message broadcasting device of the present disclosure can be applied.
[0022] As shown in Figure 1 , the architecture 100 can include a plurality of application pages 101, 102, 103, 104, a broadcast page 105 and a broadcast channel 106. The plurality of application pages 101, 102, 103, 104 and the broadcast page 105 run in the same browser, and the plurality of application pages 101, 102, 103, 104 are application pages under different domain names. For example, the domain name of the application page 101 is app-a.com, the domain name of the application page 102 is app-b.com, the domain name of the application page 103 is app-c.com, and the domain name of the application page 104 is app-d.com. The plurality of application pages 101, 102, 103, 104 are linked to the broadcast page 105 through an embedded hidden tag iframe, and message interaction is performed through the broadcast channel 106 in the broadcast page 105.
[0023] Figure 2 A flow 200 of one embodiment of the message broadcasting method of the present disclosure is shown. As shown in Figure 2 , the message broadcasting method of the present embodiment can include the following steps:
[0024] Step 201, the application page sends a target message to the broadcast page through an embedded hidden tag.
[0025] In this embodiment, the DOM tree of each application page participating in the message broadcast can embed a hidden tag (iframe). The iframe is an HTML tag used to create an inline frame in a web page, supporting the embedding of another independent HTML document or floating frame within the current document. Its core function is to achieve the nesting and segmentation of page content, commonly used in scenarios such as ad loading, third-party plugin integration, etc. The src of the hidden tag points to the same broadcast page. In programming, the src attribute is usually used to reference external resources, such as loading images, scripts (JavaScript), style sheets (CSS), etc. in HTML. In this way, the hidden tags embedded by different application pages are themselves same-origin, but the application pages themselves are cross-domain. The application page can send the target message to the broadcast page through the hidden tag. Here, the target message can be a message that the application page needs to send to other application pages.
[0026] Step 202, the broadcast page forwards the target message to the broadcast channel.
[0027] After receiving the target message, the broadcast page can forward the target message to the broadcast channel (Broadcast-Channel). Broadcast-Channel is an API that allows communication between different browser windows, tabs, or iframes that are same-origin. It creates a broadcast channel that any same-origin browsing context can subscribe to and receive messages. Since all iframes load the same broadcast page, they naturally share the same Broadcast-Channel namespace.
[0028] Step 203, the broadcast channel receives and broadcasts the target message.
[0029] The broadcast channel can receive the target message and broadcast it. In this way, all application pages connected to the broadcast channel can receive the message.
[0030] Step 204, the application page listens to the broadcast channel through the hidden tag, receives the message broadcast by the broadcast channel, and processes the received message according to the received message and the target message.
[0031] Each application page connected to the broadcast channel can listen to the broadcast channel through the hidden tag, and when it detects that the broadcast channel broadcasts a message, it can receive the above message. After receiving the above message, it can compare it with the target message. According to the comparison result, process. Specifically, if it is found that they are exactly the same after comparison, it means that the message is sent by the application page itself, and it can be ignored. If it is found that they are different, it can perform subsequent business processing according to the message.
[0032] The message broadcasting method provided by the above embodiments of the present disclosure can be applied to a target message being sent to a broadcast page by an embedded hidden tag in an application page. After receiving the target message, the broadcast page forwards the target message to a broadcast channel. After receiving the target message, the broadcast channel receives and broadcasts the target message. The application page listens to the broadcast channel through the hidden tag and receives the message broadcast by the broadcast channel. The received message is processed according to the received message and the target message. By applying the scheme of the present disclosure, a cross-page message broadcasting method can be implemented in a browser, the cross-domain communication capability is improved, and the message broadcasting efficiency is improved.
[0033] With reference to the foregoing description Figure 3 FIG. 3 shows a flow 300 of another embodiment of the message broadcasting method according to the present disclosure. As shown in FIG. 3, the method in this embodiment can include the following steps: Figure 3
[0034] Step 301: A hidden tag is inserted into the DOM structure of the application page script.
[0035] In this embodiment, the hidden tag can be inserted into the DOM structure of the application page script in advance. The external resource loaded by the hidden tag points to a broadcast page. In some specific implementations, the URL of the broadcast page is https: / / broadcast.example.com / broadcast.html. The application page and the embedded iframe thereof establish bidirectional communication through a standard postMessage API. The postMessage is a cross-domain communication API introduced by HTML5, which is mainly used for securely transmitting messages between different sources of windows, iframes or tabs.
[0036] Step 302: A broadcast channel is created in the script of the broadcast page, and communication between the broadcast page and the application page is established through the broadcast channel and the hidden tag.
[0037] In this embodiment, the broadcast channel can also be created in the script of the broadcast page in advance, and communication between the broadcast page and the application page is established through the broadcast channel and the hidden tag. Step 303: The application page sends a target message to the broadcast page through the embedded hidden tag.
[0038] Step 304: The broadcast page forwards the target message to the broadcast channel.
[0039] Step 305: The broadcast channel receives and broadcasts the target message.
[0040] Step 306: The application page listens to the broadcast channel through a hidden tag, receives messages broadcast by the broadcast channel, and ignores the received message if the received message is the same as the target message; if the received message is different from the target message, it parses the received message and performs business processing based on the parsing result.
[0041] The application page listens to the broadcast channel through a hidden tag, receiving messages broadcast through the channel. If the received message is the same as the target message, it is ignored. If they are different, the received message can be parsed, and business logic can be performed based on the parsing result. This business logic could be caching a file, displaying a message, etc.
[0042] Step 307: In response to the application page being closed, destroy its embedded hidden tabs and clear the communication connection with the broadcast page.
[0043] In this embodiment, if the application page is closed, its embedded hidden tabs can be destroyed. Simultaneously, the communication connection with the broadcast page is cleared.
[0044] Step 308: In response to the broadcast page being closed, the broadcast channel is destroyed and communication with the application page is disconnected.
[0045] If the broadcast page is closed, the broadcast channel is destroyed and communication with the application page is disconnected. This signifies the end of the message broadcast.
[0046] The method provided by the above embodiments of this disclosure offers a true publish-subscribe (Pub / Sub) broadcast model. The message sender does not need to know the existence of any receivers, nor does it need to maintain a receiver list. It simply "throws" the message into the communication system, and receivers subscribe on demand. This greatly reduces the coupling between different business modules or micro-frontend applications. The entire communication process is completed entirely on the browser client, without any server relay, eliminating the need for additional backend development and maintenance costs. This makes the solution lightweight, easy to deploy, and significantly reduces the complexity of the system architecture. The message transmission path is short, circulating only within the client, avoiding the high latency caused by network round trips. It cleverly utilizes the iframe as a same-origin "enclave," securely extending the capabilities of BroadcastChannel to cross-domain contexts. This solution conforms to the browser's security model and is an elegant means of circumventing same-origin policy restrictions. When a page is closed, its embedded iframe is destroyed, and the associated postMessage listener and BroadcastChannel connection are automatically cleaned up by the browser. This avoids the risks of manual connection management and memory leaks, making resource management more efficient and secure. The solution has clear logic and is simple to implement. Developers only need to provide a static broadcast page, embed an iframe in their application, and add a small amount of postMessage communication code to integrate it. It can be easily extended to support more complex message routing, message confirmation, and other advanced features. Further references. Figure 4 As an implementation of the methods shown in the above figures, this disclosure provides an embodiment of a message broadcasting device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.
[0047] like Figure 4 As shown, the message broadcasting device 400 of this embodiment includes: a message sending unit 401, a message forwarding unit 402, a message broadcasting unit 403, and a message processing unit 404.
[0048] The message sending unit 401 is configured to send the target message to the broadcast page via an embedded hidden tag.
[0049] The message forwarding unit 402 is configured to broadcast the target message to the broadcast channel.
[0050] The message broadcasting unit 403 is configured to receive and broadcast target messages via a broadcast channel.
[0051] The message processing unit 404 is configured to allow the application page to listen to the broadcast channel through a hidden label, receive messages broadcast by the broadcast channel, and process the received messages based on the received messages and the target message.
[0052] In addition, an electronic device is also proposed in the technical solution of this application.
[0053] Figure 5 A schematic diagram of the structure of an electronic device provided in one embodiment of the present disclosure is shown.
[0054] like Figure 5 As shown, the electronic device may include a processor 501, a memory 502, a bus 503, and a computer program stored in the memory 502 and executable on the processor 501. The processor 501 and the memory 502 communicate with each other via the bus 503. When the processor 501 executes the computer program, it implements the steps of the above method, including, for example: an application page sends a target message to a broadcast page via an embedded hidden tag; the broadcast page forwards the target message to a broadcast channel; the broadcast channel receives and broadcasts the target message; the application page listens to the broadcast channel via the hidden tag, receives the message broadcast by the broadcast channel, and processes the received message according to the received message and the target message.
[0055] In addition, one embodiment of this disclosure also provides a non-transitory computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it implements the steps of the above-described method, including, for example, an application page sending a target message to a broadcast page through an embedded hidden tag; the broadcast page forwarding the target message to a broadcast channel; the broadcast channel receiving and broadcasting the target message; the application page listening to the broadcast channel through the hidden tag, receiving the message broadcast by the broadcast channel, and processing the received message according to the received message and the target message.
[0056] In summary, in the technical solution disclosed herein, the application page can send the target message to the broadcast page through an embedded hidden tag. After receiving the target message, the broadcast page forwards it to the broadcast channel. Upon receiving the target message, the broadcast channel receives and broadcasts the target message. The application page listens to the broadcast channel through the hidden tag, receiving messages broadcast by the broadcast channel. Based on the received message and the target message, the application page processes the received message. Applying the solution disclosed herein enables cross-page message broadcasting in a browser, improving cross-domain communication capabilities and message broadcasting efficiency.
[0057] The above description is merely a preferred embodiment of this disclosure and is not intended to limit this disclosure. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.
Claims
1. A message broadcasting method, comprising: The application page sends the target message to the broadcast page through an embedded hidden tag; The broadcast page forwards the target message to the broadcast channel; The broadcast channel receives and broadcasts the target message; The application page listens to the broadcast channel through the hidden label, receives messages broadcast by the broadcast channel, and processes the received messages based on the received messages and the target message.
2. The method according to claim 1, wherein, The step of processing the received message based on the received message and the target message includes: If the received message is the same as the target message, the received message is ignored. In response to a received message being different from the target message, the received message is parsed, and business processing is performed based on the parsing result.
3. The method according to claim 1, wherein, The method further includes: The hidden tag is inserted into the DOM structure of the application page script, wherein the external resource loaded by the hidden tag points to the broadcast page.
4. The method according to claim 3, wherein, The method further includes: A broadcast channel is created in the script of the broadcast page, and communication between the broadcast page and the application page is established through the broadcast channel and the hidden label.
5. The method according to claim 1, wherein, The method further includes: In response to the application page being closed, its embedded hidden tabs are destroyed and the communication connection with the broadcast page is cleared.
6. The method according to claim 5, wherein, The method further includes: In response to the closing of the broadcast page, the broadcast channel is destroyed and communication with the application page is disconnected.
7. A message broadcasting device, comprising: The message sending unit is configured so that the application page sends the target message to the broadcast page through an embedded hidden tag; The message forwarding unit is configured so that the broadcast page forwards the target message to the broadcast channel; The message broadcasting unit is configured to receive and broadcast the target message through the broadcast channel; The message processing unit is configured such that the application page listens to the broadcast channel through the hidden label, receives messages broadcast by the broadcast channel, and processes the received messages according to the received messages and the target message.
8. An electronic device comprising a memory, a processor, a bus, and a computer program stored in the memory and executable on the processor, wherein, When the processor executes the computer program, it implements the message broadcasting method as described in any one of claims 1 to 6.
9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the message broadcasting method as described in any one of claims 1 to 6.