Browser-based client configuration method, device and equipment and storage medium

Abstract

The invention relates to the technical field of finance, medical treatment and data processing, and discloses a client configuration method, device and equipment based on a browser and a storage medium. Quoting a constructor on a global object of the browser and an object of a client configuration page through a sandbox in the configuration tool; creating a preview area of the client in the client configuration page; in response to a first input operation on a client configuration page, obtaining interface configuration parameters of the client; the interface configuration parameters are sent to the sandbox in a communication display mode, so that the sandbox calls a browser engine to render the interface configuration parameters on the preview area and displays pictures corresponding to the interface configuration parameters. Therefore, the internal environment and the external environment are isolated in an independent sandbox mode, meanwhile, the object of the parent layer is inherited, interaction of the client can be quickly previewed, the link of repeated verification before each system is omitted, and the working efficiency is improved.

Description

Technical Field

[0001] The present application relates to the fields of finance, medical treatment and data processing technology, and in particular to a browser-based client configuration method, apparatus, device and storage medium. Background Art

[0002] In recent years, with the increasing maturity of front-end technology and the trend of separation of front-end and back-end, front-end frameworks have become more diversified. Different frameworks can be applied to projects of different sizes and different financial, medical and other scenario requirements, providing enterprises with diversified solutions.

[0003] In related technologies, mobile front-end pages are no longer simply repetitive page editing at the page level. To improve efficiency, front-end pages in many scenarios are generated in a configuration-based manner. However, developers still need to redesign independent configuration pages for different project configurations as input for configuration data, which consumes a lot of system space. Moreover, the configured front-end page may differ from the expected display, requiring special accounts to view it on various mobile device models, which is time-consuming and labor-intensive, and the configuration efficiency cannot meet development needs. Summary of the Invention

[0004] In view of this, the present application provides a browser-based client configuration method, apparatus, device and storage medium, which can be embedded in the configuration page and can achieve an interactive effect of real-time synchronization with configuration data by occupying a small space.

[0005] In a first aspect, a browser-based client configuration method is provided, comprising:

[0006] In response to a start-up operation of a configuration tool in a client configuration page in a browser, referencing a constructor on a browser global object and an object on the client configuration page through a sandbox in the configuration tool, so that a script on the client configuration page runs in an isolated environment of the sandbox;

[0007] Creating a preview area for the client in the client configuration page, wherein the size of the preview area is determined according to a target screen size corresponding to the client;

[0008] In response to a first input operation on the client configuration page, obtaining interface configuration parameters of the client;

[0009] The interface configuration parameters are sent to the sandbox in a display communication manner, so that the sandbox calls a browser engine to render the interface configuration parameters on the preview area and display a screen corresponding to the interface configuration parameters.

[0010] Optionally, the sandbox calls a browser engine to render the interface configuration parameters on the preview area and display a screen corresponding to the interface configuration parameters, including:

[0011] The sandbox parses the interface configuration parameters in the isolated environment and generates rendering instructions;

[0012] The sandbox converts the rendering instructions into DOM operations executable by the browser engine;

[0013] The DOM operations are performed in an isolated environment.

[0014] Optionally, the sandbox parses the interface configuration parameters in the isolated environment to generate rendering instructions, including:

[0015] The sandbox converts the interface configuration parameters into the command format of the browser engine in the isolated environment according to the format conversion rules of the browser engine to form the rendering instructions.

[0016] Optionally, creating a preview area of ​​the client in the client configuration page includes:

[0017] In response to a second input operation on the client configuration page, obtaining a terminal model to which the client belongs;

[0018] According to the mapping relationship between preset models and screen sizes, the terminal model is matched with different preset models to determine the target screen size that matches the terminal model;

[0019] Determining a size of the preview area based on a preset ratio and the target screen size;

[0020] The size of the preview area is sent to the configuration tool, so that the sandbox calls the browser engine to render and display the preview area on the client configuration page.

[0021] Optionally, the browser-based client configuration method further includes:

[0022] If the target screen size is not matched based on the terminal model, highlighting an input area for the screen size on the client configuration page;

[0023] In response to a third input operation on the input area of ​​the screen size, the target screen size is acquired.

[0024] Optionally, the browser-based client configuration method further includes:

[0025] Obtaining the configuration tool;

[0026] Registering the configuration tool in the browser;

[0027] In response to the client configuration operation on the browser, the client configuration page having a start button of the configuration tool is displayed.

