Method and system for dragging iframe elements in web pages

Abstract

The embodiment of the present application discloses a method for dragging an iframe element in a web page, comprising: obtaining an iframe element in a target web page, wherein a target block-level element is configured on a partial area within the frame of the iframe element; in response to a press event on the target block-level element, expanding the size of the target block-level element; in response to a drag event following the press event, dragging the iframe element to move the iframe element from a first position on the target web page to a second position on the target web page. The embodiment of the present application discloses a system for dragging an iframe element in a web page, a computer device, and a computer storage medium. The technical solution provided by the embodiment of the present application can ensure that the iframe element does not stop moving unexpectedly.

Description

Technical Field

[0001] The present application relates to web page processing technology, and in particular to a method, system, computer device and computer-readable storage medium for dragging iframe elements within a web page. Background Art

[0002] Element dragging is a common means of interacting with users in web applications, that is, changing the position of an element in a web page through operations such as mouse or touch screen touch, thereby achieving element dragging in the web page.

[0003] The iframe element is a type of web page element. Its special feature is that the iframe element and the web page are relatively independent. The web page cannot capture the dragging operation within the iframe element, so the iframe element cannot be dragged from the first position of the web page to another position of the web page. Even when dragging, especially when the dragging speed is fast, it is easy to stop dragging accidentally, that is, the iframe element is easy to be accidentally interrupted when being dragged. Summary of the invention

[0004] The purpose of the embodiments of the present application is to provide a method, system, computer device and computer-readable storage medium for dragging iframe elements in a web page to solve the above-mentioned problems.

[0005] One aspect of an embodiment of the present application provides a method for dragging an iframe element in a web page, comprising:

[0006] Obtaining an iframe element in a target webpage, wherein a target block-level element is configured on a partial area within a frame of the iframe element;

[0007] In response to a press event on the target block-level element, expanding the size of the target block-level element;

[0008] In response to a drag event following the press event, a drag operation is performed on the iframe element to move the iframe element from a first position of the target webpage to a second position of the target webpage.

[0009] Optionally, also include:

[0010] In response to a release event following the drag event, the target block-level element is restored to an initial size.

[0011] Optionally, the frame of the iframe element includes a document;

[0012] The target block-level element covers the title of the document; wherein, the initial size of the target block-level element is adapted to the size of the title, and the target block-level element of the initial size does not cover the interactive controls of the document.

[0013] Optionally, obtaining the iframe element in the target webpage includes:

[0014] Obtaining iframe configuration information provided by the server, wherein the iframe configuration information includes iframe container configuration information, iframe element configuration information, and document information, wherein the document information includes the position of the title in the iframe container;

[0015] According to the iframe container configuration information, configuring an iframe container on the target web page;

[0016] According to the iframe element configuration information, configuring the iframe element in the iframe container;

[0017] Generate the document in the frame created by the iframe element according to the document information;

[0018] According to the position of the title in the iframe container, configure the target block-level element;

[0019] The display attribute of the target block-level element is transparent, and the target block-level element belongs to the target webpage.

[0020] Optionally, also include:

[0021] When the title of the document scrolls out of the frame of the iframe element, the target block-level element is set to be hidden.

[0022] Optionally, in response to a press event on the target block-level element, expanding the size of the target block-level element includes:

[0023] The target block-level element is enlarged from an initial size to a target size; wherein the target size is the same as the frame size of the iframe element, and the target block-level element of the target size is opposite to the frame of the iframe element.

[0024] Optionally, in response to a press event on the target block-level element, expanding the size of the target block-level element includes:

[0025] Expanding the target block-level element from an initial size to a target size;

[0026] The upper area of ​​the target block-level element of the target size partially extends out of the frame of the iframe element.

[0027] One aspect of an embodiment of the present application provides a system for dragging an iframe element in a web page, including:

[0028] An acquisition module is used to acquire an iframe element in a target web page, wherein a target block-level element is configured on a partial area within a frame of the iframe element;

[0029] A first response module, configured to expand the size of the target block-level element in response to a press event on the target block-level element;

[0030] The second response module is used to perform a drag operation on the iframe element in response to a drag event following the press event, so as to move the iframe element from a first position of the target webpage to a second position of the target webpage.

[0031] One aspect of an embodiment of the present application further provides a method for dragging an iframe element in a web page, comprising:

[0032] Displaying the live video screen of the target live broadcast room on the target webpage;

[0033] Receiving interactive panel information provided by the target live broadcast room during the live broadcast process;

[0034] According to the interactive panel information, display the interactive panel in the target webpage; wherein the interactive panel is configured in a frame of an iframe element, and a target block-level element is configured on a partial area of ​​the interactive panel;

[0035] In response to a press event on the target block-level element, expanding the size of the target block-level element;

[0036] In response to a drag event following the press event, the iframe element is dragged so that the interactive panel moves along with the iframe element from a first position of the target webpage to a second position of the target webpage.

[0037] One aspect of an embodiment of the present application provides a computer device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the steps of the method for dragging an iframe element within the above-mentioned web page are implemented.

[0038] One aspect of an embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored. The computer program can be executed by at least one processor so that the at least one processor implements the steps of the method for dragging an iframe element within the above-mentioned web page.

