Display device and modal frame display method

Abstract

The application provides a display device and a modal box display method. A display of the display device is configured to display a page of different network elements and a modal box. A controller includes a first component set of a first network element and a second component set of a second network element, and is configured to: when the display displays a webpage of the first network element, in response to a first jump operation, the first component set interacts with the second component set based on the first jump operation to make the display display a list service of the second network element; and after receiving a first trigger operation for the list service, the second component set interacts with the first component set based on a modal box corresponding to the first trigger operation to make the display display the modal box in full screen. Through the scheme provided in the embodiments of the application, the display can display the modal box in full screen, and the problem that the modal box window in the prior art is small and inconvenient for user operation and the user experience is poor is solved.

Description

Technical Field

[0001] This application relates to the field of video playback technology, and in particular to a display device and a modal frame display method. Background Technology

[0002] As electronic products upgrade at an increasingly rapid pace, their performance becomes stronger and stronger, and consequently, they support a wider range of functions to meet diverse user needs.

[0003] In some scenarios, when users browse a webpage of a specific network element using electronic devices, they also want the electronic devices to be able to interact with other network elements. For example, when a user is browsing a webpage of a learning network element, they want the electronic device to display the webpage of the points mall network element and allow them to redeem the points accumulated in the learning network element for goods offered by the points mall network element.

[0004] To meet the above user needs, electronic devices can currently display modal dialog boxes for other network elements when displaying a webpage for a certain network element, based on the received user operations. These modal dialog boxes, also known as modal frames, are used to receive user operations and enable interaction between different network elements.

[0005] However, currently, electronic devices typically display this modal box in a small window within a localized area of ​​the display page, making it inconvenient for users to operate and resulting in a poor user experience. Summary of the Invention

[0006] This application provides a display device and a modal display method that can display a full-screen modal, solving the problem that the modal window in the prior art is too small, making it inconvenient for users to operate and resulting in a poor user experience.

[0007] In a first aspect, some embodiments of this application provide a display device, including:

[0008] The display is configured to show pages and modal frames of different network elements;

[0009] The controller, comprising a first set of components for the first network element and a second set of components for the second network element, is configured as follows:

[0010] When the display shows the webpage of the first network element, in response to the first redirection operation, the first component set interacts with the second component set based on the first redirection operation to make the display show the list of services of the second network element;

[0011] After receiving a first trigger operation for the list service, the second component set interacts with the first component set based on the modal corresponding to the first trigger operation, so that the display shows the modal in full screen.

[0012] Secondly, some embodiments of this application provide a modal frame display method, applied to a display device, including:

[0013] When the display device displays the webpage of the first network element, in response to the first redirection operation, the first component set of the display device interacts with the second component set of the display device based on the first redirection operation, so that the display device displays the list services of the second network element;

[0014] Upon receiving a first trigger operation for the list service, the second component set interacts with the first component set based on the modal window corresponding to the first trigger operation, so that the display device can display the modal window in full screen.

[0015] State frame.

[0016] This application provides a display device and a modal frame display method. The display device's monitor is configured to display pages and modal frames of different network elements. The controller includes a first component set of a first network element and a second component of a second network element.

[0017] The set is configured such that, when the display shows the webpage of the first network element, in response to a first redirect operation, the first component set interacts with the second component set based on the first redirect operation to cause the display to show the list of services of the second network element; upon receiving...

[0018] After receiving the first trigger operation for the list business, the second component set interacts with the first component set based on the modal corresponding to the first trigger operation, so that the display can display the modal in full screen.

[0019] The solution provided by the embodiments of this application enables the display to show a full-screen modal frame, solving the problem that the modal frame window in the prior art is small, making it inconvenient for users to operate and resulting in a poor user experience. 5. Attached Figure Descriptions

[0020] Figure 1 This is a schematic diagram illustrating an interaction scenario between a display device and a control apparatus, as shown in an exemplary embodiment of this application.

[0021] Figure 2 This is a hardware configuration block diagram of a display device illustrated in an exemplary embodiment of this application;

[0022] Figure 3This is a software configuration block diagram of a display device illustrated in an exemplary embodiment of this application;

[0023] Figure 4(a) is a schematic diagram of the webpage display page of the first network element;

[0024] Figure 4(b) is a schematic diagram of the display page for the list service of the second network element;

[0025] Figure 4(c) is a schematic diagram of the display page of the modal frame of the second network element;

[0026] Figure 5 This is a schematic flowchart illustrating a display device according to an exemplary embodiment of this application;

[0027] Figure 6 This is a schematic diagram illustrating a first component set and a second component set according to an exemplary embodiment of this application;

[0028] Figure 7 This is an exemplary embodiment of the present application illustrating the interaction between a first component set and a second component set; 5 Figure 8 This is an exemplary embodiment of the present application illustrating another interaction diagram of the first component set and the second component set;

[0029] Figure 9 This is an exemplary embodiment of the present application illustrating another interaction diagram of the first component set and the second component set;