[0028] Optionally, the interface configuration parameters include at least one of the following: HTML structure, CSS style, and interface size.

[0029] In a second aspect, a browser-based client configuration device is provided, comprising:

[0030] a configuration module, configured to, in response to a start-up operation of a configuration tool in a client configuration page in a browser, reference a constructor on a browser global object and an object on the client configuration page through a sandbox in the configuration tool, so that a script on the client configuration page runs in an isolated environment of the sandbox;

[0031] A display module, configured to create a preview area of ​​the client in the client configuration page, wherein the size of the preview area is determined according to a target screen size corresponding to the client;

[0032] an acquisition module, configured to acquire interface configuration parameters of the client in response to a first input operation on the client configuration page;

[0033] The display module is further configured to send the interface configuration parameters to the sandbox in a display communication manner, so that the sandbox calls a browser engine to render the interface configuration parameters on the preview area and display a screen corresponding to the interface configuration parameters.

[0034] Optionally, the browser-based client configuration device further includes:

[0035] a format conversion module, configured for the sandbox to parse the interface configuration parameters in the isolated environment and generate rendering instructions; and the sandbox to convert the rendering instructions into DOM operations executable by the browser engine;

[0036] The display module is specifically configured to execute the DOM operation in an isolated environment.

[0037] Optionally, the format conversion module is specifically configured to convert the interface configuration parameters into a command format of the browser engine in the isolated environment according to the format conversion rules of the browser engine, thereby forming the rendering instruction.

[0038] Optionally, the acquisition module is further configured to, in response to a second input operation on the client configuration page, acquire a terminal model to which the client belongs; and, according to a mapping relationship between preset models and screen sizes, match the terminal model with different preset models to determine the target screen size that matches the terminal model; and, based on a preset ratio and the target screen size, determine a size of the preview area;

[0039] The display module is further configured to send the size of the preview area to the configuration tool, so that the sandbox calls the browser engine to render and display the preview area on the client configuration page.

[0040] Optionally, the display module is further configured to highlight an input area for a screen size on the client configuration page if the target screen size is not matched based on the terminal model;

[0041] The acquisition module is further configured to acquire the target screen size in response to a third input operation on the input area of ​​the screen size.

[0042] Optionally, the acquisition module is further used to acquire the configuration tool;

[0043] The browser-based client configuration device also includes:

[0044] A registration module, used for registering the configuration tool in the browser;

[0045] The display module is further configured to display the client configuration page having a start button for the configuration tool in response to a client configuration operation on the browser.

[0046] In a third aspect, a computer device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned browser-based client configuration method when executing the computer program.

[0047] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned browser-based client configuration method are implemented.

[0048] In the solution implemented by the browser-based client configuration method, apparatus, computer device, and storage medium, a sandbox references the browser's global object, isolating the script runtime environment of the client configuration page from the main page. This allows the sandbox to inherit the root node's objects and the parent node's objects, providing the configuration tool with an underlying runtime environment consistent with the client configuration page framework. This ensures that the framework's core logic can be executed uniformly, allowing the configuration tool to adapt to commonly used front-end frameworks such as Vue, React, and Angular, expanding the tool's adaptability and eliminating the need to design separate tools for different terminal types. Furthermore, the configuration tool, based on an independent sandbox mechanism, is compact and easy to use. Furthermore, after obtaining the required client interface configuration parameters, the interface configuration parameters are sent to the sandbox via display communication. The sandbox then uses the browser engine to render and update the preview screen in real time on a preview area of ​​the client's target screen size, simulating the display effect of a real device. This allows users to intuitively see the actual layout of the configuration on different terminals, avoiding interface misalignment or display anomalies caused by resolution differences, eliminating the need for repeated verification between systems, and improving work efficiency. In addition, the sandbox independently handles the rendering logic. During the preview process, the rendering process in the sandbox does not affect the performance of the main page, avoiding rendering confusion caused by mixing the preview content with the native DOM of the configuration page. Even complex UI rendering will not cause the configuration tool to freeze, ensuring the accuracy and security of the rendering results and greatly improving preview efficiency.

[0049] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments of the present application. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0051] Figure 1 This is one of the flowcharts of the browser-based client configuration method in this application;

[0052] Figure 2 This is the second flow chart of the browser-based client configuration method in this application;

[0053] Figure 3 This is a schematic diagram of the browser-based client configuration page in this application;

