Display method, device, storage medium and terminal of web page address selection component

Abstract

The embodiment of the present invention discloses a method for displaying a web page address selection component. The method comprises: reading a reference address of a function file of the web page address selection component from an HTML file corresponding to a currently displayed page; loading the function file based on the reference address of the function file; wherein the function file contains a reference address of a CSS style file; when a triggering event for displaying the web page address selection component is detected, loading the CSS style file based on the reference address of the CSS style file, and reading definition information of the web page address selection component from the function file; and displaying the web page address selection component based on the definition information of the web page address selection component and the CSS style file. By adopting the above technical solution, it is possible to effectively avoid loading redundant code files in the HTML code file when the web page address selection component is not displayed, thereby improving the display efficiency of the web page address selection component.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of data processing technology, and in particular to a display method, device, storage medium and terminal of a web page address selection component. Background Art

[0002] When developing web pages for mobile terminals, the scene of address selection is often encountered. In the prior art, the display method of the web page address selection component is as follows: when a user accesses an HTML (Hyper Text Mark-up Language) page on a mobile terminal, the mobile terminal automatically loads a CSS (Cascading Style Sheets) style file and a functional JavaScript file according to the CSS style address and the functional JavaScript address in the HTML code file corresponding to the HTML page. When a triggering event for displaying the web page address selection component is detected, the web page address selection component is displayed according to the loaded CSS style file and the functional JavaScript file.

[0003] In the process of implementing the present invention, the inventors found that there are at least the following technical problems in the prior art: when the user does not trigger the display event of the web address selection component, the CSS style file and the function JavaScript file are still loaded in the HTML code file, so that there are redundant code files in the HTML code file, which makes the volume of the HTML code file larger, reducing the page loading efficiency and the display efficiency of the web address selection component. At the same time, it is necessary to add the CSS style address and the function JavaScript address in at least two places in the HTML code file, which is troublesome and difficult to maintain, and this will also increase the workload of the user of the web address selection component (that is, the developer of the mobile terminal web page), and increase the development cost of the user of the web address selection component for web page development. Therefore, how to improve the display efficiency of the web address selection component and reduce the development cost of the user of the web address selection component for web page development becomes very important. Summary of the invention

[0004] The embodiment of the present invention provides a method, device, storage medium and terminal for displaying a webpage address selection component, so as to improve the display efficiency of the webpage address selection component and reduce the cost of webpage development.

[0005] In a first aspect, an embodiment of the present invention provides a method for displaying a webpage address selection component, the method comprising:

[0006] Read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page;

[0007] Loading a function file based on a reference address of the function file; wherein the function file includes a reference address of a CSS style file;

[0008] When a triggering event for displaying a webpage address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and definition information of the webpage address selection component is read from the function file;

[0009] The web page address selection component is displayed based on the definition information of the web page address selection component and the CSS style file.

[0010] In a second aspect, an embodiment of the present invention further provides a display device for a webpage address selection component, the device comprising:

[0011] A reference address reading module is used to read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page;

[0012] A function file loading module, used to load a function file based on a reference address of the function file; wherein the function file includes a reference address of a CSS style file;

[0013] A style file loading module, used for, when a triggering event of displaying a webpage address selection component is detected, loading a CSS style file based on a reference address of the CSS style file, and reading definition information of the webpage address selection component from the function file;

[0014] The address selection component display module is used to display the web page address selection component based on the definition information of the web page address selection component and the CSS style file.

[0015] In a third aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein the program, when executed by a processor, implements a method for displaying a web page address selection component as provided in an embodiment of the present invention.

[0016] In a fourth aspect, an embodiment of the present invention provides a terminal, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements a display method of a web page address selection component as provided in an embodiment of the present invention when executing the computer program.

[0017] The display method of the web address selection component provided in the embodiment of the present invention is that when the user opens the page, the terminal reads the reference address of the function file of the web address selection component from the HTML file corresponding to the currently displayed page, and loads the function file based on the reference address of the function file, wherein the function file contains the reference address of the CSS style file, and when the trigger event of the web address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and the definition information of the web address selection component is read from the function file, and finally the web address selection component is displayed based on the definition information of the web address selection component and the CSS style file. By adopting the above technical means, the display scheme of the existing web address selection component is optimized, when the web address selection component needs to be displayed, the CSS style file is dynamically loaded according to the reference address of the CSS style file contained in the function file, and then the web address selection component is displayed, which can effectively avoid loading redundant code files in the HTML code file when the web address selection component is not displayed, and improve the display efficiency of the web address selection component. At the same time, only one reference address of the function file needs to be referenced in the HTML file, which reduces the reference and maintenance costs when developing the web page, and can further reduce the development cost of the web page development for the user of the web address selection component. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 A schematic diagram of a flow chart of a method for displaying a web page address selection component provided by an embodiment of the present invention;

[0019] Figure 2 A schematic diagram of a pop-up window display of a web page address selection component provided by an embodiment of the present invention;

[0020] Figure 3 A schematic diagram of another web page address selection component pop-up box display provided by an embodiment of the present invention;

[0021] Figure 4 A schematic diagram of a flow chart of another method for displaying a web page address selection component provided by an embodiment of the present invention;