[0030] Figure 10 This is an exemplary embodiment of the present application illustrating another interaction between a first set of components and a second set of components;

[0031] Figure 11 This is an exemplary embodiment of the present application illustrating another interaction diagram of the first component set and the second component set;

[0032] Figure 12 This is an exemplary embodiment of the present application illustrating another interaction diagram of the first component set and the second component set;

[0033] Figure 13 This is an exemplary embodiment of the present application illustrating another interaction diagram of a first component set and a second component set. Detailed Implementation

[0034] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0035] The terminology used in this application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. The singular forms “a,” “the,” and “the” used in this application and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any or all possible combinations of one or more of the associated listed items.

[0036] It should be understood that although the terms first, second, third, etc., may be used in this application to describe various information, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, without departing from the scope of this application, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to determination."

[0037] The terminology used in this application is for the purpose of describing particular embodiments only and is not intended to limit the application. Unless otherwise defined, the technical or scientific terms used in this application should be understood in their ordinary sense by one of ordinary skill in the art to which this application pertains. The terms "first," "second," and similar terms used in this application specification and claims do not indicate any order, quantity, or importance, but are merely used to distinguish different components. Similarly, the terms "a" or "one," etc., do not indicate a quantity limitation, but rather indicate the presence of at least one. "A plurality" or "several" indicates two or more. Unless otherwise indicated, the terms "front," "rear," "lower," and / or "upper," etc., are for ease of description only and are not limited to a location or spatial orientation. The terms "comprising" or "including," etc., mean that the elements or objects preceding "comprising" or "including" encompass the elements or objects listed following "comprising" or "including" and their equivalents, and do not exclude other elements or objects. The terms "connected," "linked," etc., are not limited to physical or mechanical connections and can include electrical connections, whether direct or indirect.

[0038] The embodiments disclosed herein can be applied to electronic devices such as terminal devices, computer systems, and servers, and can operate together with a wide range of other general-purpose or special-purpose computing system environments or configurations. Examples of well-known terminal devices, computing systems, environments, and / or configurations suitable for use with electronic devices such as terminal devices, computer systems, and servers include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputer systems, mainframe computer systems, and distributed cloud computing environments that include any of the above systems.

[0039] Electronic devices such as terminal devices, computer systems, and servers can be described in the general context of computer system executable instructions (such as program modules) executed by a computer system. Typically, program modules can include routines, programs, object programs, components, logic, data structures, etc., which perform specific tasks or implement specific abstract data types. Computer systems / servers can be implemented in distributed cloud computing environments, where tasks are executed by remote processing devices linked through communication networks. In distributed cloud computing environments, program modules can reside on local or remote computing system storage media, including storage devices.

[0040] Before explaining the display device and modal frame display method provided in this application, the implementation environment of the embodiments of this application will be introduced first.

[0041] See Figure 1 In the interaction scenario between the display device and the control device, the user can operate the display device 200 through the terminal device 300 or the control device 100.

[0042] The display device 200 can take many forms, such as a television, a smart television, a computer, a laser projection device, a monitor, an electronic bulletin board, an electronic table, etc.

[0043] In some embodiments, the control device 100 may be a remote control. Communication between the remote control and the display device includes infrared protocol communication, Bluetooth protocol communication, and other short-range communication methods, controlling the display device 200 wirelessly or via wired means. Users can input user commands through buttons on the remote control, voice input, control panel input, etc., to control the display device 200.

[0044] In some embodiments, a terminal device 300 (such as a mobile terminal, tablet computer, computer, laptop computer, etc.) may be used to control the display device 200. For example, an application running on the terminal device 300 may be used to control the display device 200.

[0045] In some embodiments, the display device 200 may also be controlled by the user via touch or gestures.

[0046] In some embodiments, the display device 200 can also be controlled in ways other than the control device 100 and the terminal device 300. For example, it can be controlled by directly receiving the user's voice commands through a module configured inside the display device 200 for acquiring voice commands, or it can be controlled by receiving the user's voice commands through a voice control device set outside the display device 200.

[0047] In some embodiments, the display device 200 can also communicate with the server 400. The display device 200 can communicate via a local area network (LAN), wireless local area network (WLAN), or other networks. The server 400 can provide the display device 200 with various display and interactive content.

[0048] As an example, server 400 can be a standalone server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms.

[0049] Based on the above embodiments, Figure 2 A hardware configuration block diagram of the display device 200 described above is shown. The display device 200 includes at least one of the following: a tuner 210, a communicator 220, a detector 230, an external device interface 240, a controller 250, a display 260, an audio output interface 270, a memory 280, a power supply, and a user interface.

[0050] In some embodiments, the tuner 210 receives broadcast television signals via wired or wireless reception and demodulates audio and video signals from multiple wireless or wired broadcast television signals. For example, Electronic Program Guide (EPG) data signals.