[0054] Figure 4 It is a structural diagram of the browser-based client configuration device in this application;

[0055] Figure 5 It is a structural diagram of the computer device in this application. DETAILED DESCRIPTION

[0056] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0057] See also Figure 1 As shown, Figure 1 A flowchart of a browser-based client configuration method provided in an embodiment of the present application includes the following steps:

[0058] S10: In response to the start operation of the configuration tool in the client configuration page in the browser, the constructor on the browser global object and the object of the client configuration page are referenced by the sandbox in the configuration tool, so that the script of the client configuration page runs in the isolated environment of the sandbox.

[0059] Browser global objects can include window, document, object, array, promise, etc. The client is software installed on the user's actual hardware device, used to request and display resources or functions provided by the server. Examples include insurance applications on Android and financial investment software for mainstream models.

[0060] It should be noted that this configuration tool independently designs a sandbox, which inherits the objects of the root node and the parent node.

[0061] The browser-based client configuration method provided in this application can be applied to interface configuration solutions under various terminals, for example, configuring the client interface of a mobile phone or configuring the client interface of a tablet computer.

[0062] In this embodiment, the script runtime environment of the client configuration page is isolated from the main page by referencing the browser global object in a sandbox. This allows the sandbox to inherit the root node's objects and the parent node's objects. This provides the configuration tool with an underlying runtime environment consistent with the client configuration page framework, ensuring that the framework's core logic can be executed without distinction. This allows the configuration tool to be compatible with commonly used front-end frameworks such as Vue, React, and Angular, expanding the tool's adaptability and eliminating the need to design separate tools for different terminal types. Furthermore, based on an independent sandbox mechanism, the configuration tool is compact and easy to use.

[0063] In some embodiments of the present application, a specific entity alignment scheme is provided, and the browser-based client configuration method before S10 also includes: obtaining a configuration tool; registering the configuration tool in the browser; and displaying a client configuration page with a start button for the configuration tool in response to a client configuration operation on the browser.

[0064] In this embodiment, after the configuration tool is developed, it is registered with the browser so that the browser can add extensions to the configuration tool. Users do not need to download or install a separate application or adapt to the operating system. Instead, they can invoke and run the configuration tool through a start button in the browser. This allows for a preview on the computer during the configuration phase, avoiding the cost of developing multiple independent applications. This can better meet lightweight, high-frequency configuration requirements and further improve the efficiency of client interface configuration.

[0065] S20: Create a preview area for the client in the client configuration page.

[0066] The size of the preview area is determined based on the target screen size of the terminal corresponding to the client. For example, the size of the preview area is obtained by multiplying the target screen size of the terminal by a preset ratio on the client configuration page. This allows the preview area to be scaled proportionally, accurately simulating the actual display effect of the terminal device. This ensures a reasonable layout within the client configuration page in the browser, ensuring that configuration operations and preview effects are simultaneously visible, and improving interaction efficiency.

[0067] In this embodiment, a preview area is generated on the client configuration page based on the target terminal screen size to display a preview of the client interface. This allows the preview area to be rendered to the terminal screen size, allowing users to intuitively see the size and spacing of buttons and text on a real device. This ensures that the layout, proportions, and spacing of interface elements are identical to those on a real device. This effectively prevents elements from overflowing the container boundaries on small-screen devices, or fixed-width components from appearing too narrow or loosely laid out on large screens, thus improving configuration efficiency.

[0068] In some embodiments of the present application, Figure 2As shown, a specific entity alignment solution is provided. In S20, a preview area of ​​the client is created in the client configuration page, which specifically includes the following steps:

[0069] S21: In response to a second input operation on the client configuration page, obtaining a terminal model to which the client belongs.

[0070] S22: According to the mapping relationship between the preset models and the screen sizes, the terminal model is matched with different preset models to determine a target screen size that matches the terminal model.

[0071] Among them, the mapping relationship between the preset models and the screen sizes can be set with reference to the current mainstream models to meet the scenarios that can be adapted to many page aspect ratios.

[0072] S23: Determine the size of the preview area based on the preset ratio and the target screen size.

[0073] S24: Send the size of the preview area to the configuration tool, so that the sandbox calls the browser engine to render and display the preview area on the client configuration page.

[0074] In this embodiment, when users need to configure terminal interface elements, they can first enter the terminal model through the client configuration page. The browser will automatically match the target screen size of the corresponding model from the database based on the terminal model, and will render the preview area with the corresponding scale without manual input. This ensures that the preview screen matches the actual device display ratio, reducing manual adjustment time.