[0022] Figure 5 A schematic diagram of a flow chart of another method for displaying a web page address selection component provided by an embodiment of the present invention;

[0023] Figure 6 A structural block diagram of a display device of a web page address selection component provided by an embodiment of the present invention;

[0024] Figure 7 A structural block diagram of a terminal provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0025] The present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It is to be understood that the specific embodiments described herein are only used to explain the present invention, rather than to limit the present invention. It should also be noted that, for ease of description, only parts related to the present invention, rather than all structures, are shown in the accompanying drawings.

[0026] Figure 1 The present invention provides a flowchart of a method for displaying a webpage address selection component, which can be executed by a display device of the webpage address selection component, wherein the device can be implemented by software and / or hardware, and can generally be integrated in a terminal device. Figure 1 As shown, the method includes:

[0027] Step 101: Read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page.

[0028] Exemplarily, the terminal may include but is not limited to terminal devices such as smart phones, tablet computers, laptop computers, and PDAs. Among them, the operating system of the terminal may include but is not limited to Android operating system, IOS operating system, Windows Phone 8 operating system, etc.

[0029] In an embodiment of the present invention, when a user's access request to open an HTML page is received, an HTML file is obtained and the HTML page is opened. The HTML page may include a browser page, and may also include a Webview page in an APP, wherein the Webview may be used to load a web page according to a link and display it in a corresponding view, that is, the Webview may be understood as a browser in an APP. The HTML page currently accessed by the user may be understood as the currently displayed page. The HTML file corresponding to the currently displayed page contains a reference address of a function file of a web address selection component, wherein the reference address of the function file may be understood as the address information or address identifier of the function file of the web address selection component, and the corresponding function file may be loaded according to the reference address of the function file, and the function file of the web address selection component may include a function JavaScript file, and may also include a function C language file. It should be noted that the embodiment of the present invention does not limit the type of the function file of the web address selection component. The function file mainly limits the function of the web address selection component, and has data request and data processing functions. The reference address of the function file of the web address selection component is read from the HTML file corresponding to the currently displayed page. Exemplarily, the function file of the web address selection component includes a function JavaScript file, and the reference address of the function JavaScript file of the web address selection component is read in the HTML file of the currently displayed page.

[0030] Step 102: Load the function file based on the reference address of the function file; wherein the function file includes the reference address of the CSS style file.

[0031] In an embodiment of the present invention, the function file is loaded based on the reference address of the function file, that is, the function file corresponding to the reference address is downloaded according to the reference address of the function file. Exemplarily, the function JavaScript file of the web page address selection component is loaded according to the reference address of the function JavaScript file of the web page address selection component. Among them, the reference address of the CSS style file is included in the function file of the web page address selection component. It can be understood that the reference address of the CSS style file can be understood as the address information or address identifier of the CSS style file, and the CSS style file corresponding to the reference address of the CSS style file can be dynamically loaded through the reference address of the CSS style file.

[0032] Step 103: When a triggering event for displaying a web page address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and definition information of the web page address selection component is read from the function file.

[0033] Exemplarily, the triggering condition for displaying the web page address selection component can be set according to actual conditions, and the embodiments of the present invention do not specifically limit it. For example, when it is detected that the user acts on certain preset operations (such as double-clicking, sliding, or inputting a preset control gesture) on the currently displayed page, the display event of the web page address selection component can be triggered, which means that the triggering event of the display web page address selection component is detected; or when the address information acquisition instruction is detected, the display event of the web page address selection component can be triggered, which means that the triggering event of the display web page address selection component is detected. After the triggering event of the display web page address selection component is detected, the system can detect the triggering event of the display web page address selection component by reading a flag or receiving a trigger instruction, and the specific detection method is not limited in the embodiments of the present application.

[0034] In an embodiment of the present invention, when a triggering event for displaying a web page address selection component is detected, a CSS style file is loaded based on a reference address of the CSS style file, and definition information of the web page address selection component is read from a function file. It is understandable that when the web page address selection component needs to be displayed, the CSS style file corresponding to the reference address is downloaded according to the reference address of the CSS style file, and definition information of the web page address selection component is obtained from the function file. Among them, the CSS style file can be understood as a computer language used to express file styles such as HTML or XML, and a variety of style description information is included in the CSS style file. The definition information of the web page address selection component can be understood as definition information of at least one of the internal structure, display attributes, display mode and data processing flow of the web page address selection component.

[0035] Exemplarily, a CSS style file can be dynamically loaded based on the reference address of the CSS style file by creating a link tag. Since the link tag is usually placed in the head tag of a web page and is used to link an external CSS file, in an embodiment of the present invention, after loading the CSS style file, a link tag for linking the downloaded CSS style file is added to the HTML file corresponding to the currently displayed page to indicate that the CSS style file is applied to the display of the web page address selection component of the currently displayed page, and then the display is based on the CSS style file when the web page address selection component is displayed.