[0051] In some embodiments, the communicator 220 is a component for communicating with external devices or the server 400 according to various communication protocol types. For example, the communicator may include at least one of a Wi-Fi module, a Bluetooth module, a wired Ethernet module, other network communication protocol chips or near-field communication protocol chips, and an infrared receiver.

[0052] Specifically, the display device 200 can establish the transmission and reception of control signals and data signals with the external control device 100 or the server 400 through the communicator 220.

[0053] In some embodiments, detector 230 is used to acquire signals from the external environment or to interact with the outside world. For example, detector 230 includes a light receiver, a sensor for acquiring ambient light intensity; or, detector 230 includes an image acquisition device, such as a camera, which can be used to acquire external environmental scenes, user attributes, or user interaction gestures; or, detector 230 includes a sound acquisition device, such as a microphone, for receiving external sounds.

[0054] In some embodiments, the external device interface 240 may include, but is not limited to, one or more of the following: High Definition Multimedia Interface (HDMI), analog or high-definition component input interface (component), Composite Video Broadcast Signal (CVBS), Universal Serial Bus (USB) input interface, RGB port, etc. It may also be a composite input / output interface formed by multiple of the above interfaces.

[0055] In some embodiments, the controller 250 includes at least one of a central processing unit (CPU), a video processor, an audio processor, a graphics processing unit (GPU), a RAM (RandomAccess Memory), a ROM (Read-Only Memory), a first to an nth interface for input / output, a communication bus, etc.

[0056] In practice, the controller 250 controls the operation of the display device 200 and responds to user operations through various software control programs stored in the memory 280. The controller 250 controls the overall operation of the display device 200. For example, in response to receiving a user command to select a UI object to display on the monitor 260, the controller 250 can execute operations related to the object selected by the user command.

[0057] It should be noted that the controller 250 and the tuner 210 can be located in different separate devices. That is, the tuner 210 can also be located in an external device of the main device where the controller 250 is located, such as an external set-top box.

[0058] In some embodiments, the display 260 includes a display screen component for presenting images, a driving component for driving image display, a component for receiving image signals output by the controller 250, and a user control UI interface for displaying video content, image content, menu control interface, and user control UI interface.

[0059] As an example, the display 260 may be a liquid crystal display, an OLED display, or a projection display, and may also be a projection device and a projection screen.

[0060] Users can input commands through a graphical user interface (GUI) displayed on the monitor 260, and the user input interface receives the user input commands through the graphical user interface (GUI). Alternatively, users can input commands by entering specific sounds or gestures, and the user interface receives the user input commands by recognizing the sounds or gestures through sensors.

[0061] The "user interface" is the medium through which an application or operating system interacts and exchanges information with the user. It converts the internal form of information into a form that the user can accept. For example, a user interface can be an icon, window, control, or other interface element displayed on the screen of a display device 200. Controls can include visual interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.

[0062] Figure 3 The following diagram illustrates the software configuration of a display device according to some embodiments of this application; such as Figure 3 In some embodiments, the system is divided into four layers, from top to bottom: the Applications layer (referred to as the "Application Layer"), the Application Framework layer (referred to as the "Framework Layer"), the System Library layer (referred to as the "System Runtime Library Layer"), and the Kernel layer.

[0063] In some embodiments, at least one application runs in the application layer. These applications may be Windows programs, system settings programs, or clock programs that come with the operating system; they may also be third-party applications developed by third-party developers. In specific implementations, the application packages in the application layer are not limited to the examples above.

[0064] The framework layer provides application programming interfaces (APIs) and a programming framework for applications. The application framework layer includes predefined functions. It acts as a central processing unit, determining the actions taken by applications within the application layer. Through the API, applications can access system resources and obtain system services during execution.

[0065] like Figure 3 As shown, the application framework layer in this embodiment includes managers, content providers, etc., wherein the managers include at least one of the following modules: ActivityManager, which interacts with all activities running in the system; LocationManager, which provides access to system location services for system services or applications; PackageManager, which retrieves various information related to applications currently installed on the device; NotificationManager, which controls the display and clearing of notification messages; and WindowManager, which manages user interface elements including icons, windows, toolbars, wallpapers, and desktop widgets.

[0066] In some embodiments, the system runtime layer provides support for the upper layer, namely the framework layer. When the framework layer is used, the Microsoft Windows operating system and the Android operating system will run the libraries contained in the system runtime layer to implement the functions that the framework layer needs to achieve.

[0067] In one feasible design, multiple components can be set up in the software framework of the display device, and the modal frame can be displayed in full screen on the display device through the interaction between the multiple components.

[0068] To clarify the solution of this application, the technology of existing display modal frames will be introduced below.

[0069] When users browse a webpage of a specific network element through a display device, they sometimes want the display device to interact with other network elements. For example, while browsing a webpage of a learning network element, a user might want the electronic device to display the webpage of a points mall network element, allowing them to redeem points accumulated in the learning network element for goods offered by the points mall network element. To meet this user need, electronic devices can currently display modal frames of other network elements based on received user actions while displaying the webpage of a specific network element.