[0039] The iframe element dragging method, system, computer device and computer-readable storage medium provided in the embodiments of the present application may include the following technical effects: by loading the target block-level element on a partial area of ​​the frame of the iframe element, the target web page can capture the dragging operation on the iframe element, and enlarge the size of the target block-level element at the start of dragging, so that during the dragging process, even if the dragging speed is high, it can be ensured that the target block-level element will not be separated from the mouse or finger used for dragging, thereby ensuring that the iframe element will not stop moving unexpectedly, that is, ensuring that the iframe element will not be accidentally interrupted when being dragged, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 A diagram schematically shows an application environment of the method for dragging an iframe element in a web page according to the first embodiment of the present application;

[0041] Figure 2 A flowchart of a method for dragging an iframe element in a web page according to Embodiment 1 of the present application is schematically shown;

[0042] Figure 3 Another flow chart of the method for dragging an iframe element in a web page according to the first embodiment of the present application is schematically shown;

[0043] Figure 4 Schematically shows Figure 2 or Figure 3 Sub-flow chart of step S200;

[0044] Figure 5 A hierarchical diagram schematically shows a target web page, an iframe container, an iframe element, and a target block-level element;

[0045] Figure 6 A diagram schematically shows the newly added steps of the method for dragging an iframe element in a web page according to the first embodiment of the present application;

[0046] Figure 7 Schematically shows Figure 2 or Figure 3 Sub-flow chart of step S202;

[0047] Figure 8 A schematic diagram showing the size change comparison of the target block-level element;

[0048] Fig. 9 Schematically shows Figure 2 or Figure 3 Another sub-flow chart of step S202;

[0049] Fig.10 A diagram schematically shows an application environment of a method for dragging an iframe element in a web page according to Embodiment 2 of the present application;

[0050] Fig.11 A flowchart of a method for dragging an iframe element in a web page according to the second embodiment of the present application is schematically shown;

[0051] Fig.12 An interactive panel is schematically shown;

[0052] Fig.13 A block diagram of a system for dragging an iframe element in a web page according to a third embodiment of the present application is schematically shown;

[0053] Fig.14 A block diagram of a system for dragging an iframe element in a web page according to a fourth embodiment of the present application is schematically shown;

[0054] Fig.15 The hardware architecture diagram of a computer device suitable for implementing a method for dragging an iframe element within a web page according to Embodiment 5 of the present application is schematically shown. DETAILED DESCRIPTION

[0055] In order to make the purpose, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.

[0056] It should be noted that the descriptions involving "first", "second", etc. in the embodiments of the present application are only for descriptive purposes and cannot be understood as indicating or suggesting their relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various application embodiments can be combined with each other, but they must be based on the ability of ordinary technicians in the field to implement them. When the combination of technical solutions is contradictory or cannot be implemented, it should be deemed that such combination of technical solutions does not exist and is not within the scope of protection required by this application.

[0057] The following is an explanation of the terms used in this application:

[0058] Block-level elements: Most elements in HTML (Hyper Text Markup Language) are "block-level" elements or inline elements. Block-level elements occupy the entire horizontal space of their parent element (container), and the vertical space is equal to the height of their content. The following is a list of block-level elements involved in HTML: <address>Contact information, <article>, Article content, <aside>Accompanying content, <blockquote>Blockquote, Definition list defines the entry description, Document partitioning, Definition list, <fieldset>Grouping of form elements, <figcaption>Title of the picture and text information group, <figure>Graphic information group, <footer>End of section or page, <form>Forms, <h1>< / h1> <h2>< / h2> <h3>< / h3> <h4>< / h4> <h5>< / h5> <h6>Heading levels 1-6, <header>Section header or page header, <hgroup>Title Group, <hr> Horizontal dividing line, Ordered list, OK, <pre>Preformatted text, <section>A page section, Unordered list.

[0059] The iframe (inline frame) element represents a nested browsing context and is used to embed another HTML page into the current page. The iframe element creates an inline frame (i.e., an inline frame) that contains another document.

[0060] The iframe element itself has no dragging method, and the mouse events generated in the iframe element cannot be captured in the current web page. The method to implement dragging can be to add a block-level element to the iframe element, add a mouse event mousedown (mouse down) to the iframe element, and generate a mouse event mousemove (mouse move) during dragging. The mouse position changes according to the mouse event mousemove, and the position of the iframe element is modified accordingly; when the mouse event mouseout (mouse leaves) / mouseeleave (mouse moves out) / mouseup (mouse releases) occurs, it means stopping dragging and stopping the change of the iframe element position. This mouse event also refers to a touch event.

[0061] However, when the mouse moves quickly, the mouse event mousemove occurs multiple times, and accordingly, the event processing function is called multiple times, causing delays. After the delay, the iframe element cannot keep up with the mouse movement speed, which may cause the mouse to move out of the iframe element, thereby triggering the mouse event mouseout, causing the iframe element to stop moving unexpectedly, that is, causing the iframe element to be unexpectedly interrupted when moving.

[0062] In view of this, the embodiment of the present application provides a solution for dragging iframe elements in a web page, which adds a block-level element to the current web page to cover the iframe element as a dragging area; when dragging, the draggable area is enlarged to prevent the mouse from moving out of the dragging area and causing the dragging to stop; when the dragging stops, the dragging area is returned to its original size to avoid affecting other user operable areas. The above solution optimizes the dragging of iframe elements in web pages.