[0036] Exemplarily, reading the definition information of the web address selection component from the function file includes: reading the address selection class from the function file. Optionally, the address selection class may include address selection attribute information, externally provided methods and configuration parameters. Among them, the address selection attribute information is used to control the display attributes of the web address selection component, the externally provided method is used to control the display mode of the web address selection component, and the configuration parameters are used to control the display content of the web address selection component. For example, the address selection attribute information may include attribute information such as the background color of the web address selection component and the size of the pop-up box of the web address selection component. The externally provided method may include displaying the web address selection component, hiding the web address selection component and obtaining the user selected value. The configuration parameters may include the title of the address selection pop-up box, the interface address of each level of region, and the selection prompt of each level of region, etc.

[0037] Step 104: Display the web page address selection component based on the definition information of the web page address selection component and the CSS style file.

[0038] In the embodiment of the present invention, the webpage address selection component is displayed according to the definition information of the webpage address selection component and the CSS style file, that is, the webpage address selection component is displayed according to the definition information of the webpage address selection component and the style description information in the CSS style file.

[0039] Optionally, displaying the web address selection component based on the definition information of the web address selection component and the CSS style file includes: creating an address selection object according to the address selection class and the preset configuration parameters of the web address selection component; calling the component display method in the address selection object based on the style description information in the CSS style file to display the web address selection component. Exemplarily, the preset configuration parameters of the web address selection component are obtained, wherein the preset configuration parameters of the web address selection component can be understood as the configuration parameters of the web address selection component set by the web developer (that is, the user of the web address selection component) when developing the web page. The preset configuration parameters of the web address selection component may include some specific definitions of the objects in the address selection class, such as specific parameter settings for the address selection attribute information, the methods and configuration parameters provided to the outside in the address selection class. Then, the address selection object is created according to the address selection class and the preset configuration parameters of the web address selection component, that is, the address selection class is instantiated according to the preset configuration parameters of the web address selection component to create the address selection object. The created address selection object includes a display method of the web address selection component corresponding to the configuration parameters of the web address selection component set in advance. Based on the style description information in the CSS style file, the component display method in the address selection object is called to display the netizen address selection component. It can be understood that the style description information in the CSS style file is used as an input parameter of the address selection object to call the component display method in the address selection object, and the web address selection component is displayed based on the called component display method.

[0040] For example, when the webpage address selection component is displayed, it can be displayed in the current display page in the form of a webpage address selection component pop-up box. Figure 2 and Figure 3 As shown, there are two display modes for the pop-up window of the web page address selection component.

[0041] Optionally, when the web address selection component is displayed, an animation effect when the web address selection component is displayed can be added according to the CSS style file. Exemplarily, the transition function transition in the CSS style file can be used to monitor whether it is necessary to set an animation effect when the web address selection component is displayed. If so, different animation effects can be achieved by modifying the transition attribute information in the CSS style in the web address selection component. For example, the animation effect when the web address selection component is displayed can be set to slide up from the bottom of the currently displayed page to the currently displayed page.

[0042] Optionally, when the web address selection component is displayed on the current display page, it can be determined whether the current display page supports the module loading seajs method. If so, the web address selection component is called in the seajs method, otherwise, the web address selection component is called in the global object method. Among them, seajs can be understood as a JavaScript module loading framework that complies with the CMD specification, which can realize the modular development of JavaScript. Through the seajs method, the function code file of the web address selection component can be called as a module, which will not pollute the global variables in the web page development and can reduce the maintenance cost during web page development.

[0043] The display method of the web address selection component provided in the embodiment of the present invention is that when the user opens the page, the terminal reads the reference address of the function file of the web address selection component from the HTML file corresponding to the currently displayed page, and loads the function file based on the reference address of the function file, wherein the function file contains the reference address of the CSS style file, and when the trigger event of the web address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and the definition information of the web address selection component is read from the function file, and finally the web address selection component is displayed based on the definition information of the web address selection component and the CSS style file. By adopting the above technical means, the display scheme of the existing web address selection component is optimized, when the web address selection component needs to be displayed, the CSS style file is dynamically loaded according to the reference address of the CSS style file contained in the function file, and then the web address selection component is displayed, which can effectively avoid loading redundant code files in the HTML code file when the web address selection component is not displayed, and improve the display efficiency of the web address selection component. At the same time, only one reference address of the function file needs to be referenced in the HTML file, which reduces the reference and maintenance costs when developing the web page, and can further reduce the development cost of the web page development for the user of the web address selection component.

[0044] In some embodiments, displaying the webpage address selection component based on the display information of the webpage address selection component and the CSS style file includes: determining whether the CSS style file has been loaded; if so, displaying the webpage address selection component based on the definition information of the webpage address selection component and the loaded CSS style file; otherwise, placing the task of displaying the webpage address selection component in the task list, and when the CSS style file is loaded, displaying the webpage address selection component based on the definition information of the webpage address selection component and the loaded CSS style file. The advantage of such a setting is that the webpage address selection component can be displayed normally, the validity of the display of the webpage address selection component is ensured, and the situation that the webpage address selection component cannot be displayed normally when the CSS style file is not loaded is avoided.

