Large-screen pop-up window interaction method and device, storage medium and electronic equipment

Abstract

This application discloses a method, apparatus, storage medium, and electronic device for large-screen pop-up window interaction, relating to the field of display output technology. The method includes: configuring multiple iframes in a large-screen display system, assigning a unique title label to each iframe, and setting its innerText as a unique identifier for the corresponding iframe; setting a control button in one iframe, binding a click trigger event containing the unique identifier of the target iframe (the other iframe carrying the pop-up content); responding to the button click, parsing the identifier using a native scripting language, matching the title label's innerText to locate the target iframe; and then modifying its display attributes using the same language to switch between visible and hidden states, thus completing the large-screen pop-up window interaction. This application solves the technical problem that current solutions cannot achieve efficient interaction between iframes, resulting in a poor user experience and slow page loading and switching.

Description

Technical Field

[0001] This application relates to the field of display output technology, and in particular to a large-screen pop-up window interaction method, device, storage medium and electronic device. Background Technology

[0002] In the process of information technology construction in fields such as business intelligence, data monitoring, and intelligent transportation, large-screen display systems have become an important carrier for realizing data visualization, real-time monitoring of business status, and decision analysis. They can centrally display multi-dimensional and multi-module business data, meeting the needs of staff for rapid acquisition and analysis of massive amounts of information. To achieve modularity and independence of large-screen display content, the industry commonly uses embedded iframe components to separate and host different business page content, constructing different display modules within the large screen through multiple independent iframe components. Therefore, how to achieve efficient interaction between multiple iframe components has become a key technical issue in the front-end development of large-screen display systems, especially the ability to achieve pop-up display and hiding of iframe component content through simple operations, which directly affects the operational efficiency and user experience of the large-screen display system.

[0003] In existing technologies, the interaction and pop-up requirements of multiple iframe components within a large-screen display system mainly employ complex event triggering mechanisms or fixed pop-up implementation schemes. Some solutions configure a unique Document Object Model (DOM) identifier for each iframe component, combining multi-level DOM queries and operations to achieve iframe component positioning and visibility control. Other solutions introduce third-party plugins or front-end component libraries, using plugin-encapsulated functionality to implement iframe component pop-up interactions. While these solutions can achieve iframe component pop-up effects to a certain extent, they all require designing cumbersome triggering logic and cross-page communication rules. This not only increases the complexity of front-end development and code maintenance costs for large-screen display systems but also easily leads to slower page loading and interaction response speeds due to complex DOM operations or plugin dependencies. Summary of the Invention

[0004] In view of this, this application provides a large-screen pop-up interaction method, device, storage medium and electronic device, which can solve the technical problem that the current technical solution cannot achieve efficient interaction between iframes, resulting in poor user experience and slow page loading and switching.

[0005] According to a first aspect of this application, a method for large-screen pop-up window interaction is provided, comprising: In the large-screen display system, multiple iframes are configured, each iframe is assigned a unique title tag, and the innerText of the title tag is set as the unique identifier of the corresponding iframe. A control button is set in one of the multiple iframes, and a click trigger event containing the target unique identifier information corresponding to the target iframe is bound to the control button. The target iframe is the iframe used to carry the pop-up display content, excluding the iframe where the control button is set. In response to the click operation of the control button, the unique identifier information of the target is obtained by parsing with the native scripting language, and the title tag innerText of the target iframe is matched according to the unique identifier information to locate the target iframe; By modifying the display attributes of the target iframe using the native scripting language, the display and hidden states of the target iframe can be switched, thus completing the interactive operation of the large-screen pop-up window.

[0006] According to a second aspect of this application, a large-screen pop-up window interactive device is provided, comprising: The configuration module is used to configure multiple iframes in the large-screen display system, configure a unique title tag for each iframe, and set the innerText of the title tag as the unique identifier of the corresponding iframe. The binding module is used to set a control button in one of the multiple iframes and bind a click trigger event containing the target unique identifier information corresponding to the target iframe to the control button. The target iframe is the iframe that carries the pop-up display content in the multiple iframes, excluding the iframe where the control button is set. The positioning module is used to respond to the click operation of the control button, parse and obtain the unique identifier information of the target through the native scripting language, and match the innerText of the title tag of the target iframe according to the unique identifier information of the target to locate the target iframe; The switching module is used to modify the display attributes of the target iframe through the native scripting language, thereby switching the target iframe between its displayed and hidden states and completing the interactive operation of the large-screen pop-up window.

[0007] According to a third aspect of this application, a storage medium is provided on which a computer program is stored, which, when executed by a processor, implements the above-described large-screen pop-up interaction method.

[0008] According to a fourth aspect of this application, an electronic device is provided, including a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, wherein the processor executes the program to implement the above-described large-screen pop-up interaction method.