[0075] Furthermore, in some embodiments of the present application, the browser-based client configuration method also includes: if the target screen size is not matched based on the terminal model, highlighting the input area of ​​the screen size on the client configuration page; and obtaining the target screen size in response to a third input operation on the input area of ​​the screen size.

[0076] Among them, the embodiment of the present application does not specifically limit the way of highlighting, and can be highlighting, flashing, bold text, etc.

[0077] In this embodiment, if the database does not contain a target screen size that matches the terminal model required by the user, the input area for entering the target screen size is displayed separately from other elements on the client configuration page to enhance the display of the input area and remind the user to enter the target screen size through the input area. This not only enhances the flexibility and scalability of the tool, but also provides users with clear operation guidance and improves the user experience.

[0078] It is understandable that after the user inputs the target screen size through the third input operation, the target screen size and the terminal model may be associated and stored in the database to facilitate updating the mapping relationship in the database.

[0079] For example, Figure 3 As shown, the configuration area of ​​the client configuration page is used to place various configuration-related operation options, component lists, property setting panels and other content, which is convenient for users to set and adjust various parameters. The preview area is located at the lower side of the client configuration page, which is used to display the corresponding effects of the settings made in the configuration area in real time, allowing users to intuitively see the style of the interface after configuration. Above the preview area, there is an input window for the width and height of the terminal screen, which is used to enter the target screen size to personalize the configuration area size. When the user wants to preview a newly released folding screen mobile phone (not yet included in the database), he only needs to enter the actual size (such as 768×1024px) in the input window, and the preview area corresponding to the input size will be displayed below, without waiting for the database to update.

[0080] S30: In response to a first input operation on the client configuration page, obtaining interface configuration parameters of the client.

[0081] Specifically, interface configuration parameters include at least one of the following: HTML (HyperTextMarkupLanguage) structure, CSS (CascadingStyleSheets) style, and interface dimensions. HTML structure defines the basic structure and content hierarchy of the interface, such as the header, navigation bar, main body, and footer. CSS style is used to set effects such as backgrounds, borders, shadows, and animations. Interface dimensions define the size and spacing of interface elements, as well as the visible size of the client interface on the terminal screen.

[0082] S40: Sending the interface configuration parameters to the sandbox in a display communication manner, so that the sandbox calls the browser engine to render the interface configuration parameters on the preview area and display a screen corresponding to the interface configuration parameters.

[0083] In this embodiment, when configuring the client interface, the required configuration parameters are entered into the configuration tool. The tool introduces the parameters as props. After the configuration tool captures the client interface configuration parameters, the sandbox directly calls the browser engine for rendering, displaying a regionalized preview interactive effect in real time on the client configuration page. As the project's interface configuration parameters change in real time, the sandbox will synchronously monitor the data changes, redraw and reflow the interface, and form a new preview interface to synchronize the display effect of the real device. This allows users to intuitively see the actual layout of the configuration on different terminals, avoiding interface misalignment or display anomalies caused by resolution differences, eliminating the need for repeated verification between systems, and improving work efficiency. In addition, the sandbox independently handles the rendering logic. During the preview process, the rendering process in the sandbox does not affect the performance of the main page, avoiding rendering confusion caused by mixing the preview content with the native DOM of the configuration page. Even complex UI rendering will not cause the configuration tool to lag, ensuring the accuracy and security of the rendering results and greatly improving preview efficiency.

[0084] For example, using the client interface for configuring a bank wealth management product, the sandbox references the browser's global object and creates a preview area based on the target terminal's screen size. The account manager drags and drops product components (such as an interest rate calculator or an investment term selection button) into the configuration area. The configuration tool sends the component parameters to the sandbox, which then renders the layout of the interest rate calculator and investment term selection buttons in the preview area.

[0085] For example, configuring the display interface of a medical monitor (client) in a medical scenario creates a sandbox environment upon startup. When configuring the monitor interface in a browser, the configuration tool creates a sandbox environment, exposing only necessary constructors (such as Object and Array) and medical-specific configuration APIs (such as MedicalUI.render()). Screen resolutions vary significantly between monitor models (e.g., 800×600 for a 10-inch screen and 1024×768 for a 15-inch screen), ensuring that the configuration matches the actual display. The tool automatically scales the preview area proportionally to the screen size and overlays a virtual device border to simulate the physical appearance of a real monitor. The user enters the size parameters for the "ECG Waveform" component into the configuration area. The ECG Waveform component then displays in the preview area according to the size parameters.