[0045] Exemplarily, in the process of loading a CSS style file based on the reference address of the CSS style file, the loaded CSS style file may be large and the loading time may be long. When the CSS style file is not fully loaded, the web page address selection component is directly displayed based on the acquired definition information of the web page address selection component and the CSS style file that has not been fully loaded. This may easily cause the web page address selection component to fail to display normally. Based on the above considerations, it can be determined first whether the CSS style file has been loaded. If so, the web page address selection component is displayed based on the definition information of the web page address selection component and the loaded CSS style file. If not, the CSS style file continues to be loaded, and the display task of the web page address selection component is placed in the task list. When the CSS style file is fully loaded, the task of displaying the web page address selection component in the task list is executed, that is, the web page address selection component is displayed based on the definition information of the web page address selection component and the loaded CSS style file.

[0046] Optionally, before displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file, it also includes: determining whether the first-level regional data is obtained, and if so, displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file. The first-level regional data is used when the webpage address selection component is displayed. It is understandable that in order to avoid the delay of the first-level regional data in the currently displayed page, the webpage address selection address can be displayed after the first-level regional data is obtained.

[0047] In some embodiments, before displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file, it also includes: obtaining the width information and height information of the terminal device screen; calculating the adaptation information of the webpage address selection component according to the width information and the height information; wherein the adaptation information includes the size of the webpage address selection component and the font size in the webpage address selection component; displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file includes: displaying the webpage address selection component based on the definition information of the webpage address selection component, the CSS style file and the adaptation information. The advantage of such a setting is that when the webpage address selection component is displayed, it can adapt to the size of the terminal device screen, so that the webpage address selection component can be proportionally enlarged or reduced under different terminal screen sizes.

[0048] Exemplarily, the width information and height information of the terminal device screen for displaying the currently displayed page are obtained, wherein the width information and height information may include the actual width and actual height of the screen, and may also include the pixel width and pixel height of the screen. According to the set standard screen size, the adaptation information of the web page address selection component is calculated according to the width information and the height information. When the proportional relationship between the width information and the width of the standard screen size is inconsistent with the proportional relationship between the height information and the height of the standard screen size, the adaptation information of the web page address selection component can be calculated based on the proportional relationship between the width information and the width of the standard screen size. Among them, the adaptation information of the web page address selection component may include the size presented on the screen of the terminal device when the web page address selection component is displayed and the font size of the text displayed in the web page address component. Then, the web page address selection component is displayed based on the definition display information, CSS style file and adaptation information of the web page address selection component. Exemplarily, the style description information in the CSS style file and the adaptation information of the web page address selection component can be used as input parameters to call the component display method in the definition information of the web page address selection component, and the web page address selection component is displayed based on the called component display method.

[0049] Figure 4 A flow chart of another method for displaying a web page address selection component provided by an embodiment of the present invention is shown as follows: Figure 4 As shown, the method comprises the following steps:

[0050] Step 401: Read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page.

[0051] Step 402: Load the function file based on the reference address of the function file; wherein the function file includes the reference address of the CSS style file.

[0052] Step 403: When a triggering event for displaying a web page address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and definition information of the web page address selection component is read from the function file.

[0053] Step 404: Display the web page address selection component based on the definition information of the web page address selection component and the CSS style file.

[0054] Step 405: When an address selection operation performed by a user on the webpage address selection component is detected, it is determined whether the region data corresponding to the address selection operation is the last level region data; if so, step 406 is executed; otherwise, step 407 is executed.

[0055] Step 406: close the webpage address selection component, and display the region data corresponding to the address selection operation by calling a success callback function.

[0056] Step 407: Acquire the next level of regional data corresponding to the address selection operation, and render the next level of regional data into the currently displayed page.

[0057] In an embodiment of the present invention, when an address selection operation performed by a user on a web address selection component is detected, it is determined whether the regional data corresponding to the address selection operation is the last level of regional data. If so, it means that there will be no more regional selection after the regional data corresponding to the regional selection operation. At this time, the web address selection component can be directly closed, and the regional data corresponding to the address selection operation is displayed in the current display page by calling a successful callback function. When it is determined that the regional data corresponding to the address selection operation is not the last level of regional data, it means that the user may need to continue to select the next level of regional data in the web address selection component, then the next level of regional data of the regional data corresponding to the address selection operation is obtained, and the next level of regional data is rendered to the current display page for the user to select the address. Exemplarily, when the web address selection component contains four levels of regional data, namely, city, district, town and street, if the regional data corresponding to the address selection operation performed by the user on the web address selection component is the fourth level of regional data (i.e., street-related regional data), the web address selection component is closed, and the fourth level of regional data selected by the user is displayed in the current display page. If the regional data corresponding to the address selection operation performed by the user on the web address selection component is second-level regional data (that is, district-related regional data), the town-related regional data is obtained and rendered to the current display page for the user to select specific third-level regional data.

[0058] Optionally, obtaining the next level of regional data of the regional data corresponding to the address selection operation includes: determining whether there is the next level of regional data of the regional data corresponding to the address selection operation in the cache, and if so, obtaining the next level of regional data from the cache; otherwise, obtaining the next level of regional data by calling a callback function of a formatting parameter. The advantage of such a setting is that it can not only reasonably utilize the data stored in the cache and save time for downloading web page resources, but also effectively improve the speed of obtaining the next level of regional data of the regional data corresponding to the address selection operation, while also saving traffic and improving user experience.