[0009] By employing the aforementioned technical solutions, the large-screen pop-up interaction method, device, storage medium, and electronic device provided in this application configure exclusive title tags for multiple iframes in the large-screen display system and set their innerText as the unique identifier information of the corresponding iframe. Interaction is triggered by a control button bound to the target's unique identifier information. Then, the identifier information is parsed using a native scripting language, and the target iframe is accurately positioned by matching the title tag's innerText. Finally, the display attributes of the target iframe are modified to complete the pop-up interaction. This eliminates the need for complex DOM identifier configuration, multi-level DOM query operations, and the introduction of third-party plugins / front-end component libraries in existing technologies. It also eliminates the need for cumbersome trigger logic and cross-page communication rule design, significantly reducing the complexity of front-end development and code maintenance costs for large-screen display systems. Furthermore, relying on the lightweight operation of the native scripting language and the precise matching and positioning of the title tag's innerText, it avoids the resource consumption problems caused by complex DOM operations and plugin dependencies, effectively improving page loading efficiency and pop-up interaction response speed, and achieving simple, efficient, and flexible pop-up interaction control between multiple iframe components.

[0010] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, specific embodiments of this application are given below. Attached Figure Description

[0011] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings: Figure 1 A flowchart illustrating a large-screen pop-up interaction method provided in an embodiment of this application is shown; Figure 2 A flowchart illustrating a large-screen pop-up interaction method according to another embodiment of this application is shown; Figure 3 This illustration shows a structural schematic diagram of a large-screen pop-up interactive device provided in an embodiment of this application; Figure 4 A schematic diagram of another large-screen pop-up interactive device provided in an embodiment of this application is shown. Detailed Implementation

[0012] The present application will be described in detail below with reference to the accompanying drawings and embodiments. It should be noted that, unless otherwise specified, the embodiments and features described in the embodiments of the present application can be combined with each other.

[0013] In existing technologies, the interaction and pop-up requirements of multiple iframe components within a large-screen display system mainly employ complex event triggering mechanisms or fixed pop-up implementation schemes. Some solutions configure a unique Document Object Model (DOM) identifier for each iframe component, combining multi-level DOM queries and operations to achieve iframe component positioning and visibility control. Other solutions introduce third-party plugins or front-end component libraries, using plugin-encapsulated functionality to implement iframe component pop-up interactions. While these solutions can achieve iframe component pop-up effects to a certain extent, they all require designing cumbersome triggering logic and cross-page communication rules. This not only increases the complexity of front-end development and code maintenance costs for large-screen display systems but also easily leads to slower page loading and interaction response speeds due to complex DOM operations or plugin dependencies.

[0014] To address the aforementioned technical problems, embodiments of the present invention provide a large-screen pop-up window interaction method, such as... Figure 1 As shown, the method includes: Step 110: Configure multiple iframes in the large-screen display system, configure a unique title label for each iframe, and set the innerText of the title label to the unique identifier of the corresponding iframe.

[0015] The large-screen display system is applied in fields such as business intelligence, data monitoring, and decision analysis. It is a front-end display system that enables centralized visualization of multi-dimensional data and real-time monitoring of business status. It is the basic carrier for multi-module page content interaction and pop-up operations. The iframe is an embedded frame that is used in the large-screen display system to separate and carry different independent page content. It can realize the modular division of the displayed content and ensure the independence of each module page. The title tag is a unique identifier tag configured for each iframe in the large-screen display system. It is the medium for binding the iframe with unique identification information and is used to achieve accurate identification and positioning of the iframe. The innerText is the internal text attribute of the title tag. It is the carrier for storing the iframe's identification information. The identification information can be set and read through this attribute. The unique identification information refers to the unique feature information configured for each iframe. It corresponds one-to-one with the iframe and is the core basis for distinguishing different iframes in the large-screen display system, ensuring the uniqueness and accuracy of iframe positioning.

[0016] In this embodiment of the disclosure, during the front-end construction stage of the large-screen display system, several iframes can be configured according to actual display and interaction needs to achieve modular independent carrying of different display content. To ensure that each iframe can be accurately identified and located, a unique title tag can be configured for each iframe, so that each title tag forms a unique association with the corresponding iframe. At the same time, a pre-set, non-repeating unique identifier is assigned to the innerText attribute of the title tag of the corresponding iframe. In this way, the binding between the iframe and the unique identifier is completed, so that each iframe in the large-screen display system has a unique feature that can be accurately retrieved, laying the foundation for subsequent iframe positioning and interactive operations based on the identifier information. In this process, different identifier configuration forms and tag association methods can be selected according to system requirements, as long as the uniqueness of the identifier information and the exclusive correspondence between the tag and the iframe are guaranteed.

[0017] This approach configures unique title tags for multiple iframes in a large-screen display system and sets their innerText as unique identifiers. By establishing a dedicated link between the title tags and these unique identifiers, each iframe is given a precise and easily identifiable characteristic in a simple and direct way. This eliminates the complex DOM tag configuration required by existing technologies, and avoids the need for multi-level DOM tag configuration rules, significantly simplifying the iframe identification configuration process and reducing the development complexity of front-end identification configuration for the large-screen display system. Furthermore, the unique identifier method based on the innerText of the title tag eliminates the need for third-party plugins or front-end component libraries to identify and associate iframes, reducing system resource consumption caused by external dependencies. It also provides a unified and concise retrieval basis for subsequent iframe location operations, avoiding the retrieval confusion caused by complex identifier configurations, and improving the smoothness and stability of subsequent iframe interactions. This provides a simple and reliable foundation for the efficient implementation of the entire large-screen pop-up interaction process.

[0018] Step 120: Set a control button in one of the multiple iframes and bind a click trigger event containing the unique identifier information of the target iframe to the control button.