[0086] It is worth mentioning that in order to ensure that the effect of the preview screen is consistent with the actual device interface effect, the browser engine compresses the interface configuration parameters using the same preset ratio as the preview area when rendering the interface configuration parameters, so as to achieve a consistent scaling effect.

[0087] In some embodiments of the present application, a specific entity alignment solution is provided. In S40, the sandbox calls the browser engine to render the interface configuration parameters on the preview area and display the screen corresponding to the interface configuration parameters, which specifically includes the following steps:

[0088] S41: The sandbox parses the interface configuration parameters in the isolated environment and generates rendering instructions.

[0089] S42: The sandbox converts rendering instructions into DOM operations that can be executed by the browser engine.

[0090] DOM (Document Object Model) operations refer to the act of adding, deleting, modifying, or checking DOM nodes or attributes through code, and are used to dynamically manipulate web page content, structure, and style.

[0091] S43: Perform DOM operations in an isolated environment.

[0092] In this embodiment, the sandbox converts interface configuration parameters into generic "rendering instructions," which are then converted into DOM operations specific to the front-end framework through an adapter. This allows the browser engine to perform DOM operations within the sandbox's isolated environment, avoiding direct modifications to the main page's DOM structure. Even if configuration parameters are incorrect or malicious code is injected, the stability of the client configuration page will not be affected. Furthermore, the same configuration logic can be adapted to multiple front-end frameworks (Vue, React, and Angular), eliminating the need to implement separate parsing logic for each framework.

[0093] Furthermore, in some embodiments of the present application, the sandbox parses the interface configuration parameters in an isolated environment and generates rendering instructions, specifically including: the sandbox converts the interface configuration parameters into the command format of the browser engine in the isolated environment according to the format conversion rules of the browser engine to form rendering instructions.

[0094] In this embodiment, the sandbox converts configuration parameters according to the corresponding engine format, enabling rendering instructions to be correctly executed across all major browsers, ensuring consistent display of web pages across different browsers and establishing a unified standard for the entire rendering process. This allows interface configurations based on different frameworks to be understood and executed by browser engines, allowing projects to flexibly select technology stacks and improving the configuration tool's browser compatibility. This also reduces subtle differences in DOM operations, style parsing, and other aspects between different browser engines, making rendering instructions more concise and efficient, reducing the time cost of browser parsing and executing instructions, and accelerating page rendering.

[0095] It should be noted that the startup operation, the first input operation, the second input operation, the third input operation, and the client configuration operation include but are not limited to a click operation, a key operation, a fingerprint input operation, a slide operation, and a press operation. The embodiment of the present application does not specifically limit the method of user operation, and any feasible method can be used.

[0096] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0097] The browser-based client configuration method provided in the embodiment of the present application can be applied in a browser, wherein the browser can be installed on various personal computers, laptops, tablet computers and other devices.

[0098] In one embodiment, a browser-based client configuration device is provided, which corresponds one-to-one to the browser-based client configuration method in the above embodiment. Figure 4 As shown, the browser-based client configuration device includes: a configuration module 501, a display module 502, and an acquisition module 503. The detailed description of each functional module is as follows:

[0099] Configuration module 501, for responding to a start operation of a configuration tool in a client configuration page in a browser, referencing a constructor on a global object of the browser and an object on the client configuration page through a sandbox in the configuration tool, so that the script on the client configuration page runs in an isolated environment of the sandbox;

[0100] Display module 502, used to create a preview area of ​​the client in the client configuration page, wherein the size of the preview area is determined according to the target screen size corresponding to the client;

[0101] An acquisition module 503 is configured to acquire interface configuration parameters of the client in response to a first input operation on the client configuration page;

[0102] The display module 502 is further configured to send the interface configuration parameters to the sandbox in a display communication manner, so that the sandbox calls the browser engine to render the interface configuration parameters on the preview area and display the screen corresponding to the interface configuration parameters.

[0103] In one embodiment, the browser-based client configuration device further includes:

[0104] A format conversion module (not shown in the figure) is used by the sandbox to parse interface configuration parameters in an isolated environment and generate rendering instructions; and the sandbox converts the rendering instructions into DOM operations that can be executed by the browser engine;