[0059] Optionally, the next level of regional data is obtained by calling a callback function of the formatted parameters, including: determining the regional level number of the regional data corresponding to the address selection operation and the parent regional number of the regional level number; taking the regional level number and the parent regional number as input parameters, calling the callback function of the formatted parameters to combine the regional level number and the parent regional number to generate request parameters for obtaining the next level of regional data; generating an Ajax request according to the request parameters and pre-set Ajax request configuration parameters, and sending the Ajax request to the server; determining whether data corresponding to the Ajax request is received from the server within a preset time period, and if so, using the data corresponding to the Ajax request as the next level of regional data.

[0060] In an embodiment of the present invention, the regional level number of the regional data corresponding to the regional selection operation and the parent regional number of the regional level number are determined, wherein the parent regional number of the regional level number can be understood as the regional level number of the previous level of the regional level number. For example, if the regional data corresponding to the regional selection operation is the second-level regional data, the regional level number of the regional data corresponding to the regional selection operation is 2, and the parent regional number of the regional level number is 1. For another example, if the regional data corresponding to the regional selection operation is the first-level regional data, the regional level number of the regional data corresponding to the regional selection operation is 1, and if there is no parent regional number, the parent regional number of the regional level number can be set to 0. Then, the regional level number and the parent regional number are used as input parameters, and the callback function of the formatted parameter is called to combine the regional level number and the parent regional number to generate a request parameter for obtaining the next level of regional data. That is, the callback function of the formatted parameter combines the regional level number and the parent regional number to generate a request parameter for obtaining the next level of regional data. An Ajax request is generated using the request parameters of the next level regional data and the preset Ajax request configuration parameters, and the Ajax request is sent to the server to obtain data corresponding to the Ajax request from the server as the next level regional data.

[0061] Optionally, if data corresponding to the Ajax request is received from the server within a preset time period, the data corresponding to the Ajax request is used as the next level of regional data, and the next level of regional data is stored in a cache for subsequent use. Optionally, if data corresponding to the Ajax request is received from the server within a preset time period, the data corresponding to the Ajax request from the server is used as an input parameter to call a callback function for formatting the returned data to format the data corresponding to the Ajax request, and the final data after formatting the data corresponding to the Ajax request is used as the next level of regional data, so that the acquired next level of regional data meets the format requirements. Exemplarily, calling a callback function for formatting the returned data to format the data corresponding to the Ajax request may include: generating an array of the data corresponding to the Ajax request, wherein each item in the array contains a key and a value, the key corresponds to an internal value, and the value is used to be displayed in the currently displayed page. Optionally, before using the data corresponding to the Ajax request as the next level of regional data, it also includes determining whether the data corresponding to the Ajax request is valid. If so, the data corresponding to the Ajax request is used as the next level of regional data. Otherwise, the web address selection component is closed, and the regional data corresponding to the address selection operation performed by the user on the web address selection component is displayed by calling a successful callback function. Optionally, if the data corresponding to the Ajax request is not received from the server within a preset time period, the user is notified that the next level of regional data cannot be obtained by calling a request failure callback function.

[0062] It should be noted that the callback function for formatting parameters, the callback function for request failure, the callback function for formatting returned data and the Ajax request configuration parameters can be included in the address selection class of the functional file of the web address selection component to facilitate the use of data requests and data processing for the web address selection component.

[0063] The display method of the web address selection component provided by the embodiment of the present invention optimizes the display scheme of the existing web address selection component. When the web address selection component needs to be displayed, the CSS style file is dynamically loaded according to the reference address of the CSS style file contained in the function file, and then the web address selection component is displayed. This can effectively avoid loading redundant code files in the HTML code file when the web address selection component is not displayed, thereby improving the display efficiency of the web address selection component. At the same time, only a reference address of a function file needs to be referenced in the HTML file, thereby reducing the reference and maintenance costs during web page development, and further reducing the development costs of web page development for users of the web address selection component. In addition, address data request and processing logic are added to the web address selection component, thereby reducing the workload of users on data processing, improving the display efficiency of regional data, and improving user experience.

[0064] Figure 5 A flow chart of another method for displaying a web page address selection component provided by an embodiment of the present invention is shown as follows: Figure 5 As shown, the method comprises the following steps:

[0065] Step 501: Read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page.

[0066] Step 502: Load the function file based on the reference address of the function file; wherein the function file includes the reference address of the CSS style file.

[0067] Step 503: When a triggering event for displaying a web page address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and definition information of the web page address selection component is read from the function file.

[0068] Step 504: determine whether the CSS style file has been loaded. If so, execute step 505; otherwise, execute step 506;

[0069] Step 505: Display the web page address selection component based on the definition information of the web page address selection component and the loaded CSS style file.

[0070] Step 506: placing the task of displaying the webpage address selection component in the task list, and displaying the webpage address selection component based on the definition information of the webpage address selection component and the loaded CSS style file when the CSS style file is loaded.