[0070] However, current display devices typically only display the modal frame in a small window within a localized area of ​​the display page.

[0071] In one example, referring to Figure 4(a), the page displays the webpage of the first network element. After receiving the operation to display the list service of the second network element, the page displayed by the display device can be as shown in Figure 4(b). The right side of Figure 4(b) displays the list service of the second network element. After receiving the operation for the list service, the page displayed by the display device can be as shown in Figure 4(c). The partial area of ​​Figure 4(c) displays the modal frame of the second network element.

[0072] In other words, in the existing technology, the modal box is only displayed in a local area of ​​the display page, and the displayed window is small, which makes it inconvenient for users to operate the modal box and results in a poor user experience.

[0073] In view of this, embodiments of this application propose a display device and a modal frame display method to achieve full-screen display of the modal frame, which facilitates user operation of the modal frame and improves user experience.

[0074] Next, the technical solutions of the embodiments of this application, and how the technical solutions of the embodiments of this application solve the above-mentioned technical problems, will be described in detail with reference to the accompanying drawings. The embodiments shown below can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments.

[0075] In one exemplary embodiment, a display device is provided, comprising a display and a controller. The display is configured to display pages and modal frames of different network elements, and the controller includes a first set of components for a first network element and a second set of components for a second network element. See also Figure 5 The flowchart shown illustrates that the controller is configured as follows:

[0076] Step 510: When the webpage of the first network element is displayed on the monitor, in response to the first redirection operation, the first component set interacts with the second component set based on the first redirection operation to make the monitor display the list of services of the second network element.

[0077] The first redirection operation instructs the display to switch to showing the list of services of the second network element. Upon receiving the first redirection operation, the first and second component sets within the controller interact, causing the display to show the list of services of the second network element.

[0078] The first network element and the second network element are different network elements. In one example, the first network element could be a school network element, and the second network element could be a points mall network element, etc. Of course, the first network element and the second network element can also be other network elements, and this application does not limit them.

[0079] Step 520: After receiving the first trigger operation for the list business, the second component set interacts with the first component set based on the modal corresponding to the first trigger operation, so that the display shows the modal in full screen.

[0080] The first trigger operation is used to instruct the display to show the modal frame. After receiving the first trigger operation, the second component set interacts with the first component set to make the display show the modal frame in full screen, thereby increasing the display size of the modal frame, making it easier for the user to operate the modal frame and improving the user experience.

[0081] In addition, the first component set and the second component set can interact through the postMessage interface. The postMessage interface can be used as an interface for communication between different windows, which can meet the interaction requirements.

[0082] See Figure 6 In one feasible embodiment of this application, the first component set includes: a list iframe container and a modal iframe container; the second component set includes: a list higher-order component, a list business component, a modal higher-order component, and a modal business component.

[0083] Among them, the first network element and the second network element are different network elements. The first network element can achieve cross-network element interaction through iframe and the second network element, and can load list higher-order components and modal higher-order components.

[0084] The list iframe container is an iframe component used to load list services from the second network element. It can interact with the second network element via postMessage to perform the following actions:

[0085] It also performs data transmission with the second network element, creates a modal iframe container to load a full-screen modal, and shows, hides, and destroys the full-screen modal; provides message prompts; handles route redirection; and changes link address parameters.

[0086] The list higher-order component is a higher-order component that includes the list content component of the second network element. It communicates with the list iframe container module in the parent window via postMessage, and can extend the following capabilities to each business component that uses this higher-order component:

[0087] Create a full-screen modal in the parent window and listen for its events (modal show event, modal hide event, modal destroy event, modal confirm event, modal cancel event, and other custom events). Use modal methods to show, hide, destroy, and pass data to the modal. Enable route navigation in the parent window; change the link address parameters in the parent window; and display message prompts in the parent window.

[0088] The list service component is the list display service component of the second network element. After being extended by the higher-order list component, it can interact with the parent window through method calls.

[0089] The modal iframe container allows the first network element to load the full-screen modal of the second network element, thus solving the problem of the second network element's modal not being able to be displayed in full-screen mode.

[0090] The modal higher-order component is a higher-order component of the second network element modal component. It communicates with the list iframe container in the parent window through postMessage. It extends the following capabilities to each business component that uses this higher-order component: modal confirmation method, modal cancellation method, message prompting method in the parent window, action method, and message passing of other custom events for the modal.

[0091] The modal service component is the modal service component of the second network element. After being extended by the modal higher-order component, it can interact with the parent window by calling methods.

[0092] In some of these embodiments, such as Figure 7 As shown, the first component set includes a list iframe container, and the second component set includes a list higher-order component and a list service component. The first component set interacts with the second component set based on the first jump operation to display the list service of the second network element on the display, including:

[0093] Step 11: After receiving the first jump operation, the list iframe container determines the iframe data corresponding to the first jump operation and transmits the iframe data to the list higher-order component.

[0094] The iframe data includes the addresses of the list services of the second network element.