[0063] The following will introduce a solution for dragging iframe elements in a web page through multiple embodiments.

[0064] In the description of the present application, it should be understood that the numerical labels before the steps do not indicate the order in which the steps are executed, but are only used to facilitate the description of the present application and to distinguish each step, and therefore should not be understood as a limitation on the present application.

[0065] Embodiment 1

[0066] Figure 1 The following is a schematic diagram of an environmental application according to the first embodiment of the present application.

[0067] Computer device 10000 may be a terminal device such as a smart phone, a tablet device, a PC (personal computer), etc. Computer device 10000 may be equipped with a browser for retrieving, displaying, and transmitting Web information. Web information resources are marked by a Uniform Resource Identifier (URI). Web information may include / be web pages, pictures, videos, or any other content presented on the Web. Users can browse interrelated information through a browser with the help of hyperlinks.

[0068] Wherein, the web page is composed of multiple elements, which can be described by HTML tags and parsed and displayed by the browser. In order to expand the content, an iframe element can be built in, and other documents (web pages) can be built in a nested manner.

[0069] Figure 2 The flowchart of the method for dragging an iframe element in a web page according to the first embodiment of the present application is schematically shown. Figure 2 As shown, the method for dragging an iframe element in a web page may include steps S200 to S204, wherein:

[0070] Step S200, obtaining an iframe element in a target web page, wherein a target block-level element is configured on a partial area within a frame of the iframe element.

[0071] The iframe element is used to create a frame (inline frame) to embed another document (such as web page B) into the target web page A. Relative to the target web page A, the iframe element loads a relatively independent web page B, so a special event handler needs to be registered for the web page B to monitor and respond to operations on the web page B. However, this will result in: when the iframe element is dragged, the dragging operation acts on the area where the iframe element is located. The iframe element monitors the dragging action through a special event handler and generates a mouse event. However, since the mouse event is generated in the iframe element, it cannot be captured by the target web page A.

[0072] In view of this, a target block-level element belonging to the target webpage is configured in the frame of the iframe element, and the area where the target block-level element is located is used as the dragging area. Since the target block-level element belongs to the target webpage, when the drag operation acts on the target block-level element, the target webpage can capture the mouse event generated by the drag operation on the target block-level element, thereby realizing the dragging of the iframe element. In an exemplary application, the target block-level element can be a DIV element or other elements.

[0073] As mentioned above, the iframe element is used to create a frame (inline frame) to place another document (such as web page B). The document may also have some controls that interact with the user, so in order not to hinder the use of these controls, the target block-level element is configured on a portion of the frame of the iframe element, and dragging and control interaction do not interfere with each other.

[0074] Step S202: In response to a press event on the target block-level element, enlarging the size of the target block-level element.

[0075] In actual operation:

[0076] ① Listening for a drag operation on the target block-level element. The drag operation may be implemented by user control or machine control. The drag operation may be implemented by a mouse, touch screen, touch pad or other sensing element. The drag operation may include a continuous press operation, a sliding operation and a release operation. Wherein:

[0077] The pressing operation may generate a pressing event (mousedown).

[0078] The sliding operation refers to sliding with the position of the pressing operation as the starting point when the pressing operation is not lifted. In this embodiment, the sliding operation can generate a drag event (mousemove).

[0079] The release operation refers to releasing the sliding operation at the end point of the sliding operation. There are many forms of release, such as lifting or releasing the mouse on the touch screen, moving the mouse or finger out of the boundary of the target web page, etc. In this embodiment, the release operation can generate a release event (mouseout / mouse eave / mouseup).

[0080] ② If a press event triggered by the dragging operation is monitored, the size of the target block-level element is temporarily enlarged.

[0081] Enlarge the size of the target block-level element, that is, enlarge the size of the drag area.

[0082] The enlarged target block-level element can prevent the iframe element from moving slower than the sliding speed of the dragging operation (such as the speed of the mouse), causing the mouse or finger to be separated from the iframe element, thereby ensuring that the iframe element does not stop moving unexpectedly, that is, ensuring that the iframe element does not stop moving unexpectedly.

[0083] Step S204: in response to a drag event following the press event, performing a drag operation on the iframe element to move the iframe element from a first position of the target webpage to a second position of the target webpage.

[0084] According to the drag event, the iframe element is controlled to move along the sliding track of the drag operation. Specifically, the current position of the drag operation (such as the mouse position) is monitored in real time, and the position of the iframe element is adjusted in real time accordingly.

[0085] The method for dragging an iframe element in a web page described in an embodiment of the present application loads a target block-level element on a partial area of ​​the frame of the iframe element, so that the target web page can capture the dragging operation on the iframe element, and enlarges the size of the target block-level element at the start of dragging, so that during the dragging process, even if the dragging speed is high, it can be ensured that the target block-level element will not be separated from the mouse or finger used for dragging, thereby ensuring that the iframe element will not stop moving accidentally, that is, ensuring that the iframe element will not be accidentally interrupted when being dragged.

[0086] Several optional embodiments are provided below to further optimize the dragging experience of the iframe element.