[0019] Among them, the control button is an interactive element deployed within an iframe, serving as the core entry point for triggering large-screen pop-up interactions. It can receive user clicks and trigger subsequent iframe positioning and visibility control processes. The click trigger event is a front-end interactive event bound to the control button, acting as a carrier connecting user clicks with subsequent technical execution logic. It can trigger preset operations such as identifier resolution and iframe positioning when the button is clicked. The target iframe is the iframe used to carry the pop-up content, excluding the iframe containing the control button. The target unique identifier is a unique feature information that corresponds one-to-one with the target iframe, serving as the core retrieval basis for locating the target iframe. It is consistent with the target iframe's title tag innerText. The target iframe is an iframe specifically used to carry the pop-up content, independent of the iframe containing the control button, and is the core object whose visibility is controlled during large-screen pop-up interactions.

[0020] In this embodiment of the disclosure, any one of the multiple iframes with unique identifier information configured can be selected as the interactive control carrier, and control buttons can be deployed within it. Based on the actual needs of large-screen pop-up interaction, the target iframe that needs to be controlled to show or hide is determined. The target unique identifier information corresponding to the target iframe is extracted, and this information is integrated into the click trigger event of the control button to complete the binding configuration. It is clear that the iframe where the control button is deployed and the target iframe are independent and different objects among the multiple iframes, and the target iframe only undertakes the function of carrying the pop-up display content. Through this binding method, the click operation of the control button can be directly associated with the corresponding target iframe, laying the logical and information foundation for the accurate positioning of the target iframe after the subsequent click operation is triggered. The entire process can select different button deployment forms and event binding logic according to the system interaction design requirements, as long as the effective association between the click trigger event and the target unique identifier information is guaranteed.

[0021] By setting a control button within one of multiple iframes and binding it to a click-triggered event containing a unique target identifier, while clearly defining the function and scope of the target iframe, user pop-up interactions can be achieved simply by clicking a single control button. This eliminates the cumbersome event triggering logic and cross-page communication rules of existing technologies, significantly simplifying the operation triggering process for large-screen pop-up interactions and reducing the development and maintenance costs of front-end interaction logic. Furthermore, by directly binding the unique target identifier to the click-triggered event, button clicks directly target the corresponding iframe, avoiding complex event parsing and information matching, reducing logical redundancy in the interaction process, and improving the efficiency of the connection between click operations and subsequent iframe control flows. Moreover, by clearly defining the functional division between the target iframe and the iframe containing the control button, the interaction division among multiple iframes is clearer, avoiding object confusion during iframe interactions and providing a reliable operation triggering foundation for subsequent accurate and efficient iframe positioning and visibility control.

[0022] Step 130: In response to the click operation of the control button, obtain the target unique identifier information by parsing with the native scripting language, and match the innerText of the target iframe's title tag based on the target unique identifier information to locate the target iframe.

[0023] Among them, the native scripting language is a front-end scripting language that runs directly in the browser without relying on third-party plugins, component libraries or external script files. It is the basic language for realizing the parsing, manipulation and interaction of front-end page elements, and can directly complete front-end operations such as parsing identification information and locating page elements.

[0024] In this embodiment of the disclosure, when a user clicks a control button deployed within an iframe, the system immediately responds to the operation and initiates preset processing logic. Using native scripting language, it identifies and extracts the unique identifier information of the target bound to the click event. After completing the information parsing and acquisition, it uses this unique identifier information as the retrieval basis to comprehensively compare and verify the innerText content corresponding to all iframes in the large-screen display system that have configured exclusive title tags. By matching information one by one, it finds the title tag that is completely consistent with the unique identifier information of the target, thereby locking the iframe corresponding to the title tag and completing the precise positioning of the target iframe. The entire process relies on native scripting language to achieve full-process information processing and object retrieval. Different parsing logics and matching methods can be selected according to the system's technical design, as long as the accuracy of information parsing and the uniqueness of the matching results are guaranteed.

[0025] Upon responding to a click on a control button, the system uses native scripting language to parse and obtain the target's unique identifier. Based on this information, it matches the title tag's innerText to locate the target iframe. Leveraging the native execution characteristics of the scripting language, no third-party plugins or component libraries are needed for parsing and matching, avoiding resource consumption and compatibility issues caused by external dependencies. It also eliminates the need for multi-level DOM queries and complex cross-page communication rules found in existing technologies, significantly simplifying the technical implementation logic of iframe location and reducing front-end development and maintenance costs. By using the target's unique identifier as the core basis for precise matching of the title tag's innerText, replacing the traditional complex DOM identifier retrieval method, the iframe location logic becomes more direct and the retrieval more efficient. This effectively reduces operational redundancy during the location process, improving the speed and accuracy of target iframe location. It achieves a rapid transition from user click to target object location, laying a solid foundation for the efficient execution of subsequent pop-up interactions and significantly improving the response efficiency of iframe interactions in large-screen display systems.

[0026] Step 140: Modify the display attributes of the target iframe using native scripting language to switch between the displayed and hidden states of the target iframe, thus completing the interactive operation of the large-screen pop-up window.

