A browser skinning method, device, system, equipment and medium

Abstract

The application discloses a browser skin changing method, device, system, equipment and medium. According to the target URL information carried in the received access request, the target URL information is sent to the server, and the first less file corresponding to the target URL information saved in the server is acquired. According to the parameter information of the target theme skin carried in the access request, the first less file is parsed into the first CSS file of the first page of the target theme skin. The first page of the target theme skin after rendering is obtained through page rendering based on the first CSS file, and is displayed, so that the less file of the page can be successfully requested, and the rendering of the low-version browser page is realized.

Description

Technical Field

[0001] This invention relates to the field of Web front-end development technology, and in particular to a browser skinning method, apparatus, system, device, and medium. Background Technology

[0002] When changing themes in a browser, older browsers (IE) pre-store the Cascading Style Sheets (CSS) files corresponding to each theme on the server. When the browser receives a theme skin request, it requests the CSS file of the target theme skin from the server and renders it. Because the server stores the CSS file corresponding to each theme skin in this solution, it consumes a lot of server memory.

[0003] To address the issue of excessive server memory usage caused by the aforementioned approach, existing technologies pre-store a complete stylesheet language (less) file for different themes. The less file can be used to parse the CSS file corresponding to each theme. However, when there are many themes, the less file is quite large, and older browsers cannot successfully request the less file in one go, thus failing to enable therapies on older browser pages. Summary of the Invention

[0004] This invention provides a browser skinning method, apparatus, system, device, and medium to solve the problem that existing technologies cannot achieve skinning of pages in older browser versions.

[0005] This invention provides a browser skinning method, the method comprising:

[0006] Based on the target URL information of the homepage carried in the received access request, the target URL information is sent to the server, and the first less file corresponding to the target URL information stored in the server is obtained, wherein the first less file is a less file based on the pre-segmentation of the page.

[0007] Based on the parameter information of the target theme skin carried in the access request, the first less file is parsed into the first CSS file of the homepage of the target theme skin and rendered to obtain and display the rendered homepage of the target theme skin.

[0008] Furthermore, the method also includes:

[0009] Receive a page redirection request, send the first URL information of the target page carried in the page redirection request to the server, and receive the second less file corresponding to the returned first URL information;

[0010] The second LESS file is concatenated with the first LESS file to obtain a concatenated target LESS file. The target LESS file is parsed into a second CSS file for the target theme skin. The page is rendered to obtain the rendered target page of the target theme skin and displayed. The first LESS file in the browser cache is updated according to the target LESS file.

[0011] Furthermore, after parsing the target LESS file into the second CSS file of the target theme skin, and before rendering the page to obtain the rendered target page of the target theme skin and displaying it, the method further includes:

[0012] Add the HTML page's tags to the second CSS file to obtain the updated second CSS file.

[0013] Accordingly, the present invention provides a browser skinning device, the device comprising:

[0014] The transceiver module is used to send the target URL information of the homepage carried in the received access request to the server, and obtain the first less file corresponding to the target URL information stored in the server, wherein the first less file is a less file based on the page pre-segmentation.

[0015] The processing module is used to parse the first less file into the first CSS file of the homepage of the target theme skin according to the parameter information of the target theme skin carried in the access request, and to render the page to obtain and display the rendered homepage of the target theme skin.

[0016] Furthermore, the transceiver module is also used to receive a page redirection request, send the first URL information to the server according to the first URL information of the target page carried in the page redirection request, and receive the second less file corresponding to the returned first URL information;

[0017] The processing module is further configured to concatenate the second less file with the first less file to obtain a concatenated target less file, parse the target less file into a second CSS file of the target theme skin, perform page rendering to obtain and display the rendered target page of the target theme skin, and update the first less file in the browser cache according to the target less file.

[0018] Furthermore, the processing module is also used to add the HTML page tags to the second CSS file after parsing the target LESS file into the second CSS file of the target theme skin, and before performing page rendering to obtain the rendered target page of the target theme skin and displaying it, to obtain an updated second CSS file.