[0087] As an optional embodiment, Figure 3 As shown, the method further includes step S206:

[0088] Step S206: in response to a release event following the drag event, restoring the target block-level element to an initial size.

[0089] Taking the touch screen as an example, when sliding your finger, you may encounter a variety of situations that end the above dragging operation:

[0090] The first case: the finger is automatically lifted before reaching the edge of the touch screen display;

[0091] The second situation: the finger slides in a certain direction until it reaches the edge of the target web page and passively leaves the target web page.

[0092] The third situation: the finger slides in a certain direction until it reaches the edge of the touch screen and is passively released from the touch screen.

[0093] The above exemplary situations can all trigger a release event.

[0094] In response to the release event, the following operations are performed:

[0095] (1) Stop moving, and determine the position where the release event occurs as the end position of the iframe element;

[0096] (2) Restoring the target block-level element to its initial size so as to cover the partial area of ​​the frame of the iframe element.

[0097] In this optional embodiment, the target block-level element is restored to its initial size so that after dragging the position, the user can still directly interact with the document in the frame of the iframe element, such as clicking controls, editing, etc.

[0098] As an optional embodiment, the frame of the iframe element includes a document;

[0099] The target block-level element covers the title of the document; wherein, the initial size of the target block-level element is adapted to the size of the title, and the target block-level element of the initial size does not cover the interactive controls of the document.

[0100] For example, the size (length, width) of the target block-level element is equal to or slightly larger than the size (length, width) of the title and does not cover the interactive controls of the document, so that the target web page can capture the drag operation on the iframe element while ensuring the normal use of the interactive controls within the frame of the user and the iframe element.

[0101] It should be noted that setting the target block-level element above the area where the title is located is an exemplary application. In other embodiments, the target block-level element may also be set above other areas without interactive controls. The area where the target block-level element is set may also be set with a draggable mark to facilitate the user to drag the iframe element.

[0102] As an optional embodiment, the iframe configuration information for obtaining the iframe element may be provided simultaneously with the webpage information of the target webpage, or may be provided at a subsequent time point after the webpage information of the target webpage is provided. Figure 4 As shown, the step S200 "obtaining the iframe element in the target web page" may include steps S400-S408, wherein: step S400, obtaining the iframe configuration information provided by the server, the iframe configuration information including the iframe container configuration information, the iframe element configuration information, and the document information, the document information including the position of the title in the iframe container; step S402, configuring the iframe container on the target web page according to the iframe container configuration information; step S404, configuring the iframe element in the iframe container according to the iframe element configuration information; step S406, generating the document in the frame created by the iframe element according to the document information; step S408, configuring the target block-level element according to the position of the title in the iframe container; wherein the display attribute of the target block-level element is transparent, and the target block-level element belongs to the target web page.

[0103] like Figure 5 As shown, a block-level element is loaded as an iframe container in the target web page, and the iframe element is loaded in the iframe container. The iframe element creates a frame, and then the document is loaded in the frame. Finally, a target block-level element is loaded according to the title position of the document and covers the title. The target block-level element and the iframe container are both elements belonging to the target web page. Therefore, when the drag operation acts on the target block-level element, the target web page can capture various events triggered by the drag operation, and then move the iframe container according to the sliding track of the drag operation. Since the iframe element is loaded in the iframe container, the iframe element will change with the position of the iframe container, that is, the iframe element will move with the iframe container. In this optional embodiment, the iframe element can be effectively dragged through the target block-level element and the iframe container.

[0104] In an exemplary application, the iframe container configuration information may include the height, width, transparency, level of the container and the position of the title of the document in the iframe container (such as the first line centered). The iframe element configuration information may include the height, width, margin, whether to display a scroll bar, level, etc. of the iframe element. The document information may be an HTML file. The frame size of the iframe container may be consistent with that of the iframe element.

[0105] As an optional embodiment, Figure 6 As shown, the method may also include:

[0106] Step S600, when the title of the document scrolls out of the frame of the iframe element, the target block-level element is set to be hidden.

[0107] For example, when the total height of the document is greater than the total height of the iframe, the document can only be partially displayed in the frame of the iframe element. At this time, the scroll bar can be used to control which part of the document is visible. Under normal conditions, the title of the document is placed in the middle of the first row of the frame of the iframe element, and the target block-level element covers the middle of the first row of the frame of the iframe element. Since the target block-level element belongs to the target web page, when the document is scrolled up, the target block-level element will not scroll with it. After scrolling, an interactive control of the document may just scroll to the middle of the first row of the frame of the iframe element. In order to ensure the interaction between the user and the interactive control, the target block-level element is set to hidden. When the target block-level element is hidden, the user can start the interactive control by using a mouse or the like.

[0108] As an optional embodiment, Figure 7 As shown, the step S202 "expanding the size of the target block-level element in response to a press event on the target block-level element" may include: step S700, expanding the target block-level element from an initial size to a target size; wherein the target size is the same as the frame size of the iframe element, and the target block-level element of the target size is opposite to the frame of the iframe element.