[0027] Among them, the display attribute is the basic attribute used to control the visual state of front-end page elements. Adjusting the attribute value directly determines whether the page element is visible or invisible in the display interface, and is the core control parameter for realizing element display and occlusion. The state switching is the operation process of adjusting the current visual state of the target iframe to the opposite state. It can complete a stable transition between the display state and the hidden state, and meet the display and closing requirements of pop-up interaction. The large screen pop-up interaction operation is based on the page interaction requirements of the large screen display system. By controlling the visual state of the target iframe, it realizes the complete interactive process of opening and closing the pop-up, and is the core functional implementation form to improve the convenience of large screen operation.

[0028] In this embodiment of the disclosure, after the target iframe is accurately located, the display attributes of the locked target iframe can be adjusted directly using native scripting language. According to the actual pop-up interaction requirements, the display attributes of the target iframe are modified to parameters opposite to the current state, thereby achieving a stable transition between the target iframe's display state and hidden state. The entire state adjustment process is completed independently using native scripting language without the need for external tools or additional logic assistance. Finally, the pop-up interaction function in the large screen scenario is completed through state switching.

[0029] By using native scripting language to modify the display attributes of the target iframe to achieve state switching, large-screen pop-up interactions can be completed in a lightweight manner without relying on third-party plugins or complex control logic. This can effectively reduce system load and front-end development and maintenance costs, while simplifying the implementation process of pop-up interactions, improving the response speed and execution stability of state switching, ensuring smooth and efficient interactive operations of the large-screen display system, and providing users with a simple and reliable pop-up interaction experience.

[0030] In summary, the large-screen pop-up interaction method provided in this application configures exclusive title tags for multiple iframes in the large-screen display system and sets their innerText as the unique identifier of the corresponding iframe. Interaction is triggered by a control button bound to the target's unique identifier. Then, the native scripting language parses this identifier and matches the innerText of the title tag to achieve precise positioning of the target iframe. Finally, the display attributes of the target iframe are modified to complete the pop-up interaction. This method eliminates the complex DOM identifier configuration, multi-level DOM query operations, and the introduction of third-party plugins / front-end component libraries found in existing technologies. It also eliminates the need for cumbersome trigger logic and cross-page communication rule design, significantly reducing the complexity of front-end development and code maintenance costs for large-screen display systems. Furthermore, relying on the lightweight operation of the native scripting language and the precise matching and positioning of the innerText of the title tag, it avoids the resource consumption problems caused by complex DOM operations and plugin dependencies, effectively improving page loading efficiency and pop-up interaction response speed, and achieving simple, efficient, and flexible pop-up interaction control between multiple iframe components.

[0031] Furthermore, as a refinement and extension of the specific implementation methods of the above embodiments, and to fully illustrate the implementation methods of this embodiment, this embodiment also provides another large-screen pop-up window interaction method, such as... Figure 2 As shown, the method includes: Step 210: Configure multiple iframes in the large-screen display system, configure a unique title label for each iframe, and set the innerText of the title label to the unique identifier of the corresponding iframe.

[0032] In the embodiments of this disclosure, during the front-end page construction stage of the large-screen display system, multiple iframes that maintain page independence can be embedded according to business display and interaction requirements to build the basic structure for multi-area content display on the large screen. Then, a unique title tag is configured for each iframe, establishing a unique association between each iframe and its corresponding title tag, making each title tag a unique identifier for its corresponding iframe. Finally, a unique character identifier is configured for the innerText attribute of each title tag, making the character identifier a unique identification information for the corresponding iframe. This establishes a unified and unique identification basis for the subsequent positioning and operation of iframes by the front-end script, realizing standardized management of multiple iframes at the identifier level.

[0033] Accordingly, the implementation steps may include: embedding at least two independent iframes in the front-end page of the large-screen display system; configuring a title tag for each iframe individually, so that each iframe and the title tag have a one-to-one correspondence; configuring a unique character identifier for the innerText of each title tag as the unique identifier information of the iframe.

[0034] Step 220: Create a control button element in one of the multiple iframes, and set the interaction style and operation prompt information for the control button element.

[0035] Among them, the control button element is a front-end interactive control created in the iframe page of the large-screen display system. It is the core entry point for triggering iframe pop-up interactive operations and can be triggered by users through clicks and other means to activate preset interactive logic. The interaction style refers to the visual presentation and operation feedback effects designed for the control button element, including the basic appearance of the button, hover state, click state, and other visual styles, which are adapted to the operation scenarios and visual experience of the large-screen display. The operation prompt information refers to the text or symbol-type prompt content configured for the control button element, which is used to clarify the function and purpose of the button to the user, guide the user to perform the corresponding interactive operation, and improve the intuitiveness of the operation.

[0036] In this embodiment of the disclosure, one of the multiple iframes with completed identifier configuration can be selected as the iframe for interactive control. On the front-end page of the iframe, corresponding control button elements are created according to the business requirements of pop-up interaction. Then, combined with the overall visual style and operation scenario of the large screen display system, an adaptive interactive style is designed for the created control button elements, so that the buttons present differentiated visual effects in different operation states. At the same time, clear and easy-to-understand operation prompts are configured for the buttons, completing the full-process configuration of the control buttons from creation to use, making them the exclusive operation entry point for users to trigger large screen pop-up interaction.