[0019] Accordingly, the present invention provides a browser skinning system, the system comprising: an electronic device and a server for executing any of the above-described browser skinning methods.

[0020] Accordingly, the present invention provides an electronic device, including: a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus;

[0021] The memory stores a computer program, which, when executed by the processor, causes the processor to implement the steps of any of the methods described in the browser skinning method.

[0022] Accordingly, the present invention provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of any of the above-described browser skinning methods.

[0023] This invention provides a browser skinning method, apparatus, system, device, and medium. In this invention, the target URL information of the homepage carried in the received access request is sent to a server, and a first less file corresponding to the target URL information stored on the server is obtained. Based on the parameter information of the target theme skin carried in the access request, the first less file is parsed into a first CSS file of the homepage of the target theme skin. The page is then rendered based on the first CSS file to obtain and display the rendered homepage of the target theme skin. Thus, the less file of the page can be successfully requested, enabling rendering of pages in older browser versions. Attached Figure Description

[0024] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0025] Figure 1 This is a schematic diagram illustrating a browser skinning method provided in an embodiment of the present invention;

[0026] Figure 2 A schematic diagram illustrating a page pre-fragmentation based on an embodiment of the present invention;

[0027] Figure 3 A schematic diagram illustrating a page skinning method for a low-version browser, provided as an embodiment of the present invention;

[0028] Figure 4 This is a schematic diagram of the structure of a browser skinning device provided in an embodiment of the present invention;

[0029] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0030] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this invention, and not all of them. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0031] To enable rendering of pages in older browser versions, embodiments of the present invention provide a browser skinning method, apparatus, system, device, and medium.

[0032] Example 1:

[0033] Figure 1 This is a schematic diagram of a browser skinning method provided in an embodiment of the present invention. The process includes the following steps:

[0034] S101: Based on the target Uniform Resource Locator (URL) information of the homepage carried in the received access request, send the target URL information to the server, and obtain the first less file corresponding to the target URL information stored in the server, wherein the first less file is a less file based on the pre-fragmented page.

[0035] To enable skinning of pages in older browsers, this invention provides a browser skinning method applied to electronic devices, which can be smart terminal devices such as hosts, laptops, tablets, and smartphones, or servers, which can be local servers or cloud servers. This invention does not impose any limitations on this.

[0036] The electronic device receives an access request, which may be received by the electronic device itself, specifically by receiving an access request input by a user through an input device such as a keyboard, mouse, or touch screen, or by receiving an access request sent by another device connected to the electronic device.

[0037] The access request contains the target URL information of the homepage to be accessed, where the target URL information is the identification information used to identify the homepage.

[0038] After receiving an access request, the electronic device obtains the target URL information of the homepage carried in the access request and sends the target URL information to the server. In order to enable skinning in low-version browsers, the server pre-stores the first less file corresponding to each page after pre-segmentation of the page. Specifically, the first less file of each page is saved in correspondence with the URL information of the page.

[0039] Figure 2 This is a schematic diagram of a page pre-fragmentation based on an embodiment of the present invention, as shown below. Figure 2 As shown, when the user packages the web, all pages are pre-divided based on page routes. Each route corresponds to a page module, and the Less files are pre-packaged in a modular manner according to the page routes. The Less files belonging to each page are extracted separately. That is, the Less files corresponding to each page are obtained based on page fragmentation and stored on the server.

[0040] After receiving the target URL information, the server determines the first less file corresponding to the target URL information based on the pre-saved correspondence between the first less file of each page and the URL information of the page, and sends it to the electronic device. The electronic device receives the first less file returned by the server, and the first less file is first stored in the browser cache (localStorage).

[0041] S102: Based on the parameter information of the target theme skin carried in the access request, the first less file is parsed into the first CSS file of the homepage of the target theme skin and the page is rendered to obtain and display the rendered homepage of the target theme skin.

[0042] The electronic device obtains the parameter information of the target theme skin carried in the access request. The parameter information includes the color, size and other information of the theme skin. The less file needs to be converted into a CSS file to be rendered. Therefore, the first less file is parsed according to the parameter information and the first less file is parsed into the first CSS file of the homepage of the target theme skin. Specifically, the first less file is parsed into the first CSS file through less.js.