[0109] like Figure 8 As shown, the target block-level element can be expanded to be equal to or slightly larger than the frame of the iframe element, thereby effectively preventing the problem of the iframe element and the finger or mouse being separated due to the target block-level element being too small or being dragged quickly. It should be noted that expanding the target block-level element to be equal to or slightly larger than the frame of the iframe element and placing the target block-level element of the target size directly opposite the frame of the iframe element ensures that the iframe element will not be accidentally interrupted during movement, and will not hinder the interaction between other elements in the target web page and the user due to the target block-level element being too large or improperly placed.

[0110] As an optional embodiment, Fig. 9 As shown, the step S202 "in response to a push event on the target block-level element, expanding the size of the target block-level element" may include: step S900, expanding the target block-level element from an initial size to a target size; wherein the upper area of ​​the target block-level element of the target size partially extends out of the frame of the iframe element. In this optional embodiment, by expanding the upper area of ​​the iframe element, the iframe element and the finger or mouse can be prevented from being separated when dragging upward quickly.

[0111] Embodiment 2

[0112] Fig.10 The environmental application diagram according to the second embodiment of the present application is schematically shown.

[0113] In a live broadcast scenario, the host terminal 2 can push the live broadcast data to the viewer terminals (eg, 4A, 4B, ..., 4N) in real time.

[0114] The anchor terminal 2 is used to generate live broadcast data in real time and perform streaming operations on the live broadcast data. The live broadcast data may include audio data or video data. The anchor terminal 2 may be an electronic device such as a smart phone or a tablet computer.

[0115] The audience terminal (e.g., 4A, 4B, ..., 4N) may be configured to receive the live broadcast data of the anchor terminal 2 in real time. The audience terminal (e.g., 4A, 4B, ..., 4N) may be any type of computing device, such as a smart phone, a tablet device, a laptop computer, a smart TV, a vehicle-mounted terminal, etc. The audience terminal (e.g., 4A, 4B, ..., 4N) may have a built-in browser or a special program, and receive the live broadcast data through the browser or the special program to output content to the user. The content may include video, audio, comments, text data and / or the like.

[0116] The audience terminal (e.g., 4A, 4B, ..., 4N) may include a player 8. The player 8 outputs (e.g., displays, presents) content to the user. The content may include video, audio, comments, text data and / or the like. The audience terminal (e.g., 4A, 4B, ..., 4N) may include an interface, which may include an input element (touch screen). For example, the input element may be configured to receive user instructions, which may enable the audience terminal (e.g., 4A, 4B, ..., 4N) to perform various operations, such as turning on or off clearing the screen, etc.

[0117] The anchor terminal 2 and the audience terminals (such as 4A, 4B, ..., 4N) can provide network services through the network 6. As an example. The network 6 may include various network devices, such as routers, switches, multiplexers, hubs, modems, bridges, repeaters, firewalls and / or proxy devices, etc. The network 6 may include physical links, such as coaxial cable links, twisted pair cable links, optical fiber links, combinations thereof, and / or the like. The network 6 may include wireless links, such as cellular links, satellite links, Wi-Fi links, and / or the like.

[0118] The network 6 includes a server. The server can allocate a live broadcast channel (i.e., a live broadcast room) for interaction between the anchor terminal 2 and the audience terminals (e.g., 4A, 4B, ..., 4N), such as push streaming, pull streaming, interaction, etc. Among them, the server, as a live broadcast platform, can be a single server, a server cluster, or a cloud computing service center.

[0119] Next, this application will use the viewer terminal 4A as the execution subject to provide a solution for dragging iframe elements within a web page.

[0120] Fig.11 The flowchart of the method for dragging an iframe element in a web page according to the second embodiment of the present application is schematically shown. Fig.11 As shown, the method for dragging an iframe element in a web page may include steps S1100 to S1108, wherein:

[0121] Step S1100, displaying the live video screen of the target live broadcast room on the target webpage.

[0122] Step S1102, receiving the interactive panel information provided by the target live broadcast room during the live broadcast process.

[0123] Step S1104, displaying an interaction panel in the target web page according to the interaction panel information; wherein the interaction panel is configured in a frame of an iframe element, and a target block-level element is configured on a partial area of ​​the interaction panel.

[0124] Step S1106 , in response to a press event on the target block-level element, enlarging the size of the target block-level element.

[0125] Step S1108, in response to a drag event following the press event, drag the iframe element so that the interactive panel moves along with the iframe element from a first position of the target webpage to a second position of the target webpage.

[0126] As an optional embodiment, the method further includes:

[0127] Step S1110 , in response to a release event following the drag event, restoring the target block-level element to an initial size.

[0128] During the live broadcast, the host will push some interactive panels to increase the atmosphere or specific content.

[0129] The interactive panel is automatically displayed on the target web page, or is displayed on the target web page after being triggered by the user. In order not to interfere with watching the live content, some users have the need to drag the interactive panel displayed on the target web page to other locations.

[0130] In order to display the interactive panel as it is, the interactive panel is embedded in the frame of the iframe element. For the target web page, the interactive panel in the frame of the iframe element is a relatively independent document. In order to enable the target web page to capture the drag operation on the interactive panel, a target block-level element is configured on a partial area of ​​the interactive panel. Since the target block-level element belongs to the target web page, when the drag operation acts on the target block-level element, the target web page can capture the mouse event generated by the drag operation on the target block-level element, so the iframe element can be dragged, and the interactive panel moves accordingly.