[0037] Creating control button elements within a designated iframe and customizing their interaction styles and operation prompts not only provides an intuitive and personalized user entry point for large-screen pop-up interactions, allowing users to quickly identify and execute pop-up-triggered actions, but also enhances the visual feedback and user experience of button operations by adapting the interaction style design to the large-screen scenario, reducing the probability of user errors. Meanwhile, clear operation prompts further clarify the button's functional positioning, enabling users of different skill levels to quickly understand and use it. Overall, this makes the triggering process of large-screen pop-up interactions more aligned with user operating habits, improving the front-end operation experience of pop-up interactions and making the interaction design of the large-screen display system more practical and user-friendly.

[0038] Step 230: Extract the target unique identifier information pre-configured in the target iframe and use the target unique identifier information as the binding parameter for the click-triggered event.

[0039] In this embodiment of the disclosure, after completing the creation of the control button and the configuration of the unique identifier of the target iframe, the target unique identifier information pre-set for the target iframe can be retrieved from the system configuration information. The identifier information is then associated with the click trigger event designed for the control button, and the identifier information is configured as a unique binding parameter for the event. This allows the target unique identifier information to be directly retrieved when the click trigger event is triggered by user operation, providing core data basis for subsequent operations to locate the target iframe.

[0040] Step 240: Bind a click event to the control button element using the event binding method of the native scripting language. The click event is used to trigger the retrieval of the target's unique identifier information.

[0041] In this embodiment of the disclosure, the standard event binding capability provided by the front-end native scripting language can be relied upon to call the corresponding event binding method, establish a stable association between the pre-set click trigger event and the control button element, so that the click trigger event is attached to the control button element to take effect, and at the same time complete the association configuration of the event logic, so that when the user performs a click operation on the button, the corresponding event logic can be directly activated and the unique identification information of the target can be obtained, forming a complete trigger and data acquisition chain.

[0042] By employing event binding methods in native scripting languages, the association between control buttons and click-triggered events is achieved. The entire process of binding interactive logic can be completed without relying on third-party plugins, ensuring the lightweight and stable nature of the front-end code. At the same time, it enables direct linkage between click operations and identification information acquisition, which simplifies the logic flow of interactive triggering, improves the stability and execution efficiency of event response, provides a reliable triggering foundation for subsequent accurate iframe positioning and pop-up interaction, and also reduces the development and maintenance difficulty of front-end interactive logic.

[0043] Step 250: In response to the click operation of the control button, the target unique identifier information is obtained by parsing with the native scripting language, and the target iframe is located by matching the target iframe's title tag innerText based on the target unique identifier information.

[0044] In this embodiment of the disclosure, after the system detects a user's click on the control button, it can immediately trigger the corresponding event handling logic in the native scripting language to parse out the pre-bound target unique identifier information. Then, through the page element query capability of the native scripting language, it can comprehensively search all configured iframes and their exclusive title tags in the front-end page of the large screen display system. The innerText of each title tag obtained by the search is verified to be consistent with the parsed target unique identifier information. Finally, the iframe corresponding to the title tag that has been successfully verified and matched is determined as the target iframe that needs to be operated in this pop-up interaction, thus completing the accurate positioning of the target object.

[0045] Accordingly, the implementation steps may include: in response to detecting a click operation of a control button, triggering a preset event handling function of the native scripting language, parsing and obtaining the target unique identifier information pre-configured for the target iframe from the click trigger event; traversing all configured iframes and corresponding title tags in the front-end page of the large screen display system through the document object model query method of the native scripting language; matching the innerText of each traversed title tag with the parsed target unique identifier information one by one; when a title tag whose innerText matches the target unique identifier information is matched, determining the iframe corresponding to the matched title tag as the target iframe.

[0046] Using the click of a control button as the trigger node, the system uses native scripting language to parse the target's unique identifier and match and locate the title tag's innerText. This enables native execution of the entire process from operation triggering to target iframe location, without relying on external components, ensuring fast response times for location operations. Furthermore, by using a pre-configured unique identifier as the core matching criterion, combined with a comprehensive search and comparison of all iframes and tags on the page, the system logically ensures the accuracy of target iframe location, effectively avoiding location deviation issues in multi-iframe scenarios. This provides subsequent pop-up interactions with a clear and unique target, simplifying the overall iframe location logic and improving the overall execution efficiency and stability of large-screen pop-up interactions.

[0047] Step 260: Modify the display attributes of the target iframe using native scripting language to switch between the displayed and hidden states of the target iframe, thus completing the interactive operation of the large-screen pop-up window.

[0048] In specific application scenarios, as a preferred approach, after accurately locating the target iframe through identifier matching, the native scripting language can be used to retrieve the iframe's display attributes to obtain its current actual display or hidden state. At the same time, the target state of the pop-up window corresponding to the current click operation is retrieved, and the two states are comprehensively compared and judged. Different operation logic is executed according to the judgment result. If the two states are consistent, the current modification operation of the iframe's display attributes is stopped and the corresponding status prompt information is fed back to the user. If the two states are inconsistent, the display attributes of the target iframe are modified through the native scripting language to achieve effective switching between the iframe's display and hidden states, and finally complete the interactive operation of the entire large-screen pop-up window.