[0043] The electronic device obtains the resource files of the homepage and loads the homepage. After the homepage is successfully loaded, it renders the page according to the parsed first CSS file, thereby obtaining the homepage of the target theme skin and displaying the homepage of the target theme skin on the display screen of the electronic device.

[0044] In this embodiment of the invention, the target URL information of the homepage carried in the received access request is sent to the server, and the first less file corresponding to the target URL information stored in the server is obtained. Based on the parameter information of the target theme skin carried in the access request, the first less file is parsed into the first CSS file of the homepage of the target theme skin. The page is rendered based on the first CSS file to obtain and display the rendered homepage of the target theme skin. Since the less file unique to the current page can be successfully requested, instead of requesting all less files on the homepage immediately, the request size of the less file will not be too large. At the same time, it ensures that the less file is truly loaded on demand, minimizing the rendering cost of skinning, reducing the number of requests and bandwidth requirements, and realizing skinning of pages in low-version browsers.

[0045] Example 2:

[0046] To enable skinning of pages on older browsers, based on the above embodiments, in this embodiment of the invention, the method further includes:

[0047] Receive a page redirection request, send the first URL information of the target page carried in the page redirection request to the server, and receive the second less file corresponding to the returned first URL information;

[0048] The second LESS file is concatenated with the first LESS file to obtain a concatenated target LESS file. The target LESS file is parsed into a second CSS file for the target theme skin. The page is rendered to obtain the rendered target page of the target theme skin and displayed. The first LESS file in the browser cache is updated according to the target LESS file.

[0049] The electronic device receives a page redirection request, which carries the first URL information of the target page. For example, when the low version browser of the electronic device receives a user's click operation on the menu redirection page, the page route changes, that is, the browser address bar changes, and the browser address bar contains the first URL information of the target page after the redirection.

[0050] The electronic device sends the first URL information it has acquired to the server, so that the server determines the less file corresponding to the first URL information as the second less file of the target page based on the first URL information and the pre-saved correspondence between the page's URL information and the less file, and then sends the second less file to the electronic device.

[0051] After receiving the second less file returned by the server, the electronic device concatenates the second less file with the first less file. Specifically, the second less file is concatenated after the first less file to obtain the concatenated target less file, thereby ensuring that the target less file can be effectively overwritten.

[0052] The concatenated target LESS file is parsed to obtain the second CSS file of the target theme skin. The page is then rendered based on the second CSS file to obtain the target page of the target theme skin. The target page of the target theme skin is then displayed on the display interface of the low version browser of the electronic device.

[0053] After displaying the target page, the electronic device replaces the first LESS file in the browser cache with the target LESS file, resulting in an updated cached LESS file.

[0054] Figure 3 This is a schematic diagram illustrating a page skinning method in a low-version browser, as provided in an embodiment of the present invention. Figure 3 As shown, the server stores the fragmented LESS file. The low-version browser on the electronic device obtains the base LESS file from the server, which is the LESS file corresponding to the homepage. After obtaining the base LESS file, it obtains the resource files of the homepage and loads the homepage. It saves the base LESS file to the browser cache and performs rendering and repainting based on the base LESS file.

[0055] When the address bar of an older browser on an electronic device changes, the browser retrieves the LESS file of the redirected page from the server. After retrieving the LESS file, it retrieves the resource files of the redirected page and performs the page redirection. The LESS file is then merged with the base LESS file into a new LESS file, which is saved in the browser cache. The browser then performs rendering and repainting based on the new LESS file.

[0056] Example 3:

[0057] To enable skinning of pages on older browsers, based on the above embodiments, in this embodiment of the invention, after parsing the target LESS file into the second CSS file of the target theme skin, and before rendering the page to obtain the rendered target page of the target theme skin and displaying it, the method further includes:

[0058] Add the HTML page's tags to the second CSS file to obtain the updated second CSS file.