[0095] Based on this first jump operation, the controller can determine the address of the list service of the second network element that needs to be displayed and transmit the address to the list iframe container. The list iframe container will extract the address of the list service of the second network element and load it to obtain iframe data, and transmit the iframe data to the list higher-order component.

[0096] In addition, during this step, the list iframe container can transmit iframe data to the list higher-order component via postMessage, enabling cross-network element interaction.

[0097] Step 12: The list iframe container and the list higher-order component can listen for cross-network element messages between each other for their respective windows.

[0098] For example, you can use `window.addEventListener('message', this.handleMessage)` to listen for messages and then use `postMessage()` to pass messages in the subsequent process.

[0099] Step 13: The list higher-order component loads the corresponding list business component based on the iframe data.

[0100] Before the list business component is loaded, some capabilities can be extended by the list's higher-order components, such as the ability to interact with the parent window.

[0101] Step 14: The list service component determines the list service corresponding to the address and controls the display to show the list service of the second network element.

[0102] By performing steps 11 to 14, the display can show a list of the second network element services.

[0103] Furthermore, when the display shows the list of services of the second network element, sometimes the user needs the display to jump to the page showing the first network element. To achieve this, see another exemplary embodiment of this application, see... Figure 8 It also includes the following steps:

[0104] Step 15: When the display shows the list of services of the second network element, if a second jump operation is received, the list service component transmits the link address corresponding to the second jump operation to the list higher-order component. The second jump operation is used to instruct the display to jump to the parent window of the list service.

[0105] In this context, the parent window of the list service is the window above it, such as the page of the first network element. In this step, the list service component can pass the link address corresponding to the second redirect operation to the higher-order list component by calling the `go(url)` method.

[0106] Step 16: The list's higher-order component transmits the link address to the list's iframe container.

[0107] In this step, the list's higher-order component can notify the parent window's corresponding list iframe container of the link address by calling parent.postMessage({msgType,data}).

[0108] Step 17: The list iframe container executes jump logic based on the link address to make the display show the parent window.

[0109] When the list iframe container receives a message from the list's higher-order component, if it determines that the message type is a jump, it can execute the jump logic, thereby causing the display to jump to the parent window.

[0110] Through steps 15 to 17, the display can be redirected from the list service display page of the second network element back to the display page of the first network element.

[0111] Furthermore, during the display of list services, it is sometimes necessary to provide notifications for the list services, such as when a modification, deletion, or addition operation is received for a specific list service, a corresponding notification is required. To achieve this purpose, see another exemplary embodiment of this application, see... Figure 9 It also includes the following steps:

[0112] Step 18: When the list of services of the second network element is displayed on the monitor, if it is necessary to prompt the message of the list service, the list service component calls the message transmission method of the higher-order component of the list. The message transmission method includes the content and type of the message.

[0113] In this step, the list business component can call the message(config) method of the list higher-order component.

[0114] Step 19: The list higher-order component transmits the content and type of the message to the list iframe container.

[0115] In this step, the list's higher-order component can transmit the content and type of the message to the list's iframe container via parent.postMessage({msgType,data}).

[0116] Step 20: After determining that the message type is a notification, the list iframe container controls the display to show the message content, thereby realizing the notification.

[0117] By performing steps 18 to 20, message prompts can be displayed for the list services of the second network element.

[0118] During the display of a list service, it is sometimes necessary to update the address. For example, sometimes it may be necessary to query the content of the list service. In this case, the address of the list service is updated to the address corresponding to the content to be queried. After the address is updated, in order to ensure that the display can still show the content corresponding to the updated address after the page is refreshed, the address needs to be updated again. To achieve this purpose, see another exemplary embodiment of this application. Figure 10 It also includes the following steps:

[0119] Step 21: When the list of services of the second network element is displayed on the monitor, if the address corresponding to the list service is updated, the list service component calls the update method of the higher-order component of the list. The parameters of the update method include the updated address.

[0120] In this step, the list business component can call the updateQuery(config) method.

[0121] Step 22: The list higher-order component transmits the updated address to the list iframe container.

[0122] In this step, the list's higher-order component can transmit the updated address to the list's iframe container via parent.postMessage({msgType,data}).

[0123] Step 23: The list iframe container updates the addresses that need to be updated to the links corresponding to the currently displayed page.

[0124] When the list iframe container receives a message from the list's higher-order component, if it determines that the message type is an update address, it can update the iframeSrc link in the current url parameter with the address that needs to be updated.

[0125] By performing steps 15 to 17, the screen can still display the content the user needs after the page is refreshed.

[0126] In some of these embodiments, such as Figure 11As shown, the first component set includes a list iframe container and a modal iframe container, and the second component set includes a list higher-order component, a list business component, a modal higher-order component, and a modal business component. The second component set interacts with the first component set based on the modal to be displayed corresponding to the first trigger operation, so that the display shows the modal in full-screen mode, including:

[0127] Step 31: After receiving the first trigger operation for the list business, the list business component calls the modal creation method of the list higher-order component and returns a modal instance. The parameters of the modal creation method include the address of the modal to be created.

[0128] Furthermore, the parameters of this modal creation method may also include the size of the modal. In this case, in order to achieve full-screen display of the modal, the size of the modal can be the same as the size of the display page of the monitor.

[0129] In this step, the list business component can call the `creatModal(config)` method of the list higher-order component, which returns a modal instance. It can listen to the `onShow(callback)`, `onHide(callback)`, `onOk(callback)`, `onCancel(callback)`, `onAction(callback)`, and `onAction(callback)` events of the modal instance to perform corresponding business operations. It can also call the modal instance's `hide(config)` and `show(config)` methods to show or hide the modal, and `destroy(config)` to destroy the modal.

[0130] Step 32: The list higher-order component transmits the first message to the list iframe container, based on the modal instance, to display the modal in full-screen mode.

[0131] Among them, the list higher-order component can notify the list iframe container to display a modal in full-screen mode via parent.postMessage({msgType,data}). The loading address of the full-screen modal points to a modal component of the points mall.

[0132] Step 33: Based on the first message, create a full-screen modal iframe container for the list iframe container.

[0133] After receiving the first message, if the iframe container determines that the message type is "open full-screen modal", it first creates a modal iframe container for full-screen display of the modal and then concatenates the src of the iframe according to the passed parameters.

[0134] Step 34: Load the modal higher-order component into the modal iframe container.

[0135] Step 35: After loading the modal higher-order component, the modal higher-order component and the list iframe can listen for cross-network element messages between them and pass messages.

[0136] The modal higher-order component and the list iframe container listen for cross-network element messages between the two parties using `window.addEventListener('message',this.handleMessage)` and pass messages using `postMessage()`.

[0137] Step 36: Load the modal business component into the modal higher-order component.

[0138] Once the modal business component is loaded, its capabilities can be extended by higher-order modal components, such as the ability to interact with the parent window.

[0139] Step 37: The modal higher-order component transmits the modal display success event to the list iframe container.

[0140] Once the component is loaded, the modal higher-order component can send a modal display success event to the list iframe container via parent.postMessage(config).

[0141] Step 38: The list iframe container transmits a successful modal display event to the list higher-order component.

[0142] In this step, the list iframe container can send a modal display success event to the list higher-order component via postMessage(config).

[0143] Step 39: The list higher-order component triggers the display callback function of the registered modal instance of the list business component.

[0144] The display callback function can be the onShow() listener function of the current modal.

[0145] Step 40: After the list business component calls the display callback function, it controls the display to show the modal box in full-screen mode.

[0146] By performing steps 31 to 40, the display can show the modal frame in full-screen mode.

[0147] Furthermore, when a full-screen modal is displayed on the monitor, it is sometimes necessary to transmit data related to operations on the modal to the list page. For example, if a product in the points mall is redeemed via the modal, the information of the redeemed product needs to be transmitted to the list page so that the product can be added to the list page. To achieve this, see another exemplary embodiment of this application. Figure 12 It also includes the following steps:

[0148] Step 41: After the modal box is displayed in full screen on the monitor, in response to the second trigger operation for the modal box, the modal box business component calls the action method of the modal box higher-order component. The parameters of the action method include the data corresponding to the second trigger operation and the event type of the first event corresponding to the second trigger operation. The first event is the event of transmitting data to the list business.

[0149] In this step, the modal business component calls the action(config) method of the modal higher-order component, with the input parameters being the event type and the parameters to be passed. These parameters may include the data that needs to be transmitted to the list business.

[0150] Step 42: The modal higher-order component transmits data and the event type of the first event to the list iframe container.

[0151] In this step, the modal higher-order component can transmit data and the event type of the first event to the list iframe container via postMessage(config).

[0152] Step 43: The list iframe container transmits data and the event type of the first event to the list higher-order component.

[0153] In this step, the list iframe container can transmit data and the event type of the first event to the list higher-order component via postMessage(config).

[0154] Step 44: The list higher-order component triggers the transmission callback function of the list business component registering the modal instance.

[0155] In this step, the transmission callback function can be the onAction(callBack) callback function of the modal instance.

[0156] Steps 41 to 44 enable the transfer of data manipulated on the modal to the list functionality.

[0157] Furthermore, after the display shows a full-screen modal, the user sometimes needs to hide or destroy the modal. To achieve this, see another exemplary embodiment of this application, see [link to example description]. Figure 13 It also includes the following steps:

[0158] Step 45: After the modal box is displayed in full screen on the monitor, in response to the third trigger operation for the modal box, the modal box business component calls the modal box handling method of the modal box higher-order component. The parameters of the modal box handling method include the event type of the second event corresponding to the third trigger operation. The second event is to process the modal box.

[0159] Specifically, if the third triggering operation is a show / hide operation for the modal, the second event is to show / hide the modal; if the third triggering operation is a destroy operation for the modal, the second event is to destroy the modal.