[0049] Accordingly, the embodiment may further include: after locating the target iframe, obtaining the current display and hidden state of the target iframe using a native scripting language; comparing the current state with the preset target state of the pop-up window for this click operation; if the current state is consistent with the target state of the pop-up window, terminating the current display attribute modification operation and providing a status prompt; if the current state is inconsistent with the target state of the pop-up window, modifying the display attributes of the target iframe using a native scripting language to switch the target iframe's display and hidden states, thus completing the large-screen pop-up window interaction operation. Here, the target state of the pop-up window is the preset display or hidden state that the target iframe needs to achieve for this control button click operation, and is the expected result of the pop-up window interaction operation.

[0050] After locating the target iframe, a state acquisition and comparison process is added. Based on the judgment result, corresponding display attribute modifications or termination operations are executed with feedback. This not only avoids invalid modifications to iframe display attributes through pre-processing state validation, reducing redundant execution of front-end scripts and unnecessary consumption of system resources, but also makes the logic of pop-up interactions more rigorous. Furthermore, the status feedback allows users to be promptly informed of the operation results, improving the human-computer interaction experience. Using native scripting languages ​​to complete the entire process of state acquisition, judgment, and attribute modification ensures fast response times, making large-screen pop-up interactions more efficient and better suited to actual user needs. In this embodiment of the disclosure, the document object model operation method of the native scripting language can be used to accurately obtain the page object corresponding to the target iframe from the front-end page. The native display attributes used to control the state can be directly retrieved from the object. The current display and hidden state of the target iframe can be determined by the attribute value. Combined with the actual interaction requirements of the large screen pop-up, the native display attribute is modified to the opposite value of the current state. Then, the re-rendering of the front-end page is triggered by the native scripting language, so that the modification result of the native display attribute takes effect in the page immediately, and finally the pop-up display or hiding effect of the target iframe is achieved.

[0051] Accordingly, the specific steps of the implementation may include: obtaining the front-end page object of the target iframe through the document object model operation method of the native scripting language; retrieving the native display attributes of the target iframe from the front-end page object and determining the current display and hidden state of the target iframe; modifying the native display attributes to the opposite value of the current state according to the pop-up interaction requirements; triggering the rendering operation of the front-end page through the native scripting language to make the modification of the native display attributes take effect, thus completing the pop-up display or hiding of the target iframe. The native display attributes of the target iframe are either the `style.display` attribute or the `style.visibility` attribute.

[0052] In summary, the technical solution provided in this application configures unique title tags for multiple iframes in a large-screen display system and sets their innerText as the unique identifier for each iframe. Interaction is triggered by a control button bound to the target's unique identifier. Then, the native scripting language parses this identifier and matches it with the title tag's innerText to achieve precise positioning of the target iframe. Finally, the display attributes of the target iframe are modified to complete the pop-up interaction. This eliminates the complex DOM identifier configuration, multi-level DOM query operations, and the introduction of third-party plugins / front-end component libraries found in existing technologies. It also eliminates the need for cumbersome trigger logic and cross-page communication rule design, significantly reducing the complexity of front-end development and code maintenance costs for large-screen display systems. Furthermore, relying on the lightweight operation of the native scripting language and the precise matching and positioning of the title tag's innerText, it avoids the resource consumption problems caused by complex DOM operations and plugin dependencies, effectively improving page loading efficiency and pop-up interaction response speed, and achieving simple, efficient, and flexible pop-up interaction control between multiple iframe components.

[0053] Furthermore, as Figure 1 and Figure 2 The specific implementation of the method shown in this embodiment provides a large-screen pop-up interactive device, such as... Figure 3 As shown, the device includes: a configuration module 31, a binding module 32, a positioning module 33, and a switching module 34.

[0054] Configuration module 31 can be used to configure multiple iframes in a large-screen display system, configure a unique title label for each iframe, and set the innerText of the title label as the unique identifier of the corresponding iframe; The binding module 32 can be used to set control buttons in one of the multiple iframes and bind click trigger events containing the target unique identifier information of the target iframe to the control buttons. The target iframe is the iframe that carries the pop-up content, excluding the iframe where the control buttons are set. The positioning module 33 can be used to respond to the click operation of the control button, obtain the unique identifier information of the target through the native scripting language, and match the innerText of the title tag of the target iframe according to the unique identifier information of the target to locate the target iframe; The switching module 34 can be used to modify the display attributes of the target iframe through native scripting language, thereby switching the target iframe between displayed and hidden states and completing the interactive operation of the large screen pop-up window.

[0055] In some embodiments of this application, the configuration module 31 can be used to embed at least two independent iframes in the front-end page of a large-screen display system; configure a title tag for each iframe separately so that each iframe and the title tag have a one-to-one correspondence; and configure a unique character identifier for the innerText of each title tag as the unique identifier information of the iframe.

[0056] In some embodiments of this application, the binding module 32 can be specifically used to create control button elements in one of a group of iframes, set the interaction style and operation prompt information of the control button elements; extract the target unique identifier information pre-configured in the target iframe, and use the target unique identifier information as the binding parameter of the click trigger event; bind the click trigger event to the control button element through the event binding method of the native scripting language, and the click trigger event is used to trigger the acquisition of the target unique identifier information.