[0059] To render pages for older browsers, the electronic device parses the target LESS file into a second CSS file for the target theme skin, then adds the HTML page's style tags to the second CSS file, enabling loading and recognition of the HTML elements and specifying how they are rendered in the browser.

[0060] The second CSS file with added styles is reloaded to generate an updated second CSS file. The page is then rendered based on the updated second CSS file to obtain and display the target page of the target theme skin.

[0061] Example 4:

[0062] Figure 4 This is a schematic diagram of the structure of a browser skinning device provided in an embodiment of the present invention, as shown below. Figure 4 As shown, the device includes:

[0063] The transceiver module 401 is used to send the target URL information of the homepage carried in the received access request to the server, and obtain the first less file corresponding to the target URL information stored in the server, wherein the first less file is a less file based on the page pre-segmentation.

[0064] The processing module 402 is used to parse the first less file into the first CSS file of the homepage of the target theme skin according to the parameter information of the target theme skin carried in the access request, and perform page rendering to obtain and display the rendered homepage of the target theme skin.

[0065] Furthermore, the transceiver module 401 is also used to receive a page redirection request, send the first URL information to the server according to the first URL information of the target page carried in the page redirection request, and receive the second less file corresponding to the returned first URL information.

[0066] The processing module 402 is further configured to concatenate the second less file with the first less file to obtain a concatenated target less file, parse the target less file into a second CSS file of the target theme skin, perform page rendering to obtain and display the rendered target page of the target theme skin, and update the first less file in the browser cache according to the target less file.

[0067] Furthermore, the processing module 402 is also used to add the HTML page tags to the second CSS file after parsing the target LESS file into the second CSS file of the target theme skin and before performing page rendering to obtain the rendered target page of the target theme skin and displaying it, so as to obtain an updated second CSS file.

[0068] Example 5:

[0069] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Based on the above embodiments, this application also provides an electronic device, such as... Figure 5 As shown, it includes: processor 501, communication interface 502, memory 503 and communication bus 504, wherein processor 501, communication interface 502 and memory 503 communicate with each other through communication bus 504.

[0070] The memory 503 stores a computer program, which, when executed by the processor 501, causes the processor 501 to perform the following steps:

[0071] Based on the target URL information of the homepage carried in the received access request, the target URL information is sent to the server, and the first less file corresponding to the target URL information stored in the server is obtained, wherein the first less file is a less file based on the pre-segmentation of the page.

[0072] Based on the parameter information of the target theme skin carried in the access request, the first less file is parsed into the first CSS file of the homepage of the target theme skin and rendered to obtain and display the rendered homepage of the target theme skin.

[0073] Furthermore, the processor 501 is also configured to receive a page redirection request, send the first URL information to the server according to the first URL information of the target page carried in the page redirection request, and receive the second less file corresponding to the returned first URL information.

[0074] The second LESS file is concatenated with the first LESS file to obtain a concatenated target LESS file. The target LESS file is parsed into a second CSS file for the target theme skin. The page is rendered to obtain the rendered target page of the target theme skin and displayed. The first LESS file in the browser cache is updated according to the target LESS file.

[0075] Furthermore, the processor 501 is also configured to, after parsing the target LESS file into a second CSS file for the target theme skin, and before performing page rendering to obtain and display the rendered target page of the target theme skin, the method further includes:

[0076] Add the HTML page's tags to the second CSS file to obtain the updated second CSS file.

[0077] The communication bus mentioned in the above electronic devices can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used to represent it in the diagram, but this does not mean that there is only one bus or one type of bus.

[0078] Communication interface 502 is used for communication between the above-mentioned electronic device and other devices.

[0079] The memory may include random access memory (RAM) or non-volatile memory (NVM), such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0080] The processors mentioned above can be general-purpose processors, including central processing units, network processors (NPs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits, field-programmable gate arrays or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0081] Example 6:

[0082] Based on the above embodiments, this application also provides a computer-readable storage medium storing a computer program executable by a processor. When the program is run on the processor, the processor executes the following steps:

[0083] Based on the target URL information of the homepage carried in the received access request, the target URL information is sent to the server, and the first less file corresponding to the target URL information stored in the server is obtained, wherein the first less file is a less file based on the pre-segmentation of the page.