[0105] The display module 502 is specifically configured to perform DOM operations in an isolated environment.

[0106] In one embodiment, the format conversion module is specifically used in the sandbox to convert the interface configuration parameters into the command format of the browser engine in an isolated environment according to the format conversion rules of the browser engine to form rendering instructions.

[0107] In one embodiment, the acquisition module 503 is further configured to, in response to a second input operation on the client configuration page, acquire the terminal model to which the client belongs; and, according to a mapping relationship between preset models and screen sizes, match the terminal model with different preset models to determine a target screen size that matches the terminal model; and, based on the preset ratio and the target screen size, determine a size of the preview area.

[0108] The display module 502 is further configured to send the size of the preview area to the configuration tool, so that the sandbox calls the browser engine to render and display the preview area on the client configuration page.

[0109] In one embodiment, the display module 502 is further configured to highlight an input area for the screen size on the client configuration page if the target screen size is not matched based on the terminal model;

[0110] The acquisition module 503 is further configured to acquire the target screen size in response to a third input operation on the input area of ​​the screen size.

[0111] In one embodiment, the acquisition module 503 is further configured to acquire a configuration tool;

[0112] The browser-based client configuration device also includes:

[0113] A registration module (not shown in the figure) is used to register the configuration tool in the browser;

[0114] The display module 502 is further configured to display a client configuration page having a start button for a configuration tool in response to a client configuration operation on the browser.

[0115] This application provides a browser-based client configuration device that uses a sandbox to reference the browser's global object, isolating the script runtime environment of the client configuration page from the main page. This allows the sandbox to inherit the objects of the root node and the parent node, providing the configuration tool with an underlying runtime environment consistent with the client configuration page framework, ensuring that the core logic of the framework can be executed without discrimination. This allows the configuration tool to adapt to commonly used front-end frameworks on the market, such as Vue, React, and Angular, expanding the tool's adaptability and eliminating the need to design different tools for different terminal types. Furthermore, the configuration tool is based on an independent sandbox mechanism, is small in size, and easy to use. Furthermore, after obtaining the required client interface configuration parameters, the interface configuration parameters are sent to the sandbox via display communication. The sandbox uses the browser engine to render and update the preview screen in real time on the preview area of ​​the client's corresponding target screen size, synchronously simulating the display effect of a real device. This allows users to intuitively see the actual layout of the configuration on different terminals, avoiding interface misalignment or display anomalies caused by resolution differences, eliminating the need for repeated verification between systems, and improving work efficiency. In addition, the sandbox independently handles the rendering logic. During the preview process, the rendering process in the sandbox does not affect the performance of the main page, avoiding rendering confusion caused by mixing the preview content with the native DOM of the configuration page. Even complex UI rendering will not cause the configuration tool to freeze, ensuring the accuracy and security of the rendering results and greatly improving preview efficiency.

[0116] For specific definitions of the browser-based client configuration device, please refer to the definitions of the browser-based client configuration method above and will not be repeated here. Each module in the above-mentioned browser-based client configuration device can be implemented in whole or in part through software, hardware, or a combination thereof. Each of the above-mentioned modules can be embedded in or independent of the processor of the computer device in hardware form, or can be stored in the memory of the computer device in software form, so that the processor can call and execute the corresponding operations of each of the above modules.

[0117] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the following steps are performed:

[0118] In response to a start operation of a configuration tool in a client configuration page in the browser, a constructor on a global object of the browser and an object on the client configuration page are referenced by the sandbox in the configuration tool, so that a script on the client configuration page runs in an isolated environment of the sandbox;

[0119] Creating a preview area for the client in the client configuration page, wherein the size of the preview area is determined according to the target screen size corresponding to the client;

[0120] In response to a first input operation on the client configuration page, obtaining interface configuration parameters of the client;

[0121] The interface configuration parameters are sent to the sandbox in a display communication manner, so that the sandbox calls the browser engine to render the interface configuration parameters on the preview area and display the screen corresponding to the interface configuration parameters.

[0122] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are implemented:

[0123] In response to a start operation of a configuration tool in a client configuration page in the browser, a constructor on a global object of the browser and an object on the client configuration page are referenced by the sandbox in the configuration tool, so that a script on the client configuration page runs in an isolated environment of the sandbox;

[0124] Creating a preview area for the client in the client configuration page, wherein the size of the preview area is determined according to the target screen size corresponding to the client;