[0057] In some embodiments of this application, the positioning module 33 can be specifically used to respond to the detection of a click operation on a control button, trigger a preset event handling function of the native scripting language, parse and obtain the target unique identifier information pre-configured in the target iframe from the click trigger event; traverse all configured iframes and corresponding title tags in the front-end page of the large screen display system through the document object model query method of the native scripting language; match the innerText of each title tag obtained through traversal with the parsed target unique identifier information one by one; when a title tag whose innerText matches the target unique identifier information is matched, the iframe corresponding to the matched title tag is determined as the target iframe.

[0058] In some embodiments of this application, such as Figure 4 As shown, the device may further include: an acquisition module 35, a comparison module 36, and a processing module 37; The acquisition module 35 can be used to obtain the current display and hiding state of the target iframe through native scripting language after the target iframe is located; Comparison module 36 can be used to compare and judge the current state with the preset pop-up target state of the current click operation; The processing module 37 can be used to terminate the current display attribute modification operation and provide a status prompt if the current state is consistent with the target state of the pop-up window. If the current state is inconsistent with the target state of the pop-up, the switching module 34 modifies the display attributes of the target iframe using native scripting language to switch the target iframe between display and hidden states, thus completing the large-screen pop-up interaction operation.

[0059] In some embodiments of this application, the switching module 34 can be specifically used to obtain the front-end page object of the target iframe through the document object model operation method of the native scripting language; retrieve the native display attributes of the target iframe from the front-end page object and determine the current state of the target iframe being displayed or hidden; modify the native display attributes to the opposite attribute value to the current state according to the pop-up interaction requirements; trigger the rendering operation of the front-end page through the native scripting language to make the modification of the native display attributes take effect, and complete the pop-up display or hiding of the target iframe.

[0060] In some embodiments of this application, the native display property of the target iframe is the style.display property or the style.visibility property.

[0061] It should be noted that other corresponding descriptions of the functional units involved in the large-screen pop-up interactive device provided in this embodiment can be found in [reference]. Figure 1 and Figure 2 The corresponding description in [the document] will not be repeated here.

[0062] Based on the above, Figure 1 and Figure 2 Accordingly, this embodiment also provides a storage medium storing a computer program that, when executed by a processor, implements the above-described method. Figure 1 and Figure 2 The large-screen pop-up interaction method is shown.

[0063] Based on this understanding, the technical solution of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as CD-ROM, USB flash drive, mobile hard drive, etc.) and includes several instructions to cause an electronic device (such as personal computer, server, or network device, etc.) to execute the methods of various implementation scenarios of this application.

[0064] Based on the above, Figure 1 and Figure 2 The method shown, and Figure 3 and Figure 4 To achieve the above objectives, the present application also provides an electronic device, specifically a personal computer, tablet computer, server, or other network device, as shown in the virtual device embodiment. This device includes a storage medium and a processor; the storage medium stores a computer program; the processor executes the computer program to achieve the above-described objectives. Figure 1 and Figure 2 The large-screen pop-up interaction method is shown.

[0065] Optionally, the aforementioned physical devices may also include a user interface, a network interface, a camera, radio frequency (RF) circuitry, sensors, audio circuitry, a Wi-Fi module, etc. The user interface may include a display screen, input units such as a keyboard, etc., and optional user interfaces may also include USB interfaces, card reader interfaces, etc. The network interface may optionally include standard wired interfaces, wireless interfaces (such as Wi-Fi interfaces), etc.

[0066] Those skilled in the art will understand that the physical device structure provided in this embodiment does not constitute a limitation on the physical device, and may include more or fewer components, or combine certain components, or have different component arrangements.

[0067] The storage medium may also include an operating system and a network communication module. The operating system is a program that manages the hardware and software resources of the aforementioned physical device, supporting the operation of information processing programs and other software and / or programs. The network communication module is used to enable communication between the various components within the storage medium, as well as communication with other hardware and software in the information processing physical device.

[0068] Through the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary general-purpose hardware platform, or it can be implemented by hardware.

[0069] This invention configures unique title tags for multiple iframes in a large-screen display system and sets their innerText to a unique identifier for each iframe. Interaction is triggered by a control button bound to this unique identifier. The identifier is then parsed using a native scripting language and matched with the innerText of the title tag to achieve precise positioning of the target iframe. Finally, the display attributes of the target iframe are modified to complete the pop-up interaction. This approach eliminates the complex DOM identifier configuration, multi-level DOM query operations, and the introduction of third-party plugins / front-end component libraries found in existing technologies. It also eliminates the need for cumbersome trigger logic and cross-page communication rule design, significantly reducing the complexity of front-end development and code maintenance costs for large-screen display systems. Furthermore, relying on the lightweight operation of the native scripting language and the precise matching and positioning of the innerText of the title tag avoids the resource consumption problems caused by complex DOM operations and plugin dependencies, effectively improving page loading efficiency and pop-up interaction response speed. This enables simple, efficient, and flexible pop-up interaction control between multiple iframe components.

[0070] Those skilled in the art will understand that the accompanying drawings are merely schematic diagrams of a preferred embodiment, and the modules or processes shown in the drawings are not necessarily essential for implementing this application. Those skilled in the art will understand that the modules in the apparatus of the embodiment can be distributed within the apparatus of the embodiment as described, or can be modified to be located in one or more apparatuses different from this embodiment. The modules of the above-described embodiment can be combined into one module, or further divided into multiple sub-modules.