[0160] Modal dialogs typically include "OK" and "Cancel" controls, allowing users to interact with them as needed. Generally, touching the "OK" control is considered as showing or hiding the modal, while touching the "Cancel" control is considered as canceling the modal.

[0161] In this step, based on the third triggering operation, the modal business component can call the ok(config) or cancel(config) method of the modal higher-order component.

[0162] Step 46: The modal higher-order component transmits the event type of the second event to the list iframe container.

[0163] The modal higher-order component can transmit the event type of the second event to the list iframe container via parent.postMessage(config).

[0164] Step 47: The list iframe container transmits the event type of the second event to the list higher-order component.

[0165] The list iframe container can transmit the event type of the second event to the list's higher-order component via parent.postMessage(config).

[0166] Step 48: Based on the event type of the second event, the list higher-order component triggers the corresponding callback function of the modal instance registered by the list business component.

[0167] Specifically, if the event type of the second event is a show / hide modal, the list business component can register the onOk(callBack) callback function of the modal instance; if the event type of the second event is a hide modal, the list business component can register the onCancel(config) callback function of the modal instance.

[0168] Step 49: After registering the callback function, the list business component processes the corresponding business logic.

[0169] Step 50: After the list business component processes the corresponding business, it notifies the list higher-order component to call the corresponding method of the modal instance according to the event type of the second event.

[0170] Specifically, if the event type of the second event is "hide modal", the list business component can call the `destroy(config)` method of the modal instance. Conversely, if the event type of the second event is "show / hide modal", the list business component can call the `show(config)` or `hide(config)` method of the modal instance.

[0171] Step 51: The list higher-order component transmits processing messages for the modal to the list iframe container based on the corresponding method of the invoked modal instance.

[0172] In this step, the list's higher-order component can transmit processing messages for the modal to the list's iframe container via parent.postMessage(config).

[0173] Step 52: The list iframe container performs the corresponding processing on the modal iframe container according to the processing message.

[0174] This process may include showing or hiding the modal iframe container or destroying the modal iframe container to achieve the showing or hiding of the modal.

[0175] Furthermore, after destroying the modal, the list higher-order component can also destroy the modal instance corresponding to that modal.

[0176] In addition, this application also provides a modal frame display method, which is applied to a display device and includes:

[0177] When the display device displays the webpage of the first network element, in response to the first redirection operation, the first component set of the display device interacts with the second component set of the display device based on the first redirection operation, so that the display device displays the list services of the second network element;

[0178] After receiving a first trigger operation for the list service, the second component set interacts with the first component set based on the modal corresponding to the first trigger operation, so that the display device displays the modal in full screen.

[0179] Based on this modal frame display method, the display device can display the modal frame in full-screen mode, which makes it easier for users to operate the modal frame and improves the user experience.

[0180] The implementation principle and beneficial effects of the modal frame display method provided in the above embodiments can be found in the specific limitations of the various embodiments regarding the controller configuration content in the display device mentioned above, and will not be repeated here.

[0181] In addition, when implementing the above-described modal frame display method, this application also provides a computer-readable storage medium. This computer-readable storage medium may store a computer program, which, when invoked and executed by a controller in a display device or other electronic device, can implement some or all of the steps in the modal frame display method provided in this application.

[0182] The computer-readable storage medium can be a magnetic disk, optical disk, read-only memory, or random access memory, etc.

[0183] It should be understood that the technical solutions in the embodiments of this application can be implemented using software plus necessary general-purpose hardware platforms. Therefore, the technical solutions in the embodiments of this application, in essence or in part that contributes to the prior art, can be embodied in the form of a software product, which can be stored in a computer-readable storage medium.

[0184] In addition to implementing the above-described modal frame display method, this application also provides a computer program product. This computer program product includes a computer program that is invoked and executed by a controller in a display device or other electronic device, and can implement some or all of the steps in the modal frame display method provided in this application.

[0185] The above are merely specific implementations of the embodiments of this application and are not intended to limit the protection scope of the embodiments of this application. Any modifications, equivalent substitutions, improvements, etc., made on the basis of the technical solutions of the embodiments of this application should be included within the protection scope of the embodiments of this application.

Claims

1. A display device, characterized in that, include: The display is configured to show pages and modal frames of different network elements; The controller includes a first component set of a first network element and a second component set of a second network element. The first component set includes a list iframe container and a modal iframe container. The second component set includes a list higher-order component, a list service component, a modal higher-order component, and a modal service component. It is configured as follows: When the display shows the webpage of the first network element, in response to the first redirection operation, the first component set interacts with the second component set based on the first redirection operation and the postMessage interface, so that the display shows the list of services of the second network element; After receiving the first trigger operation for the list service, the list service component calls the modal creation method of the list higher-order component and returns a modal instance. The parameters of the modal creation method include the address and size of the modal to be created, and the size of the modal is the same as the size of the display page of the monitor. The list higher-order component transmits a first message to the list iframe container for displaying the modal in full-screen mode, based on the modal instance. The list iframe container creates the modal iframe container based on the first message; The modal iframe container loads the modal higher-order component, and the modal higher-order component loads the modal business component; The modal higher-order component transmits a modal display success event to the list iframe container; The list iframe container transmits the modal box display success event to the list higher-order component; The list higher-order component triggers the list business component to register the display callback function of the modal instance; After the list service component calls the display callback function, it controls the display to show the modal box in full-screen mode.