[0125] In response to a first input operation on the client configuration page, obtaining interface configuration parameters of the client;

[0126] The interface configuration parameters are sent to the sandbox in a display communication manner, so that the sandbox calls the browser engine to render the interface configuration parameters on the preview area and display the screen corresponding to the interface configuration parameters.

[0127] In one embodiment, a computer device is provided, the internal structure of which is shown in FIG. Figure 5 As shown. The computer device includes a processor, memory, a network interface, a display screen, and an input device connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external server via a network connection. When executed by the processor, the computer program implements the functions or steps of a browser-based client configuration method.

[0128] It should be noted that the functions or steps that can be implemented by the computer-readable storage medium or computer device can be referred to the relevant description of the browser-based client configuration method in the aforementioned method embodiment. To avoid repetition, they will not be described one by one here.

[0129] Those skilled in the art will appreciate that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0130] Those skilled in the art will clearly understand that for the sake of convenience and brevity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0131] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein; and these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention, and should all be included in the scope of protection of the present invention.

Claims

1. A browser-based client configuration method, characterized in that: include: In response to a start-up operation of a configuration tool in a client configuration page in a browser, referencing a constructor on a browser global object and an object on the client configuration page through a sandbox in the configuration tool, so that a script on the client configuration page runs in an isolated environment of the sandbox; Creating a preview area for the client in the client configuration page, wherein the size of the preview area is determined according to a target screen size corresponding to the client; In response to a first input operation on the client configuration page, obtaining interface configuration parameters of the client; The interface configuration parameters are sent to the sandbox in a display communication manner, so that the sandbox calls a browser engine to render the interface configuration parameters on the preview area and display a screen corresponding to the interface configuration parameters.

2. The browser-based client configuration method according to claim 1, characterized in that: The sandbox calls the browser engine to render the interface configuration parameters on the preview area and display a screen corresponding to the interface configuration parameters, including: The sandbox parses the interface configuration parameters in the isolated environment and generates rendering instructions; The sandbox converts the rendering instructions into DOM operations executable by the browser engine; The DOM operations are performed in an isolated environment.

3. The browser-based client configuration method according to claim 2, characterized in that: The sandbox parses the interface configuration parameters in the isolated environment and generates rendering instructions, including: The sandbox converts the interface configuration parameters into the command format of the browser engine in the isolated environment according to the format conversion rules of the browser engine to form the rendering instructions.

4. The browser-based client configuration method according to claim 1, wherein: The step of creating a preview area for the client in the client configuration page includes: In response to a second input operation on the client configuration page, obtaining a terminal model to which the client belongs; According to the mapping relationship between preset models and screen sizes, the terminal model is matched with different preset models to determine the target screen size that matches the terminal model; Determining a size of the preview area based on a preset ratio and the target screen size; The size of the preview area is sent to the configuration tool, so that the sandbox calls the browser engine to render and display the preview area on the client configuration page.

5. The browser-based client configuration method according to claim 4, characterized in that: The method further comprises: If the target screen size is not matched based on the terminal model, highlighting an input area for the screen size on the client configuration page; In response to a third input operation on the input area of ​​the screen size, the target screen size is acquired.

6. The browser-based client configuration method according to any one of claims 1 to 5, characterized in that: The method further comprises: Obtaining the configuration tool; Registering the configuration tool in the browser; In response to the client configuration operation on the browser, the client configuration page having a start button of the configuration tool is displayed.

7. The browser-based client configuration method according to any one of claims 1 to 5, characterized in that: The interface configuration parameters include at least one of the following: HTML structure, CSS style, and interface size.

8. A browser-based client configuration device, characterized in that: include: a configuration module, configured to, in response to a start-up operation of a configuration tool in a client configuration page in a browser, reference a constructor on a browser global object and an object on the client configuration page through a sandbox in the configuration tool, so that a script on the client configuration page runs in an isolated environment of the sandbox; A display module, configured to create a preview area of ​​the client in the client configuration page, wherein the size of the preview area is determined according to a target screen size corresponding to the client; an acquisition module, configured to acquire interface configuration parameters of the client in response to a first input operation on the client configuration page; The display module is further configured to send the interface configuration parameters to the sandbox in a display communication manner, so that the sandbox calls a browser engine to render the interface configuration parameters on the preview area and display a screen corresponding to the interface configuration parameters.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the browser-based client configuration method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the browser-based client configuration method according to any one of claims 1 to 7 are implemented.

Images