[0071] The serial numbers in this application are for descriptive purposes only and do not represent the superiority or inferiority of any particular implementation scenario. The above disclosures are merely a few specific implementation scenarios of this application; however, this application is not limited thereto, and any variations conceived by those skilled in the art should fall within the protection scope of this application.

Claims

1. A large-screen pop-up window interaction method, characterized in that, include: In the large-screen display system, multiple iframes are configured, each iframe is assigned a unique title tag, and the innerText of the title tag is set as the unique identifier of the corresponding iframe. A control button is set in one of the multiple iframes, and a click trigger event containing the target unique identifier information corresponding to the target iframe is bound to the control button. The target iframe is the iframe used to carry the pop-up display content, excluding the iframe where the control button is set. In response to the click operation of the control button, the unique identifier information of the target is obtained by parsing with the native scripting language, and the title tag innerText of the target iframe is matched according to the unique identifier information to locate the target iframe; By modifying the display attributes of the target iframe using the native scripting language, the display and hidden states of the target iframe can be switched, thus completing the interactive operation of the large-screen pop-up window.

2. The method according to claim 1, characterized in that, The large-screen display system configures multiple iframes, assigns a unique title tag to each iframe, and sets the innerText of the title tag as the unique identifier for the corresponding iframe, including: Embed at least two independent iframes in the front-end page of the large-screen display system; Configure a title tag for each iframe individually, so that each iframe has a one-to-one correspondence with the title tag; Configure a unique character identifier for the innerText of each title tag as the unique identifier of the iframe.

3. The method according to claim 1, characterized in that, A control button is set in one of the multiple iframes, and a click trigger event containing the unique identifier information of the target iframe is bound to the control button, including: Create a control button element in one of the multiple iframes, and set the interaction style and operation prompt information of the control button element; Extract the pre-configured target unique identifier information of the target iframe, and use the target unique identifier information as the binding parameter of the click trigger event; A click-triggered event is bound to the control button element using the event binding method of the native scripting language. The click-triggered event is used to trigger the retrieval of the target's unique identifier information.

4. The method according to claim 1, characterized in that, The process of responding to a click on the control button involves parsing and obtaining the target's unique identifier information using a native scripting language, and then matching the target iframe's title tag `innerText` based on the target's unique identifier information to locate the target iframe, including: In response to the detection of a click on a control button, a preset event handling function of the native scripting language is triggered to parse and obtain the target unique identifier information pre-configured by the target iframe from the click trigger event; Using the document object model query method of the native scripting language, all configured iframes and their corresponding title tags in the front-end page of the large screen display system are traversed. The innerText of each title tag obtained through iteration is matched one by one with the unique identifier information of the target obtained through parsing; When a title tag whose innerText matches the target unique identifier is found, the iframe corresponding to the matched title tag is identified as the target iframe.

5. The method according to claim 1, characterized in that, Before modifying the display attributes of the target iframe using the native scripting language to switch the target iframe between displayed and hidden states and complete the large-screen pop-up interaction operation, the method further includes: After locating the target iframe, the current display and hiding state of the target iframe is obtained through the native scripting language; The current state is compared with the preset target state of the pop-up window for this click operation to make a judgment; If the current state is consistent with the target state of the pop-up window, then terminate the current display attribute modification operation and provide a status prompt message; If the current state is inconsistent with the target state of the pop-up, the display attributes of the target iframe are modified by the native scripting language to switch the target iframe between display and hidden states, thus completing the large-screen pop-up interaction operation.

6. The method according to claim 1, characterized in that, The step of modifying the display attributes of the target iframe using the native scripting language to switch the target iframe between displayed and hidden states and complete the large-screen pop-up interaction operation includes: The front-end page object of the target iframe is obtained through the document object model operation method of the native scripting language; Retrieve the native display attributes of the target iframe from the front-end page object, and determine the current display and hidden state of the target iframe. Based on the pop-up interaction requirements, the original display attributes are modified to attribute values ​​that are opposite to the current state; The rendering operation of the front-end page is triggered by the native scripting language, so that the modification of the native display attributes takes effect, and the pop-up display or hiding of the target iframe is completed.

7. The method according to claim 6, characterized in that, The native display properties of the target iframe are style.display or style.visibility.

8. A large-screen pop-up interactive device, characterized in that, include: The configuration module is used to configure multiple iframes in the large-screen display system, configure a unique title tag for each iframe, and set the innerText of the title tag as the unique identifier of the corresponding iframe. The binding module is used to set a control button in one of the multiple iframes and bind a click trigger event containing the target unique identifier information corresponding to the target iframe to the control button. The target iframe is the iframe that carries the pop-up display content in the multiple iframes, excluding the iframe where the control button is set. The positioning module is used to respond to the click operation of the control button, parse and obtain the unique identifier information of the target through the native scripting language, and match the innerText of the title tag of the target iframe according to the unique identifier information of the target to locate the target iframe; The switching module is used to modify the display attributes of the target iframe through the native scripting language, thereby switching the target iframe between its displayed and hidden states and completing the interactive operation of the large-screen pop-up window.

9. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1 to 7.

10. An electronic device comprising a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method of any one of claims 1 to 7.

Images