2. The display device according to claim 1, characterized in that, The first component set interacts with the second component set based on the first jump operation to enable the display to show a list of services of the second network element, including: After receiving the first redirection operation, the list iframe container determines the iframe data corresponding to the first redirection operation and transmits the iframe data to the list higher-order component. The iframe data includes the address of the list service of the second network element. The higher-order component of the list loads the corresponding list business component based on the iframe data; The list service component determines the list service corresponding to the address and controls the display to show the list service of the second network element.

3. The display device according to claim 2, characterized in that, The controller is also configured to: When the display shows the list services of the second network element, if a second jump operation is received, the list service component transmits the link address corresponding to the second jump operation to the list higher-order component. The second jump operation is used to instruct the display to jump to the parent window of the list service. The list higher-order component transmits the link address to the list iframe container; The list iframe container executes jump logic based on the link address to make the display show the parent window.

4. The display device according to claim 2, characterized in that, The controller is also configured to: When the display shows the list services of the second network element, if it is necessary to prompt the message of the list service, the list service component calls the message transmission method of the list higher-order component, and the message transmission method includes the content and type of the message; The higher-order component of the list transmits the content and type of the message to the list iframe container; After determining that the message type is a notification, the list iframe container controls the display to show the content of the message.

5. The display device according to claim 2, characterized in that, The controller is also configured to: When the display shows the list of services of the second network element, if the address corresponding to the list service is updated, the list service component calls the update method of the list higher-order component, and the parameters of the update method include the updated address; The list higher-order component transmits the updated address to the list iframe container; The iframe container of the list will update the addresses that need to be updated to the links corresponding to the currently displayed page.

6. The display device according to claim 1, characterized in that, The controller is also configured to: After the display shows a full-screen modal, in response to a second trigger operation for the modal, the modal business component calls the action method of the modal higher-order component. The parameters of the action method include the data corresponding to the second trigger operation and the event type of the first event corresponding to the second trigger operation. The first event is an event that transmits the data to the list business. The modal frame higher-order component transmits the data and the event type of the first event to the list iframe container; The list iframe container transmits the data and the event type of the first event to the list higher-order component; The list's higher-order component triggers the list's business component to register the transmission callback function for the modal instance.

7. The display device according to claim 1, characterized in that, The controller is also configured to: After the display shows a full-screen modal, in response to a third trigger operation for the modal, the modal business component calls the modal processing method of the modal higher-order component. The parameters of the modal processing method include the event type of the second event corresponding to the third trigger operation, where the second event is to process the modal. The modal frame higher-order component transmits the event type of the second event to the list iframe container; The list iframe container transmits the event type of the second event to the list higher-order component; Based on the event type of the second event, the higher-order component of the list triggers the list business component to register the corresponding callback function of the modal instance; After registering the callback function, the list business component processes the corresponding business logic. After the list business component processes the corresponding business, it notifies the list higher-order component to call the corresponding method of the modal instance according to the event type of the second event; The list higher-order component transmits processing messages for the modal to the list iframe container based on the corresponding method of the invoked modal instance; The list iframe container performs corresponding processing on the modal iframe container according to the processing message.

8. The display device according to claim 7, characterized in that, If the third triggering operation is a show / hide operation on the modal box, the second event is to show / hide the modal box; If the third triggering operation is a destruction operation for the modal frame, the second event is to destroy the modal frame.

9. A modal frame display method, characterized in that, Applied to display devices, including: When the display device displays the webpage of the first network element, in response to the first redirection operation, the first component set of the display device interacts with the second component set of the display device based on the first redirection operation and the postMessage interface, so that the display device displays the list service of the second network element. The first component set includes: a list iframe container and a modal iframe container, and the second component set includes: a list higher-order component, a list service component, a modal higher-order component, and a modal service component. After receiving the first trigger operation for the list service, the list service component calls the modal creation method of the list higher-order component and returns a modal instance. The parameters of the modal creation method include the address and size of the modal to be created. The size of the modal is the same as the size of the display page of the monitor. The list higher-order component transmits a first message to the list iframe container for displaying the modal in full-screen mode, based on the modal instance. The list iframe container creates the modal iframe container based on the first message; The modal iframe container loads the modal higher-order component, and the modal higher-order component loads the modal business component; The modal higher-order component transmits a modal display success event to the list iframe container; The list iframe container transmits the modal box display success event to the list higher-order component; The list higher-order component triggers the list business component to register the display callback function of the modal instance; After the list service component calls the display callback function, it controls the display to show the modal box in full-screen mode.

Images