[0131] The target block-level element may cover a portion of the interactive panel (such as a title). Fig.12 As shown, the size (length, width) of the target block-level element is equal to or slightly larger than the size (length, width) of the title, and does not cover the interactive controls of the document, so that the target webpage can capture the drag operation on the iframe element while ensuring the normal use of the interactive controls within the frame of the user and the iframe element. It should be noted that the target block-level element is preferably transparent, and the frame lines in the figure are only for easy understanding.

[0132] After the push event triggered by the drag operation is listened to on the target block-level element, the target block-level element is temporarily enlarged. The size of the target block-level element is enlarged, that is, the size of the drag area is enlarged. The enlarged target block-level element can avoid the problem that the movement speed of the iframe element cannot keep up with the sliding speed of the drag operation (such as the speed of the mouse movement), causing the mouse or finger to be separated from the iframe element, thereby ensuring that the iframe element does not stop moving unexpectedly, that is: ensuring that the iframe element and the interactive panel are not accidentally interrupted when moving. In other words, the embodiment of the present application can optimize the dragging experience when dragging a smaller drag area quickly.

[0133] In an optional embodiment, the interactive panel information may include iframe container configuration information, iframe element configuration information, and panel configuration information, wherein the panel configuration information includes the position of the title in the iframe container. Wherein, step S1104 may include: configuring an iframe container on the target web page according to the iframe container configuration information; configuring the iframe element in the iframe container according to the iframe element configuration information; generating the interactive panel in the frame created by the iframe element according to the panel configuration information; configuring the target block-level element according to the position of the title in the iframe container; wherein the display attribute of the target block-level element is transparent, and the target block-level element belongs to the target web page. Load a block-level element as an iframe container in the target web page, load the iframe element in the iframe container, the iframe element creates a frame, and then load the interactive panel in the frame, and finally, load a target block-level element according to the position of the title of the interactive panel and cover the title. The target block-level element and the iframe container are both elements belonging to the target web page. Therefore, when the drag operation acts on the target block-level element, the target web page can capture the various events triggered by the drag operation, and then move the iframe container according to the sliding track of the drag operation. Since the iframe element is loaded in the iframe container, the iframe element will change with the position of the iframe container, that is, the iframe element will move with the iframe container. The interactive panel is embedded in the frame of the iframe element, and the interactive panel also moves accordingly.

[0134] In an optional embodiment, the step S1106 may include:

[0135] The target block-level element is enlarged from an initial size to a target size; wherein the target size is the same as the frame size of the iframe element, and the target block-level element of the target size is opposite to the frame of the iframe element.

[0136] In an optional embodiment, the step S1106 may further include:

[0137] Expanding the target block-level element from an initial size to a target size;

[0138] The upper area of ​​the target block-level element of the target size partially extends out of the frame of the iframe element.

[0139] In an optional embodiment, the method may further include:

[0140] When the title of the interactive panel scrolls out of the frame of the iframe element, the target block-level element is set to be hidden.

[0141] Embodiment 3

[0142] Fig.13 The block diagram of the iframe element dragging system in a web page according to the third embodiment of the present application is schematically shown. The iframe element dragging system in the web page can be divided into one or more program modules, and one or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiment of the present application. The program module referred to in the embodiment of the present application refers to a series of computer program instruction segments that can complete specific functions. The following description will specifically introduce the functions of each program module in this embodiment.

[0143] like Fig.13 As shown, the iframe element dragging system 1300 in the web page may include an acquisition module 1310, a first response module 1320, and a second response module 1330, wherein:

[0144] The acquisition module 1310 is used to acquire an iframe element in a target webpage, wherein a target block-level element is configured on a partial area within a frame of the iframe element;

[0145] A first response module 1320, configured to expand the size of the target block-level element in response to a press event on the target block-level element;

[0146] The second responding module 1330 is configured to, in response to a drag event following the press event, perform a drag operation on the iframe element to move the iframe element from a first position of the target webpage to a second position of the target webpage.

[0147] As an optional embodiment, the system further includes a third response module (not labeled) for:

[0148] In response to a release event following the drag event, the target block-level element is restored to an initial size.

[0149] 3. The method for dragging an iframe element in a web page according to claim 1, characterized in that:

[0150] The frame of the iframe element includes a document;

[0151] The target block-level element covers the title of the document; wherein, the initial size of the target block-level element is adapted to the size of the title, and the target block-level element of the initial size does not cover the interactive controls of the document.

[0152] As an optional embodiment, the acquisition module 1310 is further configured to:

[0153] Obtaining iframe configuration information provided by the server, wherein the iframe configuration information includes iframe container configuration information, iframe element configuration information, and document information, wherein the document information includes the position of the title in the iframe container;

[0154] According to the iframe container configuration information, configuring an iframe container on the target web page;

[0155] According to the iframe element configuration information, configuring the iframe element in the iframe container;

[0156] Generate the document in the frame created by the iframe element according to the document information;

[0157] According to the position of the title in the iframe container, configure the target block-level element;

[0158] The display attribute of the target block-level element is transparent, and the target block-level element belongs to the target webpage.

[0159] As an optional embodiment, the system further includes a setting (not shown) for:

[0160] When the title of the document scrolls out of the frame of the iframe element, the target block-level element is set to be hidden.

[0161] As an optional embodiment, the first response module 1320 is further configured to:

[0162] The target block-level element is enlarged from an initial size to a target size; wherein the target size is the same as the frame size of the iframe element, and the target block-level element of the target size is opposite to the frame of the iframe element.

[0163] As an optional embodiment, the first response module 1320 is further configured to:

[0164] Expanding the target block-level element from an initial size to a target size;

[0165] The upper area of ​​the target block-level element of the target size partially extends out of the frame of the iframe element.

[0166] Embodiment 4

[0167] Fig.14 The block diagram of the iframe element dragging system in a web page according to the fourth embodiment of the present application is schematically shown. The iframe element dragging system in the web page can be divided into one or more program modules, and one or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiment of the present application. The program module referred to in the embodiment of the present application refers to a series of computer program instruction segments that can complete specific functions. The following description will specifically introduce the functions of each program module in this embodiment.

[0168] like Fig.14 As shown, the iframe element dragging system 1400 in the web page may include a first display module 1410, a receiving module 1420, a second display module 1430, a first response module 1440, and a second response module 1450, wherein:

[0169] The first display module 1410 is used to display the live video screen of the target live broadcast room on the target webpage;

[0170] The receiving module 1420 is used to receive the interactive panel information provided by the target live broadcast room during the live broadcast process;

[0171] The second display module 1430 is used to display the interactive panel in the target webpage according to the interactive panel information; wherein the interactive panel is configured in the frame of the iframe element, and a target block-level element is configured on a partial area of ​​the interactive panel;

[0172] A first response module 1440, configured to expand the size of the target block-level element in response to a press event on the target block-level element;

[0173] The second response module 1450 is used to respond to a drag event following the press event by dragging the iframe element so that the interactive panel moves along with the iframe element from the first position of the target webpage to the second position of the target webpage.

[0174] Embodiment 5

[0175] Fig.15 The schematic diagram of the hardware architecture of a computer device suitable for implementing the iframe element dragging method in a web page according to the fifth embodiment of the present application is schematically shown. In this embodiment, the computer device 10000 can also be used as a viewer terminal 4A or a component of the viewer terminal 4A. In this embodiment, the computer device 10000 is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, such as a terminal device such as a smart phone, a tablet computer, a computer, a car terminal, a game console, a virtual device, etc.

[0176] In this embodiment, the computer device 10000 is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions. Fig.15 As shown, the computer device 10000 includes at least but is not limited to: a memory 10010, a processor 10020, and a network interface 10030 that can communicate with each other through a system bus. Among them:

[0177] The memory 10010 includes at least one type of computer-readable storage medium, and the readable storage medium includes a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., an SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the memory 10010 may be an internal storage module of the computer device 10000, such as a hard disk or a memory of the computer device 10000. In other embodiments, the memory 10010 may also be an external storage device of the computer device 10000, such as a plug-in hard disk equipped on the computer device 10000, a smart memory card (Smart Media Card, referred to as SMC), a secure digital (Secure Digital, referred to as SD) card, a flash card, etc. Of course, the memory 10010 may also include both the internal storage module of the computer device 10000 and its external storage device. In this embodiment, the memory 10010 is generally used to store the operating system and various application software installed in the computer device 10000, such as the program code of the iframe element dragging method in the web page, etc. In addition, the memory 10010 can also be used to temporarily store various data that have been output or will be output.

[0178] In some embodiments, the processor 10020 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips. The processor 10020 is generally used to control the overall operation of the computer device 10000, such as performing control and processing related to data interaction or communication with the computer device 10000. In this embodiment, the processor 10020 is used to run the program code stored in the memory 10010 or process data.

[0179] The network interface 10030 may include a wireless network interface or a wired network interface, and the network interface 10030 is generally used to establish a communication link between the computer device 10000 and other computer devices. For example, the network interface 10030 is used to connect the computer device 10000 to an external terminal through a network, and to establish a data transmission channel and a communication link between the computer device 10000 and the external terminal. The network may be a wireless or wired network such as an intranet, the Internet, the Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), 4G network, 5G network, Bluetooth, Wi-Fi, etc.

[0180] It should be pointed out that Fig.15 Only a computer device having components 10010 - 10030 is shown, but it should be understood that implementation of all of the components shown is not a requirement, and more or fewer components may be implemented instead.

[0181] In this embodiment, the iframe element dragging method in the web page stored in the memory 10010 can also be divided into one or more program modules and executed by one or more processors (processor 10020 in this embodiment) to complete the present application.

[0182] Embodiment 6

[0183] This embodiment also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method for dragging an iframe element in a web page in the embodiment are implemented.

[0184] In this embodiment, the computer-readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the computer-readable storage medium can be an internal storage unit of a computer device, such as a hard disk or memory of the computer device. In other embodiments, the computer-readable storage medium can also be an external storage device of a computer device, such as a plug-in hard disk equipped on the computer device, a smart memory card (Smart Media Card, referred to as SMC), a secure digital (Secure Digital, referred to as SD) card, a flash card, etc. Of course, the computer-readable storage medium can also include both the internal storage unit of the computer device and its external storage device. In this embodiment, the computer-readable storage medium is generally used to store the operating system and various application software installed on the computer device, such as the program code of the iframe element dragging method in the web page in the embodiment. In addition, the computer-readable storage medium can also be used to temporarily store various types of data that have been output or are to be output.