[0071] Step 507: when it is detected that the user performs an address selection operation on the webpage address selection component, it is determined whether the region data corresponding to the address selection operation is the last level region data; if so, step 508 is executed; otherwise, step 509 is executed.

[0072] Step 508: close the webpage address selection component, and display the region data corresponding to the address selection operation by calling a success callback function.

[0073] Step 509: Determine the regional level number of the regional data corresponding to the address selection operation and the parent regional number of the regional level number;

[0074] Step 510: using the region level number and the parent region number as input parameters, calling the callback function of the formatted parameter to combine the region level number and the parent region number to generate a request parameter for obtaining the next level region data;

[0075] Step 511: Generate an Ajax request according to the request parameters and preset Ajax request configuration parameters, and send the Ajax request to the server;

[0076] Step 512: determine whether data corresponding to the Ajax request fed back by the server is received within a preset time period. If so, execute step 513; otherwise, execute step 514.

[0077] Step 513: Use the data corresponding to the Ajax request as next-level regional data, and render the next-level regional data into the currently displayed page.

[0078] Step 514: Notify the user that the next level regional data cannot be obtained by calling a request failure callback function.

[0079] The display method of the web address selection component provided by the embodiment of the present invention optimizes the display scheme of the existing web address selection component. When the web address selection component needs to be displayed, the CSS style file is dynamically loaded according to the reference address of the CSS style file contained in the function file, and then the web address selection component is displayed. It can effectively avoid loading redundant code files in the HTML code file when the web address selection component is not displayed, and improve the display efficiency of the web address selection component. At the same time, only the reference address of a function file needs to be referenced in the HTML file, which reduces the reference and maintenance costs during web page development, and can further reduce the development cost of web page development for users of the web address selection component. In addition, address data request and processing logic are added to the web address selection component, which can reduce the workload of users on data processing, improve the display efficiency of regional data, and improve user experience. In addition, obtaining the next level of regional data from the cache can not only reasonably utilize the data stored in the cache, save time for downloading web page resources, but also effectively improve the speed of obtaining the next level of regional data corresponding to the address selection operation, and also save traffic and improve user experience.

[0080] Figure 6 This is a structural block diagram of a display device for a web page address selection component provided by an embodiment of the present invention. The device can be implemented by software and / or hardware, and is generally integrated in a terminal. The web page address selection component can be displayed by executing a display method of the web page address selection component. Figure 6 As shown, the device comprises:

[0081] The reference address reading module 601 is used to read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page;

[0082] A function file loading module 602 is used to load a function file based on a reference address of the function file; wherein the function file includes a reference address of a CSS style file;

[0083] The style file loading module 603 is used to load the CSS style file based on the reference address of the CSS style file and read the definition information of the web page address selection component from the function file when a trigger event of displaying the web page address selection component is detected;

[0084] The address selection component display module 604 is used to display the web page address selection component based on the definition information of the web page address selection component and the CSS style file.

[0085] In the display device of the web address selection component provided in the embodiment of the present invention, when the user opens a page, the terminal reads the reference address of the function file of the web address selection component from the HTML file corresponding to the currently displayed page, and loads the function file based on the reference address of the function file, wherein the function file contains the reference address of the CSS style file, and when the trigger event of the web address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and the definition information of the web address selection component is read from the function file, and finally the web address selection component is displayed based on the definition information of the web address selection component and the CSS style file. By adopting the above technical means, the display scheme of the existing web address selection component is optimized, when the web address selection component needs to be displayed, the CSS style file is dynamically loaded according to the reference address of the CSS style file contained in the function file, and then the web address selection component is displayed, which can effectively avoid loading redundant code files in the HTML code file when the web address selection component is not displayed, and improve the display efficiency of the web address selection component. At the same time, only one reference address of the function file needs to be referenced in the HTML file, which reduces the reference and maintenance costs when developing the web page, and can further reduce the development cost of the web page development for the user of the web address selection component.

[0086] Optionally, reading definition information of the webpage address selection component from the function file includes:

[0087] Reading an address selection class from the capabilities file;

[0088] Accordingly, the address selection component display module is used to:

[0089] Creating an address selection object according to the address selection class and the configuration parameters of the pre-set webpage address selection component;

[0090] Based on the style description information in the CSS style file, the component display method in the address selection object is called to display the web page address selection component.

[0091] Optionally, the address selection component display module is used to:

[0092] Determine whether the CSS style file has been loaded;

[0093] If so, the web page address selection component is displayed based on the definition information of the web page address selection component and the loaded CSS style file; otherwise, the task of displaying the web page address selection component is placed in the task list, and when the CSS style file is loaded, the web page address selection component is displayed based on the definition information of the web page address selection component and the loaded CSS style file.

[0094] Optionally, the device further comprises:

[0095] A screen information acquisition module, used for acquiring width information and height information of a terminal device screen before displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file;

[0096] An adaptation information calculation module, used to calculate the adaptation information of the webpage address selection component according to the width information and the height information; wherein the adaptation information includes the size of the webpage address selection component and the font size in the webpage address selection component;

[0097] The address selection component display module is used to:

[0098] The web page address selection component is displayed based on the definition information of the web page address selection component, the CSS style file and the adaptation information.

