Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present application more apparent, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application, and it should be understood that the detailed description described herein is merely for illustrating and explaining the embodiments of the present application, and is not intended to limit the embodiments of the present application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
It should be noted that, if directional indications (such as up, down, left, right, front, and rear are referred to in the embodiments of the present application), the directional indications are merely used to explain the relative positional relationship, movement conditions, and the like between the components in a specific posture (as shown in the drawings), and if the specific posture is changed, the directional indications are correspondingly changed.
In addition, if there is a description of "first", "second", etc. in the embodiments of the present application, the description of "first", "second", etc. is for descriptive purposes only and is not to be construed as indicating or implying a relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defining "a first" or "a second" may explicitly or implicitly include at least one such feature. In addition, the technical solutions of the embodiments may be combined with each other, but it is necessary to base that the technical solutions can be realized by those skilled in the art, and when the technical solutions are contradictory or cannot be realized, the combination of the technical solutions should be considered to be absent and not within the scope of protection claimed in the present application.
Fig. 1 schematically shows a flow chart of a web page processing method according to an embodiment of the application. As shown in fig. 1, an embodiment of the present application provides a web page processing method, which may include the following steps.
S102, acquiring a first page access path input by a user.
It is understood that an access path refers to the order of visitors accessing a web site to view web pages, and generally includes paths through the operating system, communication software, application software, and access control system. The access path may also be a logical path for an end user to access computer information, and typically includes a path through an operating system, communication software, application software, and access control system. For example, a URL (uniform resource locator) is a representation of an access path, consisting of a resource path and a resource name, a resource path being one by which a specified resource can be located. The first page access path refers to an access path for a user to enter a debug page. The developer can load the corresponding debug page in the browser by entering the first page access path.
S104, loading a first webpage according to the first webpage access path, wherein the first webpage comprises a plurality of preset embedded windows.
It is understood that the first web page refers to a web page used for a developer to debug a page in a web program. The first web page may automatically generate a plurality of preset embedded windows. The preset embedded window is a small window created in the first webpage, and other webpages can be displayed in the first webpage, third-party content can be embedded or external resources can be displayed through the preset embedded window. Specifically, the Web program may be a Web program with multi-language support, and may automatically display page content in a corresponding language according to a user's language preference. The first web page may then be a debug page set for internationalized page development. Different preset embedded windows may then display page content in different languages for the page content of the first web page. And the preset embedded window may be an iframe window. The iframe window refers to an inline frame created in a web page by a tag, which allows a separate html document to be embedded in the current web page and displayed in the web page.
S106, window attribute data input by a user for each preset embedded window are obtained.
It is understood that the window attribute data refers to one kind of attribute data for indicating a path of a multimedia file such as an image or audio of the preset embedded window. The window attribute data defines the content to be presented for each preset embedded window. The window attribute data may refer to an src attribute (source-resource) of the iframe window, which may be used to specify an address of an embedded/referenced external resource.
S108, determining a first target language corresponding to each preset embedded window according to the window attribute data of each preset embedded window.
It will be appreciated that the window attribute data may define the language to which each of the preset embedded windows corresponds. And then, determining the first target language corresponding to each preset embedded window according to the window attribute data.
S110, loading target resource files corresponding to each first target language.
It may be understood that the target resource file refers to a language resource file corresponding to the first target language, including a language package, a picture, and the like. For example, if the first target language is English, then the English resource file is loaded.
S112, controlling each preset embedded window to display corresponding first page content in a first target language according to each target resource file.
It can be understood that the first web page displays the page content in different languages through different preset embedded windows. Each preset embedded window displays different language versions of the same page. For the problems of disorder, line feed, incomplete display and the like of various documents in the development process, for example, english description for four-word idioms in Chinese can be very long, and a developer can easily compare the display effects of different language versions in one page. A developer can open a plurality of portlets under one tab of the browser, and simultaneously debug page display effects under different languages in different portlets. The scheme provides a more convenient and efficient development and debugging scheme for a developer, and ensures that the finally released Web program can have good display effects in different language environments.
For S104, in the embodiment of the application, loading the first webpage according to the first page access path comprises analyzing the first page access path to determine a first protocol address, a first port number and a path included in the first page access path, and loading the first webpage according to the first protocol address, the first port number and the path.
It is understood that the first protocol address refers to an internet protocol address corresponding to the loading of the first web page. The first port number is used for enabling the service or the application program corresponding to the first webpage to be loaded in a distinguishing mode in network communication. Each computer runs a plurality of applications, and the function of the port numbers is to uniquely identify the applications, ensuring that data can be accurately sent to the correct service or application. The path refers to a path or a file name of a resource corresponding to the first webpage on the server. In particular, the first page access path may be a URL (uniform resource locator) for locating and identifying an address or path of a resource (e.g., web page, image, video, etc.) on the internet. The first protocol address may refer to the IP address of the host. The URL (uniform resource locator) of the first web page may be the local IP address + the way the port number + the path is specified. For example, the first page access path may be http://127.0.0.1:8080/adjust.
Aiming at S108, in the embodiment of the application, determining the first target language corresponding to each preset embedded window according to the window attribute data of each preset embedded window comprises analyzing the window attribute data of each preset embedded window to determine a second protocol address, a second port number and a language parameter included in each window attribute data, and determining the first target language corresponding to each preset embedded window according to the second protocol address, the second port number and the language parameter aiming at each preset embedded window.
It will be appreciated that the second protocol address refers to loading an internet protocol address corresponding to the preset embedded window. The second port number is used for distinguishing and loading the service or the application program corresponding to the preset embedded window in network communication. The language parameters refer to the parameters of the language environment corresponding to the loading preset embedded window. The second protocol address is the same as the first protocol address and the first port number is the same as the second port number. The preset embedded window may be an iframe window, and the window attribute data may be an src attribute of the iframe window.
For example, a developer opens a first web page (corresponding URL: local IP address + assigned port number + path) specially debugged in the web program, and multiple iframe windows are automatically generated in the first web page to present page contents in different languages for the same service interface. These iframe windows can also be freely opened and closed, each with a corresponding src attribute (native IP address + assigned port number + language parameters). iframe is an HTML element, and a separate HTML page can be embedded in a web page, so that a developer can let each iframe load page content in a specified language by setting different src attributes for each iframe. In the development and debugging process, a developer can load page contents of different languages by setting the src attribute of the iframe. For example, for pages in English version, the src attribute may be set to http://127.0.0.1:8080 land=en, and for pages in Arabic version, the src attribute may be set to http:// 127.0.0.1:80land=ar.
For S112, in the embodiment of the application, controlling each preset embedded window to display the corresponding first page content in the first target language according to each target resource file comprises loading a shared resource file of the first webpage, loading the shared resource file into each preset embedded window, and filling the target resource file into the shared resource file for each preset embedded window so that the preset embedded window displays the corresponding first page content in the first target language.
It is understood that the shared resource file refers to a resource file that can be used in a preset embedded window of the same web page. The shared resource file may be page structure data of the first web page. The files are set to be shared so that the preset embedded window can be accessed and used, the utilization efficiency of file resources is improved, and cooperation is promoted. The preset embedded windows are used for displaying the content which is different in language but has the same meaning as the first webpage, so that the page structure data corresponding to the elements and the labels in the first webpage and the same set of data used by each preset embedded window are only filled with different language resource files, and can be shared with the preset embedded windows.
In the embodiment of the application, the shared resource file comprises a plurality of subfiles, and the target resource file is filled into the shared resource file aiming at each preset embedded window, so that the preset embedded window displays corresponding first page content in a first target language; and filling the target language resources corresponding to each sub-file into each sub-file according to each preset embedded window, so that the preset embedded window displays the corresponding first page content in the first target language.
It is understood that the shared resource file may be page structure data of the first web page. In particular, the shared resource file may be DOM structure data (Document Object Model ). DOM structure data is the changing interface of a web page, providing the web page with a structured set of nodes and objects containing properties and methods. The browser may parse the structured document (e.g., HTML and XML) into a series of nodes according to the DOM model, and then form a Tree structure (DOM Tree) with hierarchical relationships from the nodes. It is understood that each subfile is a node in the DOM structure data. And determining target language resources corresponding to each sub-file in the target resource file according to each preset embedded window, and filling the target language resources corresponding to each sub-file into each sub-file so that the preset embedded window displays corresponding first page content in a first target language. Thus, in each preset embedded window, the language of each element of the first webpage can be translated into the first target language so as to display the corresponding first page content.
Specifically, in the debug phase, in order to enable the iframe window to dynamically load the content of the corresponding language according to the language parameters in its URL (i.e. scr attribute). Logic for analyzing language parameters carried in the URL is implemented in advance in the Web program. When the URL of the iframe window contains a specific language parameter, for example, http://127.0.0.1:8080 lang=en, the program will parse the parameter, load a target resource file (such as a language package, a picture, etc.) of the corresponding language and a DOM structure shared by multiple languages (i.e. shared by each iframe window), and render the file to the page to complete the visualization of the iframe window. In this way, the program can present page content that meets its language preference for URLs according to the iframe window. For example, as shown in fig. 2, for an iframe window where the URL contains a lang=en parameter, the program will load the english resource file and generate english page content. And aiming at the iframe window with the URL containing lang=ar parameters, loading the Arabic resource file by the program and generating Arabic page content. According to the project requirement, setting multiple language parameters, and requesting contents of different languages by different iframe windows through respective URL parameters, so that effects of multiple languages are displayed in one page at the same time.
Further, by repeatedly modifying the code and viewing the page content in different iframe windows in the debug page, a developer can timely discover and repair various display problems. For example, some languages may require longer text space, or some text may differ in typesetting effect in different languages, or the same component may have display errors in different pages. Through targeted adjustment of the problems, a developer can ensure that the finally issued Web program has good display effect under different language environments.
The method comprises the steps of obtaining a second page access path input by a user, loading a second webpage according to the second page access path, determining a second target language corresponding to the second webpage, determining target embedded windows corresponding to the second target language in all preset embedded windows, and loading page contents of the target embedded windows to the second webpage so that the second webpage displays second page contents corresponding to the second target language.
It will be appreciated that the second page access path is relatively comparable to the first page access path, and that the second page access path may also be a URL to load a corresponding second web page. It is understood that the second web page refers to an internationalized page normally accessed by the user. Specifically, after the debugging is finished, when the subsequent user normally accesses the internationalization page, logic for analyzing the language parameters carried in the URL is also implemented in advance in the Web program, namely, the corresponding target resource file and the corresponding shared resource file are loaded according to the language parameters in the URL of the internationalization page. Because the URL accessed by the user is inherited to the scr attribute of each iframe window in the debugging stage, only the second target language corresponding to the second webpage is required to be determined, and the corresponding target embedded window is determined through the second target language, so that the second webpage and the target embedded window access the same set of files, and the effect displayed in the using stage of the user is ensured to be the same as that in the debugging stage.
The method comprises the steps of obtaining a first modification instruction of a user for the shared resource file of the first webpage, modifying the shared resource file according to the first modification instruction to obtain a modified shared resource file, and controlling each preset embedded window to display page content corresponding to the modified shared resource file.
It may be understood that the first modification instruction is a modification instruction of the shared resource file of the first web page, and the program for modifying the shared resource file may be triggered by a tag set on the page. Specifically, a developer may make modifications to the resource file for each language while debugging the code (such modifications would only change the presentation effect of a single iframe window). At the same time, the content (e.g., DOM structure data) in the shared resource file may also be modified. Because the DOM structure of each iframe window is shared, the same file is loaded essentially, and only different iframe windows render the display effect of different voices by loading different target resource files. Thus, this modification can achieve the effect that modifying one piece of code can debug the presentation effect in multiple languages simultaneously (for the case that different iframe windows are for the same business page). In the debugging stage, the debugging efficiency is improved through a hot update function in the Web program (the real-time update of the front-end module can be realized by utilizing Hot Module Replacement of Webpack). Hot updating is a development technique that compiles the modified results in real-time by listening for code modifications, allowing the developer to view the effects of code modifications in real-time without reloading the entire page. Through hot updating, each iframe window in the debugging page can automatically refresh and display the latest page content after a developer modifies codes, and the developer can immediately check the modified effect, thereby shortening the debugging and optimizing period.
In the embodiment of the application, the first webpage comprises a plurality of page components, the method further comprises the steps of obtaining second modification instructions of any page component of a user, modifying any page component according to the second modification instructions to obtain modified page components, determining target webpages with any page component, and controlling each target webpage to display third page content corresponding to the modified page component.
It will be appreciated that the second modification instruction is a pointer to page component modification instruction. The first modification instruction is relatively speaking to the second modification instruction. The page component refers to a basic constituent unit of a page view layer (WXML), and a component combination can construct a powerful page structure. In particular, during page development, some generic page components are typically developed. As shown in fig. 3, the information cards presented on the top page are also presented on separate list pages. In this case, the developer can develop the information card as an independent and generic page component so that it is embedded into different pages (the specific manner of embedding is specified by the DOM structure of the respective page). Since the content in each iframe window is isolated, a developer can debug the presentation effect of the same component in different pages by switching different pages in the window (for the case of different business pages in different iframe windows but loaded with the same generic component). Such as opening a home page and a list page, respectively, while viewing the display effect of the card assembly. The method not only improves the flexibility of debugging, but also ensures the display effect of the same component in different pages.
According to the scheme, different language parameters are spliced by using a plurality of windows under the same page, the same item is accessed, and the server returns the pages in different languages by processing the language parameters in the access link, so that the aim of debugging the display effect of the same page under a plurality of languages can be fulfilled. The method has the advantages that the same project can be accessed by a plurality of windows under the same page in the development and debugging stage, so that developers can be helped to simultaneously debug the display effects of the same page under a plurality of languages, and also can simultaneously debug the display effects of the same component under different pages. After the codes are modified in the process of sending, the display effect under each language is checked in real time in a plurality of windows, so that the efficiency problem in the internationalized page development and debugging process can be greatly improved, and a more convenient and efficient development and debugging scheme is provided for developers.
FIG. 1 is a flow chart illustrating a web page processing method according to an embodiment. It should be understood that, although the steps in the flowchart of fig. 1 are shown in sequence as indicated by the arrows, the steps are not necessarily performed in sequence as indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in fig. 1 may include multiple sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, nor do the order in which the sub-steps or stages are performed necessarily performed in sequence, but may be performed alternately or alternately with at least a portion of other steps or sub-steps of other steps.
Fig. 4 schematically shows a block diagram of a web page processing apparatus according to an embodiment of the present application. As shown in fig. 4, an embodiment of the present application provides a web page processing apparatus, which may include:
a memory 410 configured to store instructions;
processor 420 is configured to invoke instructions from memory 410 and when executing instructions, to implement the web page processing methods described above.
Specifically, in an embodiment of the present application, the processor 420 may be configured to:
acquiring a first page access path input by a user;
Loading a first webpage according to a first webpage access path, wherein the first webpage comprises a plurality of preset embedded windows;
Acquiring window attribute data input by a user aiming at each preset embedded window;
determining a first target language corresponding to each preset embedded window according to window attribute data of each preset embedded window;
loading a target resource file corresponding to each first target language;
and controlling each preset embedded window to display corresponding first page content in a first target language according to each target resource file.
In an embodiment of the present application, the processor 420 may be further configured to:
The method comprises the steps of loading a shared resource file of a first webpage, loading the shared resource file into each preset embedded window, and filling a target resource file into the shared resource file aiming at each preset embedded window so that the preset embedded window displays corresponding first page content in a first target language.
In an embodiment of the present application, the shared resource file includes a plurality of subfiles, and the processor 420 may be further configured to:
And filling the target language resources corresponding to each sub-file into each sub-file according to each preset embedded window so that the preset embedded window displays corresponding first page content in a first target language.
In an embodiment of the present application, the processor 420 may be further configured to:
The method comprises the steps of obtaining a second page access path input by a user, loading a second webpage according to the second page access path, determining a second target language corresponding to the second webpage, determining target embedded windows corresponding to the second target language in all preset embedded windows, and loading page contents of the target embedded windows to the second webpage so that the second webpage displays second page contents corresponding to the second target language.
In an embodiment of the present application, the processor 420 may be further configured to:
the method comprises the steps of obtaining a first modification instruction of a user for a shared resource file of a first webpage, modifying the shared resource file according to the first modification instruction to obtain a modified shared resource file, and controlling each preset embedded window to display page content corresponding to the modified shared resource file.
In an embodiment of the present application, the first web page includes a plurality of page components, and the processor 420 may be further configured to:
the method comprises the steps of obtaining a second modification instruction of any page component of a user, modifying any page component according to the second modification instruction to obtain a modified page component, determining a target webpage with any page component, and controlling each target webpage to display third page content corresponding to the modified page component.
In an embodiment of the present application, the processor 420 may be further configured to:
Analyzing the first page access path to determine a first protocol address, a first port number and a path included in the first page access path, and loading a first webpage according to the first protocol address, the first port number and the path.
In an embodiment of the present application, the processor 420 may be further configured to:
Analyzing the window attribute data of each preset embedded window to determine a second protocol address, a second port number and a language parameter included in the window attribute data, and determining a first target language corresponding to the preset embedded window according to the second protocol address, the second port number and the language parameter aiming at each preset embedded window.
Embodiments of the present application also provide a machine-readable storage medium having stored thereon instructions for causing a machine to perform the above-described web page processing method.
In one embodiment, a computer device is provided, which may be a server, the internal structure of which may be as shown in fig. 5. The computer device includes a processor a01, a network interface a02, a memory (not shown) and a database (not shown) connected by a system bus. Wherein the processor a01 of the computer device is adapted to provide computing and control capabilities. The memory of the computer device includes internal memory a03 and nonvolatile storage medium a04. The nonvolatile storage medium a04 stores an operating system B01, a computer program B02, and a database (not shown in the figure). The internal memory a03 provides an environment for the operation of the operating system B01 and the computer program B02 in the nonvolatile storage medium a04. The database of the computer device is for storing web page processing data. The network interface a02 of the computer device is used for communication with an external terminal through a network connection. The computer program B02, when executed by the processor a01, implements a web page processing method.
It will be appreciated by those skilled in the art that the structure shown in FIG. 5 is merely a block diagram of some of the structures associated with the present inventive arrangements and is not limiting of the computer device to which the present inventive arrangements may be applied, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.
It will be appreciated by those skilled in the art that embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may 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, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may 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, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In one typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include volatile memory in a computer-readable medium, random Access Memory (RAM) and/or nonvolatile memory, etc., such as Read Only Memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.
Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. Computer-readable media, as defined herein, does not include transitory computer-readable media (transmission media), such as modulated data signals and carrier waves.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises an element.
The foregoing is merely exemplary of the present application and is not intended to limit the present application. Various modifications and variations of the present application will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. which come within the spirit and principles of the application are to be included in the scope of the claims of the present application.