[0185] Obviously, those skilled in the art should understand that the modules or steps of the above-mentioned embodiments of the present application can be implemented by a general computing device, they can be concentrated on a single computing device, or distributed on a network composed of multiple computing devices, and optionally, they can be implemented by a program code executable by a computing device, so that they can be stored in a storage device and executed by the computing device, and in some cases, the steps shown or described can be executed in a different order from that herein, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. In this way, the embodiments of the present application are not limited to any specific combination of hardware and software.

[0186] The above are only preferred embodiments of the present application, and are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application. sheet, < / section> < / pre> < / hgroup> < / header> < / h6> < / form> < / footer> < / figure> < / figcaption> < / fieldset> < / blockquote> < / aside> < / article> < / address>

Claims

1. A method for dragging an iframe element in a web page, characterized in that: include: Obtaining an iframe element in a target webpage, wherein a target block-level element is configured on a partial area within a frame of the iframe element; In response to a press event on the target block-level element, expanding the size of the target block-level element; In response to a drag event following the press event, performing a drag operation on the iframe element to move the iframe element from a first position of the target webpage to a second position of the target webpage; Wherein, the frame of the iframe element includes a document; The target block-level element covers the title of the document; wherein the initial size of the target block-level element is adapted to the size of the title, and the target block-level element of the initial size does not cover the interactive controls of the document; The method further comprises: In response to a release event following the drag event, the target block-level element is restored to an initial size.

2. The method for dragging an iframe element in a web page according to claim 1, characterized in that , The step of obtaining the iframe element in the target web page includes: Obtaining iframe configuration information provided by the server, wherein the iframe configuration information includes iframe container configuration information, iframe element configuration information, and document information, wherein the document information includes the position of the title in the iframe container; According to the iframe container configuration information, configuring an iframe container on the target web page; According to the iframe element configuration information, configuring the iframe element in the iframe container; Generate the document in the frame created by the iframe element according to the document information; According to the position of the title in the iframe container, configure the target block-level element; The display attribute of the target block-level element is transparent, and the target block-level element belongs to the target webpage.

3. The method for dragging an iframe element in a web page according to claim 2, characterized in that , also includes: When the title of the document scrolls out of the frame of the iframe element, the target block-level element is set to be hidden.

4. The method for dragging an iframe element in a web page according to any one of claims 1 to 3, characterized in that: In response to a press event on the target block-level element, expanding the size of the target block-level element comprises: The target block-level element is enlarged from an initial size to a target size; wherein the target size is the same as the frame size of the iframe element, and the target block-level element of the target size is opposite to the frame of the iframe element.

5. The method for dragging an iframe element in a web page according to any one of claims 1 to 3, characterized in that: In response to a press event on the target block-level element, expanding the size of the target block-level element comprises: Expanding the target block-level element from an initial size to a target size; The upper area of ​​the target block-level element of the target size partially extends out of the frame of the iframe element.

6. A system for dragging iframe elements in a web page, characterized in that: include: An acquisition module is used to acquire an iframe element in a target web page, wherein a target block-level element is configured on a partial area within a frame of the iframe element; A first response module, configured to expand the size of the target block-level element in response to a press event on the target block-level element; a second response module, configured to, in response to a drag event following the press event, perform a drag operation on the iframe element to move the iframe element from a first position of the target webpage to a second position of the target webpage; Wherein, the frame of the iframe element includes a document; The target block-level element covers the title of the document; wherein the initial size of the target block-level element is adapted to the size of the title, and the target block-level element of the initial size does not cover the interactive controls of the document; The system further comprises: The third response module is used to restore the target block-level element to an initial size in response to a release event following the drag event.

7. A method for dragging an iframe element in a web page, characterized in that: include: Displaying the live video screen of the target live broadcast room on the target webpage; Receiving interactive panel information provided by the target live broadcast room during the live broadcast process; According to the interactive panel information, display the interactive panel in the target webpage; wherein the interactive panel is configured in a frame of an iframe element, and a target block-level element is configured on a partial area of ​​the interactive panel; In response to a press event on the target block-level element, expanding the size of the target block-level element; In response to a drag event following the press event, drag the iframe element so that the interactive panel moves along with the iframe element from a first position of the target webpage to a second position of the target webpage; Wherein, the frame of the iframe element includes a document; The target block-level element covers the title of the document; wherein the initial size of the target block-level element is adapted to the size of the title, and the target block-level element of the initial size does not cover the interactive controls of the document; The method further comprises: In response to a release event following the drag event, the target block-level element is restored to an initial size.

8. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method for dragging an iframe element in a web page as described in any one of claims 1 to 5 or 7 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: The computer program can be executed by at least one processor to enable the at least one processor to perform the steps of the method for dragging an iframe element in a web page as described in any one of claims 1 to 5 or 7.

10. A computer program product, characterized in that: The invention comprises a computer program, which, when executed by a processor, implements the steps of the method for dragging an iframe element in a web page as described in any one of claims 1 to 5 or 7.

Images