[0099] Optionally, the device further comprises:

[0100] A regional data judgment module, configured to, after displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file, determine whether the regional data corresponding to the address selection operation is the last level of regional data when an address selection operation performed by a user on the webpage address selection component is detected;

[0101] A regional data display module, for closing the webpage address selection component when determining that the regional data corresponding to the address selection operation is the last level of regional data, and displaying the regional data corresponding to the address selection operation by calling a success callback function;

[0102] The regional data acquisition module is used to acquire the next level of regional data corresponding to the address selection operation when it is determined that the regional data corresponding to the address selection operation is not the last level of regional data, and render the next level of regional data into the current display page.

[0103] Optional, regional data acquisition module, used to:

[0104] Determine whether there is next-level regional data of the regional data corresponding to the address selection operation in the cache, and if so, obtain the next-level regional data from the cache; otherwise, obtain the next-level regional data by calling a callback function of a formatting parameter.

[0105] Optionally, the next level of regional data is obtained by calling a callback function of the formatting parameter, including:

[0106] Determine the regional level number of the regional data corresponding to the address selection operation and the parent regional number of the regional level number;

[0107] Taking the region level number and the parent region number as input parameters, calling the callback function of the formatted parameter to combine the region level number and the parent region number to generate a request parameter for obtaining the next level region data;

[0108] Generate an Ajax request according to the request parameters and preset Ajax request configuration parameters, and send the Ajax request to the server;

[0109] It is determined whether data corresponding to the Ajax request fed back by the server is received within a preset time period. If so, the data corresponding to the Ajax request is used as the next level regional data.

[0110] Optionally, also include:

[0111] The user notification module is used to notify the user that the next level regional data cannot be obtained by calling a request failure callback function if the data corresponding to the Ajax request fed back by the server is not received within a preset time period.

[0112] An embodiment of the present invention further provides a storage medium containing computer executable instructions, wherein the computer executable instructions are used to execute a method for displaying a web page address selection component when executed by a computer processor, the method comprising:

[0113] Read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page;

[0114] Loading a function file based on a reference address of the function file; wherein the function file includes a reference address of a CSS style file;

[0115] When a triggering event for displaying a webpage address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and definition information of the webpage address selection component is read from the function file;

[0116] The web page address selection component is displayed based on the definition information of the web page address selection component and the CSS style file.

[0117] Storage medium - any of various types of memory devices or storage devices. The term "storage medium" is intended to include: installation media, such as CD-ROM, floppy disk or tape device; computer system memory or random access memory, such as DRAM, DDRRAM, SRAM, EDORAM, Rambus RAM, etc.; non-volatile memory, such as flash memory, magnetic media (such as hard disk or optical storage); registers or other similar types of memory elements, etc. The storage medium may also include other types of memory or combinations thereof. In addition, the storage medium may be located in the first computer system in which the program is executed, or may be located in a different second computer system, which is connected to the first computer system via a network (such as the Internet). The second computer system can provide program instructions to the first computer for execution. The term "storage medium" may include two or more storage media that may reside in different locations (for example, in different computer systems connected by a network). The storage medium may store program instructions (for example, embodied as a computer program) that can be executed by one or more processors.

[0118] Of course, the computer executable instructions of a storage medium containing computer executable instructions provided by an embodiment of the present invention are not limited to the display operation of the web page address selection component as described above, and can also execute related operations in the display method of the web page address selection component provided by any embodiment of the present invention.

[0119] An embodiment of the present invention provides a terminal in which a display device of a web page address selection component provided by an embodiment of the present invention can be integrated. Figure 7 The terminal 700 may include a memory 701, a processor 702, and a computer program stored in the memory 701 and executable by the processor. When the processor 702 executes the computer program, the display method of the webpage address selection component according to the embodiment of the present invention is implemented.

[0120] The terminal provided in the embodiment of the present invention, when a user opens a page, the terminal reads the reference address of the function file of the webpage address selection component from the HTML file corresponding to the currently displayed page, and loads the function file based on the reference address of the function file, wherein the function file contains the reference address of the CSS style file, when a triggering event of the webpage address selection component is detected, the CSS style file is loaded based on the reference address of the CSS style file, and the definition information of the webpage address selection component is read from the function file, and finally the webpage address selection component is displayed based on the definition information of the webpage address selection component and the CSS style file. By adopting the above technical means, the display scheme of the existing webpage address selection component is optimized, when the webpage address selection component needs to be displayed, the CSS style file is dynamically loaded according to the reference address of the CSS style file contained in the function file, and then the webpage address selection component is displayed, which can effectively avoid loading redundant code files in the HTML code file when the webpage address selection component is not displayed, and improve the display efficiency of the webpage address selection component. At the same time, only one reference address of the function file needs to be referenced in the HTML file, which reduces the reference and maintenance costs when developing the webpage, and can further reduce the development costs of the webpage address selection component for users of the webpage address selection component.

[0121] The display device, storage medium and terminal of the webpage address selection component provided in the above embodiments can execute the display method of the webpage address selection component provided in any embodiment of the present invention, and have the corresponding functional modules and beneficial effects of executing the method. For technical details not described in detail in the above embodiments, please refer to the display method of the webpage address selection component provided in any embodiment of the present invention.