[0084] Based on the parameter information of the target theme skin carried in the access request, the first less file is parsed into the first CSS file of the homepage of the target theme skin and rendered to obtain and display the rendered homepage of the target theme skin.

[0085] Furthermore, the method also includes:

[0086] Receive a page redirection request, send the first URL information of the target page carried in the page redirection request to the server, and receive the second less file corresponding to the returned first URL information;

[0087] The second LESS file is concatenated with the first LESS file to obtain a concatenated target LESS file. The target LESS file is parsed into a second CSS file for the target theme skin. The page is rendered to obtain the rendered target page of the target theme skin and displayed. The first LESS file in the browser cache is updated according to the target LESS file.

[0088] Furthermore, after parsing the target LESS file into the second CSS file of the target theme skin, and before rendering the page to obtain the rendered target page of the target theme skin and displaying it, the method further includes:

[0089] Add the HTML page's tags to the second CSS file to obtain the updated second CSS file.

[0090] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0091] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0092] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0093] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0094] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A browser skinning method, characterized in that, The method includes: Based on the target URL information of the homepage carried in the received access request, the target URL information is sent to the server, and the first less file corresponding to the target URL information stored in the server is obtained, wherein the first less file is a less file based on the pre-segmentation of the page. Based on the parameter information of the target theme skin carried in the access request, the first less file is parsed into the first CSS file of the homepage of the target theme skin and rendered to obtain and display the rendered homepage of the target theme skin.

2. The method according to claim 1, characterized in that, The method further includes: Receive a page redirection request, send the first URL information of the target page carried in the page redirection request to the server, and receive the second less file corresponding to the returned first URL information; The second LESS file is concatenated with the first LESS file to obtain a concatenated target LESS file. The target LESS file is parsed into a second CSS file for the target theme skin. The page is rendered to obtain the rendered target page of the target theme skin and displayed. The first LESS file in the browser cache is updated according to the target LESS file.

3. The method according to claim 2, characterized in that, After parsing the target LESS file into a second CSS file for the target theme skin, and before rendering the page to obtain and display the rendered target page for the target theme skin, the method further includes: Add the HTML page's tags to the second CSS file to obtain the updated second CSS file.

4. A browser skinning device, characterized in that, The device includes: The transceiver module is used to send the target URL information of the homepage carried in the received access request to the server, and obtain the first less file corresponding to the target URL information stored in the server, wherein the first less file is a less file based on the page pre-segmentation. The processing module is used to parse the first less file into the first CSS file of the homepage of the target theme skin according to the parameter information of the target theme skin carried in the access request, and to render the page to obtain and display the rendered homepage of the target theme skin.

5. The apparatus according to claim 4, characterized in that, The transceiver module is also used to receive page redirection requests, send the first URL information to the server according to the first URL information of the target page carried in the page redirection request, and receive the second less file corresponding to the returned first URL information. The processing module is further configured to concatenate the second less file with the first less file to obtain a concatenated target less file, parse the target less file into a second CSS file of the target theme skin, perform page rendering to obtain and display the rendered target page of the target theme skin, and update the first less file in the browser cache according to the target less file.

6. The apparatus according to claim 5, characterized in that, The processing module is further configured to add HTML page tags to the second CSS file after parsing the target LESS file into the second CSS file of the target theme skin, and before rendering the page to obtain the rendered target page of the target theme skin and displaying it, to obtain an updated second CSS file.

7. A browser skinning system, characterized in that, The system includes: an electronic device and a server for performing the browser skinning method according to any one of claims 1-3.

8. An electronic device, characterized in that, include: The processor, communication interface, memory, and communication bus are connected, with the processor, communication interface, and memory communicating with each other via the communication bus. The memory stores a computer program, which, when executed by the processor, causes the processor to perform the browser skinning method according to any one of claims 1-3.

9. A computer-readable storage medium, characterized in that, It stores a computer program executable by a processor, which, when run on the processor, causes the processor to perform the browser skinning method according to any one of claims 1-3.

Images