[0122] Note that the above are only preferred embodiments of the present invention and the technical principles used. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and that various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in more detail through the above embodiments, the present invention is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A method for displaying a web page address selection component, characterized in that: Applied to terminals, including: Reading a reference address of a function file of a webpage address selection component from a hypertext markup language HTML file corresponding to a currently displayed page; wherein the currently displayed page is an HTML page currently accessed by a user; and the function file of the webpage address selection component includes a function JavaScript file; Loading a function file based on the reference address of the function file; wherein the function file includes a reference address of a cascading style sheet (CSS) style file, and the reference address of the CSS style file is address information or an address identifier of the CSS style file; When a triggering event of displaying a web page address selection component is detected, a CSS style file is loaded based on a reference address of the CSS style file, and definition information of the web page address selection component is read from the function file; wherein the triggering event of displaying a web page address selection component is detected including: detecting a preset operation of a user on a currently displayed page or detecting an address information acquisition instruction; The web page address selection component is displayed based on the definition information of the web page address selection component and the CSS style file.

2. The method according to claim 1, characterized in that: Reading definition information of the webpage address selection component from the function file includes: Reading an address selection class from the capabilities file; Accordingly, displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file includes: Creating an address selection object according to the address selection class and the configuration parameters of the pre-set webpage address selection component; Based on the style description information in the CSS style file, the component display method in the address selection object is called to display the web page address selection component.

3. The method according to claim 1, characterized in that Displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file includes: Determine whether the CSS style file has been loaded; If so, the web page address selection component is displayed based on the definition information of the web page address selection component and the loaded CSS style file; otherwise, the task of displaying the web page address selection component is placed in the task list, and when the CSS style file is loaded, the web page address selection component is displayed based on the definition information of the web page address selection component and the loaded CSS style file.

4. The method according to claim 1, characterized in that Before displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file, the method further includes: Get the width and height information of the terminal device screen; Calculating adaptation information of the webpage address selection component according to the width information and the height information; wherein the adaptation information includes the size of the webpage address selection component and the font size in the webpage address selection component; Displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file includes: The web page address selection component is displayed based on the definition information of the web page address selection component, the CSS style file and the adaptation information.

5. The method according to claim 1, characterized in that After displaying the webpage address selection component based on the definition information of the webpage address selection component and the CSS style file, the method further includes: When an address selection operation performed by a user on the web page address selection component is detected, it is determined whether the regional data corresponding to the address selection operation is the last level of regional data. If so, the web page address selection component is closed, and the regional data corresponding to the address selection operation is displayed by calling a success callback function; otherwise, the next level of regional data corresponding to the address selection operation is obtained, and the next level of regional data is rendered into the currently displayed page.

6. The method according to claim 5, characterized in that Acquiring the next level of regional data corresponding to the address selection operation, including: Determine whether there is next-level regional data of the regional data corresponding to the address selection operation in the cache, and if so, obtain the next-level regional data from the cache; otherwise, obtain the next-level regional data by calling a callback function of a formatting parameter.

7. The method according to claim 6, characterized in that The next level of regional data is obtained by calling the callback function of the formatting parameter, including: Determine the regional level number of the regional data corresponding to the address selection operation and the parent regional number of the regional level number; Taking the region level number and the parent region number as input parameters, calling the callback function of the formatted parameter to combine the region level number and the parent region number to generate a request parameter for obtaining the next level region data; Generate an Ajax request according to the request parameters and preset asynchronous Ajax request configuration parameters, and send the Ajax request to the server; It is determined whether data corresponding to the Ajax request fed back by the server is received within a preset time period. If so, the data corresponding to the Ajax request is used as the next level regional data.

8. The method according to claim 7, characterized in that Also includes: If the data corresponding to the Ajax request fed back by the server is not received within a preset time period, the user is notified that the next level of regional data cannot be obtained by calling a request failure callback function.

9. A display device for a web page address selection component, characterized in that: Configured on the terminal, including: A reference address reading module, used to read the reference address of the function file of the web page address selection component from the HTML file corresponding to the currently displayed page; wherein the currently displayed page is the HTML page currently visited by the user; the function file of the web page address selection component includes a function JavaScript file; A function file loading module, used to load a function file based on a reference address of the function file; wherein the function file includes a reference address of a CSS style file, and the reference address of the CSS style file is address information or an address identifier of the CSS style file; The style file loading module is used to load the CSS style file based on the reference address of the CSS style file and read the definition information of the web page address selection component from the function file when a trigger event of displaying the web page address selection component is detected; wherein the trigger event of displaying the web page address selection component is detected including: detecting a preset operation of the user on the currently displayed page or detecting an address information acquisition instruction; The address selection component display module is used to display the web page address selection component based on the definition information of the web page address selection component and the CSS style file.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the display method of the web page address selection component as described in any one of claims 1 to 8 is implemented.

11. A terminal, characterized in that: The method comprises a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the method implements the display method of the web page address selection component as described in any one of claims 1 to 8 when the processor executes the computer program.

Images