CN105740364B - Page processing method and related device - Google Patents
Page processing method and related device Download PDFInfo
- Publication number
- CN105740364B CN105740364B CN201610053573.XA CN201610053573A CN105740364B CN 105740364 B CN105740364 B CN 105740364B CN 201610053573 A CN201610053573 A CN 201610053573A CN 105740364 B CN105740364 B CN 105740364B
- Authority
- CN
- China
- Prior art keywords
- page
- comparison reference
- end page
- comparison
- reference map
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention aims to provide a page processing method and a related device so as to remove measurement comparison work and improve development efficiency. In the invention, the front-end page and the injected contrast reference image can be displayed in an overlapping mode by injecting the contrast reference image into the front-end page, wherein at least the contrast reference image is displayed in set transparency, and the front-end page and the contrast reference image can be displayed simultaneously. In contrast to the reference image as a copybook (background image) in red, the front page is as a transparent thin paper overlaid on the copybook in red. Thus, the two can be compared without measurement. When the two are not consistent, the rendering attribute parameters can be reset to refresh and change the front-end page, and further eliminate the inconsistent place of the front-end page and the comparison reference image. Therefore, the technical scheme provided by the embodiment of the invention removes the work of repeated measurement and comparison of a front-end engineer, so that the front-end development efficiency is greatly increased.
Description
Technical Field
The present invention relates to the field of data processing, and in particular, to a page processing method and related apparatus.
Background
When creating a web page, many times, a designer is required to create a comparison reference drawing (also referred to as a design draft) of a front-end page with image processing software. And then the front-end engineer develops a front-end page according to the comparison reference picture and carries out page processing.
The traditional page processing mode comprises freehand drawing cutting, namely, a pure manual one-by-one measurement is used for manufacturing and cutting pages. The procedure is similar to that of designing an airplane with the same size on paper by comparing an airplane model (the airplane model is equivalent to a comparison reference figure).
Conventionally, even if the designer labels all the parameters on the comparison reference graph, the front-end engineer needs to perform multiple measurements and repeated comparisons to finally create a front-end page similar to or identical to the comparison reference graph. The flow is shown in figure 1.
Taking the above edge distance as an example, please refer to fig. 2, which shows that the upper and lower rows are separated by 20 pixels. However, for the front page, the distance between the upper and lower rows is affected by many factors. For example, line-height, default inline style (padding), default margin (border), font-height, font-size, character type (Chinese-English, etc.), etc. all affect the distance between the top and bottom lines.
Therefore, a front-end engineer needs to use a measurement tool (such as a screenshot tool) to capture a gap between two upper lines and two lower lines of a front-end page, then read a screenshot height value to detect an edge distance value between the two upper lines and the two lower lines, then adjust an assignment of an upper edge distance (margin-top) of a lower element in a code (i.e., adjust a code pattern detail in fig. 2), and refresh the page (the refresh becomes effective after the code is changed). The screenshot then again measures whether the gaps of the two rows are 20 pixels apart. Therefore, repeated detection and adjustment are carried out, and finally, when the assignment of the upper edge distance of the downlink element is 16px through verification, the distance between the upper line and the lower line can be 20 pixels.
The above only lists the upper margin, and in the process of making one page, the adjustment and measurement work is repeated in a large number, which is time-consuming.
Disclosure of Invention
The invention aims to provide a page processing method and a related device so as to remove measurement comparison work and improve development efficiency.
A page processing method is applied to an electronic device loaded with a browser, and comprises the following steps:
injecting a comparison reference picture into the front end page;
superposing and displaying the front-end page and the injected comparison reference image; wherein at least the comparison reference image is displayed with a set transparency so as to determine whether the front page and the comparison reference image are consistent, and if not, the rendering attribute parameter is reset;
loading the reset rendering attribute parameters;
and refreshing the front-end page according to the rendering attribute parameters.
The embodiment of the invention also provides a page processing device, which is applied to electronic equipment loaded with a browser, and the device comprises:
the injection resource module is used for injecting a comparison reference picture into the front-end page;
the monitoring display module is used for displaying the front-end page and the injected comparison reference image in an overlapping mode; wherein at least the comparison reference image is displayed with a set transparency so as to determine whether the front page and the comparison reference image are consistent, and if not, the rendering attribute parameter is reset;
the loading module is used for loading the reset rendering attribute parameters;
and the rendering module is used for refreshing the front-end page according to the rendering attribute parameters.
The embodiment of the invention also provides electronic equipment which comprises the page processing device.
Based on the above technical solution, the embodiment of the present invention may inject a comparison reference map into the front-end page, and display the front-end page and the comparison reference map in an overlapping manner. Wherein, at least the comparison reference image is displayed with set transparency, so that the front page and the comparison reference image can be displayed simultaneously. The reference image is compared with the copybook (background image) in red, and the front page is compared with the transparent thin paper covered on the copybook in red, so that the two can be compared without measurement. When the two are not consistent, the rendering attribute parameters can be reset to refresh and change the front-end page, and further eliminate the inconsistent place of the front-end page and the comparison reference image. In the process, the traditional mode of 'comparing an airplane model (the airplane model is equivalent to a comparison reference picture) and designing an airplane with the same size on paper' is abandoned, and the copying is carried out similarly to 'covering transparent thin paper (a front end page) on a red copybook (the comparison reference picture'), so that a front end engineer is not required to repeatedly measure comparison parameters. Therefore, the technical scheme provided by the embodiment of the invention removes the work of repeated measurement and comparison of a front-end engineer, so that the front-end development efficiency is greatly increased. Meanwhile, the page processing is more accurate due to the tracing mode, what you see is what you get can be easily realized, and any point of the reference image can be quickly compared and compared. In addition, because measurement is not needed, the labeling work of a designer is removed, so that the designer is concentrated on design instead of measurement labeling, and the efficiency of finishing comparison of reference images is greatly improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings without inventive exercise.
FIG. 1 is an exemplary diagram of a freehand cut diagram flow;
FIG. 2 is an exemplary diagram of a distance screenshot;
fig. 3a, 3b, and 3c are exemplary diagrams of a page processing method flow provided by an embodiment of the present invention;
FIG. 4 is an exemplary diagram of pop page injection versus reference map URL provided by an embodiment of the present invention;
FIGS. 5a and 5b are diagrams of a moving comparison reference graph provided by an embodiment of the present invention;
FIG. 6 is a detailed flowchart illustration of a comparative reference map implant provided by an embodiment of the present invention;
FIG. 7 is a detailed flowchart illustration of an alternate presentation front end page and a comparison reference provided by an embodiment of the present invention;
FIG. 8 is a detailed flowchart of a monitoring presentation according to an embodiment of the present invention;
fig. 9a and 9b are schematic structural diagrams of a page processing apparatus according to an embodiment of the present invention;
fig. 10 is a schematic structural diagram of a general computer system of an electronic device according to an embodiment of the present invention.
Detailed Description
The embodiment of the invention provides a page processing method, a page processing device and electronic equipment.
The page processing method or device can be applied to electronic equipment loaded with a browser, such as a mobile terminal, a notebook computer, a server and the like.
The page processing device can be used as a processing plug-in (particularly a picture cutting plug-in) and installed in a browser.
A plug-in is a program written in an application program interface that conforms to a specification. After the map cutting plug-in is installed, the browser can directly call the map cutting plug-in, and the page processing method provided by the embodiment of the invention is realized through interaction with a front-end engineer. Taking a chrome browser as an example, a chrome page processing plug-in can be written to implement the page processing method provided by the embodiment of the invention.
In addition, js files for page processing can be introduced into html codes to realize the installation of the page processing device into the browser.
After installing a plug-in or introducing a js file for page processing into the html code, a user can see the console during page processing. The console may have buttons, input boxes, etc. on it, and may also provide visual control access to some switches (e.g., the local cache switch mentioned later) and key variables (e.g., the transparency later).
Fig. 3a shows an exemplary flow of the page processing method, which may include the following steps:
s0: the front page is opened.
The front page is the page to be developed. The front page may be a blank page or a non-blank page.
The specific implementation mode can be as follows: and (4) typing in the address (URL) of the front page in an address input field of the browser, returning, and jumping to the front page.
It should be noted that a URL (uniform resource locator) is a compact representation of the location and access method of a resource available from the internet, and is an address of a standard resource on the internet. Each file on the internet has a unique URL that contains information indicating the location of the file and how the browser should handle it.
The front-end page in the embodiment of the invention is generally a page without business logic and can be regarded as a page template.
S1: the comparison reference map is injected into the front page.
In one example, the contrast reference map may be injected via a POP page (the POP page is provided by the aforementioned cut map plug-in).
Referring to fig. 4, a POP page may be displayed in a certain region of the front page, and a reference map address (URL) is input in the POP page to implement the reference map injection. The POP page is part of the chrome page handling plug-in and is the console provided by the chrome page handling plug-in. The POP page is independent of the front page, and is not refreshed in a subsequent operation of refreshing the front page.
In other examples, the injection of the reference graph may be implemented by a background, asynchronous request, or other form of plug-in, or may be directly imported at another console (e.g., a console provided by a js file that introduces page processing in html code).
It should be noted that the console implemented by introducing the js file of the page processing into the html code is a part of the front-end page, and in the subsequent operation of refreshing the front-end page, the console is also refreshed.
S2: the overlay shows a comparison reference of the front-end page and the injection.
The front page may be superimposed (overlaid) on top of the comparative reference map, or conversely, the comparative reference map may be superimposed (overlaid) on top of the front page.
Also, the front page and the comparison reference are visible at the same time.
There are many ways to achieve simultaneous visualization of the front page and the contrast reference, for example, the front page can be overlaid on the contrast reference (i.e., the front page can be the first layer and the contrast reference can be the second layer), because the front page has a feature that the underlying pattern can be exposed in the unobstructed area. Thus, when the front end page is overlaid on the comparative reference map, the lower comparative reference map can be seen through the front end page; for another example, the comparison reference map may be overlaid on the front page (i.e., the comparison reference map may be a first layer and the front page may be a second layer), and the comparison reference map may be displayed with a set transparency.
The comparison reference image can be regarded as a copybook (background image) with a red stroke, and the front page corresponds to a transparent thin paper covering the copybook with the red stroke.
In order to distinguish the front-end page from the comparison reference image, the transparency of the comparison reference image and/or the front-end page may be adjusted, so that the comparison reference image is displayed to be semi-transparent, or the front-end page is displayed to be semi-transparent, or both the front-end page and the comparison reference image are displayed to be semi-transparent (but the transparency values of the front-end page and the comparison reference image are different); obviously, the transparency of the comparison reference image and/or the front page is adjusted to be semi-transparent, which is only an optional way, and the embodiment of the present invention may also set the transparency of the comparison reference image and/or the front page to be within a suitable transparency range (e.g., 40% transparency, 60% transparency, etc.), as long as it is ensured that the front page and the comparison reference image are visible at the same time and can be distinguished from each other.
In specific implementation, the value of the transparency can be input through a console (such as a POP page) so as to realize display control of the transparency of the comparison reference picture or the front page. For example, the POP page may provide a transparency option, a slider, or an input box, and the front-end engineer may select a specific transparency value in the transparency option, or may select a transparency value by sliding the slider, or directly input a transparency value in the transparency input box.
Optionally, the page processing plug-in or the browser may further provide a monitoring display switch, and the monitoring display switch may be turned on or off. Monitoring the state of the show switch for controlling whether to overlay the comparative reference map and front-end page of the show injection: and if the monitoring display switch is in the on state, allowing the front-end page and the comparison reference picture to be displayed in an overlapping mode, and if the monitoring display switch is in the off state, not allowing the front-end page and the comparison reference picture to be displayed in an overlapping mode.
In a specific implementation, the on and off of the listening display switch can be realized by a specific key (for example, a number 1 key) on the keyboard: and when the monitoring display switch is in the closed state, the monitoring display switch is turned on by pressing the specific key. And when the monitoring display switch is in an on state, the specific key is pressed, and the monitoring display switch is closed.
Making the front-end page and the comparison reference image visible at the same time and distinguishable from each other may facilitate a user (front-end engineer) or an electronic device to determine whether the front-end page and the comparison reference image are consistent and to reset rendering attribute parameters to modify the front-end page in the inconsistency.
S3: and loading the reset rendering attribute parameters.
Rendering attribute parameters are of many kinds, e.g., line height attribute, default margin, font attribute, font size, character type, margin, etc.
The rendering properties parameters are embedded in the code, and therefore the front-end engineer can also be considered to be the assignment of rendering properties in the modified code, a step similar to the adjusted code style details in FIG. 2.
S4: and refreshing the front-end page according to the rendering attribute parameters.
More specifically, the browser loads the changed code to refresh the front-end page.
In practical applications, the front-end engineer may implement the refresh of the front-end page by:
firstly, changing a code through a browser, then copying the changed code into an internet file corresponding to a front-end page from the browser, and finally, accessing the internet file through a Uniform Resource Locator (URL), so that the front-end page is refreshed.
It can be seen that, in the present embodiment, the comparison reference map can be injected into the front page, and the front page and the comparison reference map are displayed in an overlapping manner. Wherein at least the comparison reference image is displayed with a set transparency so that the front page and the comparison reference image can be simultaneously displayed, the comparison reference image is like a copybook (background image) with a red color, and the front page is like a transparent thin paper covered on the copybook with a red color. Thus, the two can be compared without measurement. When the two are not consistent, the rendering attribute parameters can be reset to refresh and change the front-end page, and further eliminate the inconsistent place of the front-end page and the comparison reference image.
In the process, the traditional mode of 'comparing an airplane model (the airplane model is equivalent to a comparison reference picture) and designing an airplane with the same size on paper' is abandoned, and the copying is carried out similarly to 'covering transparent thin paper (a front end page) on a red copybook (the comparison reference picture'), so that a front end engineer is not required to repeatedly measure comparison parameters. Therefore, the technical scheme provided by the embodiment of the invention removes the work of repeated measurement and comparison of a front-end engineer, so that the front-end development efficiency is greatly increased.
Meanwhile, the page processing is more accurate due to the tracing mode, what you see is what you get can be easily realized, and any point of the reference image can be quickly compared and compared.
In addition, because measurement is not needed, the labeling work of a designer is removed, so that the designer is concentrated on design instead of measurement labeling, and the efficiency of finishing comparison of reference images is greatly improved.
In another embodiment of the present invention, referring to fig. 3b, after step S4, the page processing method further includes the following steps:
s5: and superposing and displaying a refreshed front-end page and an injected comparison reference picture.
Wherein at least the reference image is displayed with a set transparency in comparison. Step S5 is similar to step S2, and the refreshed front-end page and the visual effects map are simultaneously visible in comparison to the reference map. Please refer to step S2 for related contents, which is not described herein.
Thus, after refreshing the front-end page, the front-end engineer can compare whether the refreshed front-end page and the comparison reference map are identical or not, since the refreshed front-end page and the comparison reference map are overlaid together and are simultaneously visible. If not, the rendering attribute parameters can be reset again to refresh the front-end page (the refreshed front-end page and the comparison reference map are overlapped and can be seen at the same time), and the operation is circulated until the two are consistent.
In other embodiments of the present invention, the page processing method in all the embodiments may further include the following steps:
and adjusting the position of the comparison reference image, and displaying the comparison reference image.
The front-end engineer can make the comparison reference map coincide with the front-end page part or all of the area by adjusting the position of the comparison reference map. For example, the reference image of the comparison document has an upper-case A word, the front page also has an upper-case A word, and the two A words can be overlapped by adjusting the position of the reference image of the comparison document.
In one example, the action of a mouse or a keyboard of the electronic device can be monitored, and the position of the comparison reference image is adjusted correspondingly according to the action of the mouse or the keyboard.
That is, the front-end engineer may move the comparative reference map using a mouse or a keyboard, thereby adjusting the position of the comparative reference map. For example, referring to fig. 5a and 5b, the position shown in fig. 5a in comparison with the reference figure can be moved to the position shown in fig. 5 b.
In another example, the page processing plug-in or the browser may also provide a movement switch, which may use mouse or keyboard movement versus reference when the movement switch is on, and may not use mouse or keyboard movement versus reference when the movement switch is off.
In specific implementation, the turning on and off of the moving switch can be realized by a specific key (for example, the number 1 key) on the keyboard. When the specific key is pressed in the off state, the moving switch is turned on, and when the specific key is pressed in the on state, the moving switch is turned off.
The timing of adjusting the position of the reference map may be determined by the front end engineer. For example, between steps S2 and S3, or after step S5.
In other embodiments of the present invention, please refer to fig. 3c, the page processing method in all the embodiments may further include the following steps:
s6: and when a comparison instruction is received, alternately displaying the front-end page and the comparison reference picture.
In one example, the front page may be alternatively presented at 1ms intervals with the comparison reference: the front page is shown at time t0 (while hiding the comparison reference picture), the comparison reference picture is shown at time t0+1ms (while hiding the front page), the front page is shown at time t0+2ms (while hiding the comparison reference picture), and so on.
If there is a difference between the front page and the reference map, the human eye will appear to have a distinct jump, so that the conclusion whether the front page and the reference map are the same can be intuitively obtained. If not, the positions of the comparison reference graphs can be continuously adjusted and/or the rendering attribute parameters can be reset to refresh the front-end page.
In another example, the page processing plug-in or browser may also provide a compare switch. The comparison switch can be turned on or off by pressing a specific key on the keyboard or clicking a comparison button. For example, when the comparison switch is turned on, the front-end engineer may turn off the comparison switch by pressing a specific key on the keyboard or clicking the comparison button, and otherwise turn on the comparison switch by pressing a specific key on the keyboard or clicking the comparison button.
In the following, the details of the important technical contents will be described by taking a chrome browser as an example.
First, the reference map injection is compared (corresponding to step S1).
Injecting the comparison reference map into the front-end page may include at least the following steps:
1) design resources are injected into the front-end page.
The design resources may include at least a URL against a reference map. In addition, transparency, default position against reference map, and listening show switch status (status may be on or off) may also be included.
Where the URL, transparency, default location of the contrast reference map may be injected by the POP page.
2) And storing the design resources to the local to become local resources.
Alternatively, the "design resources" may be stored in a cache cookie or localstorage file.
It should be noted that a local cache switch button may be provided on the POP page, and after the front page is opened, the default state of the local cache switch is on or off.
When the local cache switch is in an on state, the design resources are allowed to be stored locally. If the local cache switch is in an off state, the design resource is not allowed to be stored locally, and the design resource needs to be injected again after the front-end page is refreshed.
FIG. 6 shows more specific steps than reference map injection, including:
a: the front page starts to complete the injection of js.
js is a file, which is called as Javascript file, but the invention does not force the name to be named, and any name can be used. For the chrome plug-in, the injected file may be content.
The js contains codes, and after the js is injected, the codes can be embedded into a front-end page, so that a part of the page processing plug-in is embedded into the front-end page, and the subsequent operation is completed together with the browser.
For code direct writing introduction (that is, the aforementioned js file for introducing page processing into html code), a custom name is required, and the introduced js file for page processing is completely embedded into a front-end page.
B: the front-end engineer enters design resources (including at least the address of the reference map) into the POP page.
C: the POP page forwards the design resource to a background page.
And the background page is started from the chrome browser and is permanently resident in the background.
D: the background page forwards the design resource to the front-end page.
E: the front-end page writes the design resources locally (e.g., to a cache cookie or localstorage), embeds the design resources in the Dom, and sends a write success or failure message (also referred to as a write result) to the background page.
Dom (Document object model), the content and structure of a Document can be accessed and modified in a platform and language independent manner. In other words, this is a common way to represent and process an HTML or XML document.
Dom techniques allow pages to be dynamically changed, such as dynamically displaying or hiding an element, changing their properties, adding an element, etc., which greatly enhances the interactivity of the page.
The design resources are embedded in the Dom, so that the front-end page and the comparison reference map can be displayed in an overlapping mode, and the comparison reference map is displayed in transparency and a default position in the design resources.
F: and the background page forwards the writing result to the POP page.
It should be noted that both the Background page and the POP page are unique to the chrome, and in this embodiment, the Background page is used to forward the message, because the POP page in the chrome browser cannot reach the dom directly.
And for the aforementioned manner of introducing the js file of page processing into the html code, the design resource can be directly written into the dom.
G: and the POP page receives the writing result and ends.
Second, the two are compared (corresponding to step S6).
The front page and the comparison reference map can be alternately displayed by the comparison module in the page processing device.
More specifically, referring to fig. 7, the alignment operation may include:
a: starting comparison;
b: hiding the body and all leaves thereof in the front-end page dom, and independently displaying a contrast reference picture with 100% transparency;
this step is implemented by hiding the front page, only displaying the contrast reference.
C: a short delay (e.g., 1ms), hidden versus the reference, 100% transparency shows the front-end page full content. And C, jumping to the step B until the comparison is closed.
If the front page is different from the design, human eyes can feel obvious jitter at the moment.
Third, a comparative reference diagram is shown (corresponding to step S2).
The displayed front page and the injected comparison reference map can be superimposed by a listening display module in the page processing device.
More specifically, overlaying the displayed front-end page and the injected comparison reference map (or overlaying the refreshed front-end page and the injected comparison reference map) may include:
1) searching local resources;
2) and when the local resource has the URL, the transparency and the default position of the comparison reference picture and the monitoring display switch is in the on state, displaying the comparison reference picture corresponding to the URL according to the transparency and the default position of the comparison reference picture.
The front page and the comparison reference picture may be one as a first layer and the other as a second layer. The display order of the two can be set as: the front page is shown as the first layer and the comparative reference is shown as the second layer, or vice versa.
Therefore, the comparison reference map corresponding to the URL may be further displayed according to the transparency, the default position of the comparison reference map, and the display order of the comparison reference map.
After the initial injection, the default position of the comparative reference map is the system initial default value. Typically the upper left corner.
It should be noted that, if the mobile switch is turned on and the local cache switch is also turned on, in the process of adjusting the position of the comparison reference map, if the front-end engineer uses the mouse to move the comparison reference map, the monitoring and displaying module may also monitor the movement of the mouse, perform corresponding position movement on the comparison reference map, and store the current position of the comparison reference map as the default position to the local after the mouse stops moving, so that the default position of the comparison reference map in the local resource is updated, and when displaying next time, the updated default position may be used to display the comparison reference map.
In addition, if the mobile switch is turned on and the local cache switch is also in an on state, when a front-end engineer uses the keyboard direction keys (for example, up-down, left-right keys) to move the comparison reference map, the monitoring and displaying module can also monitor the keyboard direction keys, when the keys are pressed, the comparison reference map is correspondingly moved, after the keys are stopped being pressed, the current position of the comparison reference map is stored to the local as a default position, so that the default position of the comparison reference map in the local resource is updated, and when the comparison reference map is displayed next time, the updated default position can be used for displaying the comparison reference map.
That is, after adjusting the position of the comparative reference map, the following steps may be further included:
the current position of the comparison reference map is stored locally as a default position (this step may be performed when the local cache switch is in an on state).
It should be noted that after the front-end page is refreshed, the display of the comparison reference map is still realized by the operation of "searching for the local resource, displaying the URL, the transparency and the default position of the comparison reference map in the local resource, and displaying the comparison reference map corresponding to the URL according to the transparency and the default position of the comparison reference map when the monitoring display switch is turned on. Therefore, if the local cache switch is in an on state, the comparison reference graph can be displayed without re-injection no matter how the front-end page is refreshed after the comparison reference graph is injected once.
In addition, the monitoring display module can also monitor whether the comparison switch is turned on, and when the comparison switch is turned on, the comparison logic is entered, namely, the comparison module executes the operation.
FIG. 8 illustrates more specific operations performed by the listening display module, including:
a: searching local resources, and judging whether a reference map URL, transparency and a default position of the reference map exist or not;
b: monitoring the monitoring display switch when judging that the URL, the transparency and the default position of the comparison reference image exist, and entering the step J when judging that the state of the monitoring display switch is on;
c: monitoring (injecting), and updating local resources when new design resources are injected;
d: monitoring (moving a switch);
e: when the mobile switch is turned on, obtaining the initial position of the mouse, monitoring the movement of the mouse, and carrying out corresponding position movement on the comparison reference image;
f: when the mobile switch is turned on, monitoring the direction keys of the keyboard, and when the keys are pressed, carrying out corresponding position movement on the comparison reference image;
g: when the position of the comparison reference image changes, updating the default position of the locally stored comparison reference image;
h: monitoring (comparison switch);
i: when the comparison switch is turned on, the comparison module executes comparison logic;
j: a comparative reference figure is shown.
In the following, the page processing apparatus provided by the embodiment of the present invention is introduced, and the page processing apparatus described below and the page processing method described above may be referred to correspondingly.
The page processing apparatus can be applied to an electronic device loaded with a browser, and referring to fig. 9a, the page processing apparatus can at least include:
an injection resource module 1 for injecting a comparison reference map to a front-end page; in one example, the injection resource module 1 may be the aforementioned POP page.
And the monitoring display module 2 is used for displaying the front-end page and the injected comparison reference graph in an overlapping mode, wherein at least the comparison reference graph is displayed with set transparency so as to determine whether the front-end page and the comparison reference graph are consistent or not, and the rendering attribute parameters are reset when the front-end page and the comparison reference graph are inconsistent.
A loading module 3, configured to load the reset rendering attribute parameter;
and the rendering module 4 is used for refreshing the front-end page according to the rendering attribute parameters.
For details, please refer to the above description, which is not repeated herein.
In other embodiments of the present invention, the monitor display module 2 in all the embodiments may further be configured to:
and displaying the refreshed front-end page and the injected comparison reference image in an overlapping mode, wherein at least the comparison reference image is displayed with set transparency. For details, please refer to the above description, which is not repeated herein.
In other embodiments of the present invention, the listening display module 2 in all the above embodiments may also be used to adjust the position of the comparison reference diagram.
In one example, the monitoring presentation module 2 may monitor the actions of a mouse or a keyboard of the electronic device, and adjust the position of the reference map according to the actions of the mouse or the keyboard.
For details, please refer to the above description, which is not repeated herein.
In other embodiments of the present invention, referring to fig. 9b, the page processing apparatus in all the embodiments described above may further include a comparison module 5, configured to alternately display the front-end page and the comparison reference map after receiving the comparison instruction.
In other embodiments of the present invention, in terms of injecting the front end page against the reference map, the injection resource module 1 in all the above embodiments can be used to:
injecting design resources;
and storing the design resources to the local to become local resources.
Wherein, the design resource at least includes a URL for comparing the reference map, and further includes: transparency, default position against reference map, and listening to the state of the show switch.
And the state of the monitoring and displaying switch is used for controlling whether the monitoring and displaying module 2 displays the injected comparison reference picture. For details, please refer to the above description, which is not repeated herein.
Accordingly, in the aspect of the comparative reference diagram showing injection in superposition, the listening display module 2 in all the above embodiments can be used for:
searching local resources;
and displaying the comparison reference map corresponding to the URL according to the transparency and the default position of the comparison reference map when the local resource has the URL, the transparency and the default position of the comparison reference map and the monitoring display switch is turned on.
For details, please refer to the above description, which is not repeated herein.
In other embodiments of the present invention, the monitoring display module 2 may further be configured to: after the position of the comparison reference image is adjusted, the current position of the comparison reference image is stored to the local as a default position.
For details, please refer to the above description, which is not repeated herein.
In summary, the page processing apparatus provided in the embodiment of the invention can inject the comparison reference map into the front page, and display the front page and the comparison reference map in an overlapping manner. Wherein, at least the comparison reference image is displayed with set transparency, the front page and the comparison reference image can be displayed simultaneously, the comparison reference image is like a red tracing copybook (background image), and the front page is like transparent thin paper covered on the red tracing copybook. Thus, the two can be compared without measurement. When the two are not consistent, the rendering attribute parameters can be reset to refresh and change the front-end page, and further eliminate the inconsistent place of the front-end page and the comparison reference image. In the process, the traditional mode of 'comparing an airplane model (the airplane model is equivalent to a comparison reference picture) and designing an airplane with the same size on paper' is abandoned, and the copying is carried out similarly to 'covering transparent thin paper (a front end page) on a red copybook (the comparison reference picture'), so that a front end engineer is not required to repeatedly measure comparison parameters. Therefore, the technical scheme provided by the embodiment of the invention removes the work of repeated measurement and comparison of a front-end engineer, so that the front-end development efficiency is greatly increased. Meanwhile, the page processing is more accurate due to the tracing mode, what you see is what you get can be easily realized, and any point of the reference image can be quickly compared and compared. In addition, because measurement is not needed, the labeling work of a designer is removed, so that the designer is concentrated on design instead of measurement labeling, and the efficiency of finishing comparison of reference images is greatly improved.
The embodiment of the present invention further provides an electronic device loaded with a browser, where the electronic device may include the above-mentioned page processing apparatus, and the description of the page processing apparatus may refer to the description of the corresponding part above, which is not described herein again; optionally, the electronic device may be a mobile terminal, a server, a notebook computer, or the like.
Fig. 10 shows a general computer system structure of the electronic device described above.
The computer system may include a bus, processor 101, memory 102, communication interface 103, input device 104, and output device 105. The processor 101, the memory 102, the communication interface 103, the input device 104, and the output device 105 are connected to each other by a bus. Wherein:
a bus may include a path that transfers information between components of a computer system.
The Processor 101 may be a general-purpose Processor, such as a general-purpose Central Processing Unit (CPU), a Network Processor (NP), a microprocessor, etc., or an application-specific integrated circuit (ASIC), or one or more integrated circuits for controlling the execution of the program according to the present invention. But may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components.
The memory 102 stores a program for executing the present invention, and may store an operating system and other application programs. In particular, the program may include program code including computer operating instructions. More specifically, memory 102 may be a read-only memory (ROM), other types of static storage devices that may store static information and instructions, a Random Access Memory (RAM), other types of dynamic storage devices that may store information and instructions, a disk memory, and so forth.
The input device 104 may include means for receiving data and information input by a user, such as a keyboard, mouse, camera, scanner, light pen, voice input device, touch screen, etc.
Output device 105 may include means, such as a display screen, printer, speakers, etc., for allowing information to be output to a user.
The communication interface 103 may include any means for using a transceiver or the like to communicate with other devices or communication networks, such as ethernet, Radio Access Network (RAN), Wireless Local Area Network (WLAN), etc. In addition, the communication interface 103 may further include a GPS/beidou timing locator, and the GPS/beidou timing locator may receive the time service information of the GPS/beidou satellite.
The processor 101 executes the program stored in the memory 102 and invokes other devices, which can be used to implement the page processing method provided by the foregoing embodiment of the present invention, and at least includes the following steps:
injecting a comparison reference picture into the front end page;
displaying the front-end page and the injected comparison reference map in an overlapping mode, wherein at least the comparison reference map is displayed with set transparency so as to determine whether the front-end page and the comparison reference map are consistent or not, and resetting rendering attribute parameters when the front-end page and the comparison reference map are inconsistent;
loading the reset rendering attribute parameters;
and refreshing the front-end page according to the rendering attribute parameters.
For details, please refer to the above description, which is not repeated herein.
In addition, the electronic device may also complete other steps related to the page processing method described in this text method section, and details of each step, which are not described herein again.
The embodiments in the present description are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other.
The principles and embodiments of the present invention have been described herein using specific examples, which are provided only to help understand the method and the core concept of the present invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, the specific embodiments and the application range may be changed. In view of the above, the present disclosure should not be construed as limiting the invention.
Claims (15)
1. The page processing method is characterized by being applied to electronic equipment loaded with a browser, wherein the browser is provided with a picture cutting plug-in; the method comprises the following steps:
displaying a POP page on a front-end page of the browser, wherein the front-end page is a webpage to be developed and jumped to by typing a URL (uniform resource locator) address of the front-end page in an address input field of the browser, and the POP page is a control console provided by the picture cutting plug-in;
acquiring design resources input in the POP page, wherein the design resources at least comprise URLs comparing with reference pictures; the POP page is independent of the front-end page, so that the POP page is not refreshed when the front-end page is refreshed subsequently;
forwarding the design resource to a background page through the POP page, and forwarding the design resource to the front-end page through the background page;
embedding the design resources into the Dom through the front-end page, and displaying a comparison reference graph of the front-end page and the injected design resources in the browser in an overlapping mode; wherein at least the comparison reference map is displayed with a set transparency so that the front page and the comparison reference map are simultaneously visible and distinguishable from each other, so as to determine whether the front page and the comparison reference map are consistent or not, and if not, a rendering attribute parameter is reset, wherein the rendering attribute parameter comprises a line height attribute, a default margin, a font attribute, a font size, a character type and a top margin, and the transparency of the comparison reference map is injected by the POP page;
loading the reset rendering attribute parameters;
and refreshing the front-end page according to the rendering attribute parameters, and re-executing the step of displaying the front-end page and the injected comparison reference map in the browser in an overlapping manner until the front-end page is consistent with the comparison reference map.
2. The method of claim 1, after refreshing the front-end page, further comprising:
superposing and displaying a refreshed front-end page and the injected comparison reference image; at least the comparison reference picture is displayed with a set transparency.
3. The method of claim 2, further comprising:
and adjusting the position of the comparison reference picture.
4. The method of claim 3, further comprising:
and after receiving a comparison instruction, alternately displaying the front-end page and the injected comparison reference image.
5. The method of any one of claims 1-4, further comprising:
and storing the design resources to the local to become local resources.
6. The method of claim 5,
the design resources further include: transparency, comparing default positions of the reference pictures, and monitoring states of the display switches;
the monitoring display switch is in an on or off state, and the monitoring display switch is used for controlling whether the front-end page and the injected comparison reference image are displayed in an overlapped mode.
7. The method of claim 6, wherein the overlay showing the front-end page and the injected comparison reference map comprises:
searching local resources;
when the local resource has the URL, the transparency and the default position of the comparison reference map, and the monitoring display switch is turned on, the comparison reference map corresponding to the URL is displayed according to the transparency and the default position of the comparison reference map.
8. The method of claim 3, after adjusting the position of the comparative reference map, further comprising:
and storing the current position of the comparison reference map as a default position to the local.
9. The page processing device is applied to electronic equipment loaded with a browser, is installed in the browser, and is a cutting insert; the device comprises:
the resource injection module is used for displaying a POP page on a front-end page of the browser, the front-end page is a webpage to be developed which is jumped to by typing a URL (uniform resource locator) address of the front-end page in an address input field of the browser, and the POP page is a console provided by the map cutting plug-in; acquiring design resources input in the POP page, wherein the design resources at least comprise URLs comparing with reference pictures; the POP page is independent of the front-end page, so that the POP page is not refreshed when the front-end page is refreshed subsequently; forwarding the design resource to a background page through the POP page, and forwarding the design resource to the front-end page through the background page; embedding the design resources into the Dom through the front-end page;
the monitoring display module is used for displaying the front-end page and the injected comparison reference image in the browser in an overlapping mode; wherein at least the comparison reference map is displayed with a set transparency so that the front page and the comparison reference map are simultaneously visible and distinguishable from each other, so as to determine whether the front page and the comparison reference map are consistent or not, and if not, a rendering attribute parameter is reset, wherein the rendering attribute parameter comprises a line height attribute, a default margin, a font attribute, a font size, a character type and a top margin, and the transparency of the comparison reference map is injected by the POP page;
the loading module is used for loading the reset rendering attribute parameters;
and the rendering module is used for refreshing the front-end page according to the rendering attribute parameters, so that the monitoring and displaying module re-executes the step of displaying the front-end page and the injected comparison reference image in the browser in an overlapping manner until the front-end page is consistent with the comparison reference image.
10. The apparatus of claim 9, wherein the listening display module is further configured to:
superposing and displaying a refreshed front-end page and the injected comparison reference image; wherein at least the comparison reference picture is displayed with a set transparency.
11. The apparatus of claim 10, wherein the listening display module is further configured to adjust a position of the comparison reference map.
12. The apparatus of claim 11, further comprising:
and the comparison module is used for alternately displaying the front-end page and the comparison reference picture after receiving the comparison instruction.
13. An electronic device characterized by comprising the page processing apparatus of any one of claims 9-12.
14. An electronic device, comprising a processor and a memory:
the memory is used for storing programs;
the processor is configured to call the program to execute the page processing method of any one of claims 1 to 8.
15. A computer-readable storage medium characterized by storing a program for executing the page processing method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610053573.XA CN105740364B (en) | 2016-01-26 | 2016-01-26 | Page processing method and related device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610053573.XA CN105740364B (en) | 2016-01-26 | 2016-01-26 | Page processing method and related device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105740364A CN105740364A (en) | 2016-07-06 |
| CN105740364B true CN105740364B (en) | 2022-04-05 |
Family
ID=56246730
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610053573.XA Active CN105740364B (en) | 2016-01-26 | 2016-01-26 | Page processing method and related device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105740364B (en) |
Families Citing this family (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108563469A (en) * | 2017-10-20 | 2018-09-21 | 五八有限公司 | page loading method, device, storage medium and terminal device |
| CN109977337B (en) * | 2019-02-25 | 2022-08-09 | 北京三快在线科技有限公司 | Webpage design comparison method, device and equipment and readable storage medium |
| CN109960772A (en) * | 2019-03-13 | 2019-07-02 | 北京三快在线科技有限公司 | A kind of method and device identifying front end page design mistake |
| CN112395028B (en) * | 2019-08-15 | 2024-04-30 | 腾讯科技（深圳）有限公司 | Page checking method, device, terminal and storage medium |
| CN111443978A (en) * | 2020-04-17 | 2020-07-24 | 贝壳技术有限公司 | User interface adjusting method and device, storage medium and electronic equipment |
| CN112015416A (en) * | 2020-08-27 | 2020-12-01 | 北京字节跳动网络技术有限公司 | Verification method and device for developing webpage, electronic equipment and computer readable medium |
| CN113778429B (en) * | 2020-09-28 | 2024-10-18 | 北京沃东天骏信息技术有限公司 | Walk-checking method, walk-checking device and storage medium |
| CN112416502A (en) * | 2020-12-04 | 2021-02-26 | 深圳市哈哈丫丫互联网有限公司 | New technology for closing webpage by pressing-number or right-clicking menu in full-screen display mode |
| CN112650483A (en) * | 2020-12-28 | 2021-04-13 | 京东数字科技控股股份有限公司 | Method and device for restoring design draft, computer equipment and storage medium |
| CN113076165A (en) * | 2021-04-16 | 2021-07-06 | 北京沃东天骏信息技术有限公司 | Page checking method and device |
| CN113377475B (en) * | 2021-06-22 | 2024-04-09 | 北京字节跳动网络技术有限公司 | Content display method and terminal equipment |
| CN114048707A (en) * | 2021-11-17 | 2022-02-15 | 北京字跳网络技术有限公司 | Information processing method, device, terminal and storage medium |
Family Cites Families (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN2072481U (en) * | 1990-04-19 | 1991-03-06 | 金正虎 | Hand control intelligence drawing board |
| CN2544364Y (en) * | 2002-03-14 | 2003-04-09 | 赵旭 | A learning machine for early childhood education |
| US7255351B2 (en) * | 2002-10-15 | 2007-08-14 | Shuffle Master, Inc. | Interactive simulated blackjack game with side bet apparatus and in method |
| US7309065B2 (en) * | 2002-12-04 | 2007-12-18 | Shuffle Master, Inc. | Interactive simulated baccarat side bet apparatus and method |
| CN101321240B (en) * | 2008-06-25 | 2010-06-09 | 华为技术有限公司 | Method and device for multi-layer overlay |
| US20100110368A1 (en) * | 2008-11-02 | 2010-05-06 | David Chaum | System and apparatus for eyeglass appliance platform |
| JP2011243146A (en) * | 2010-05-21 | 2011-12-01 | Fujifilm Corp | Relay server and its program, web site browsing system, web site browsing method, and application program |
| CN102799672A (en) * | 2012-07-17 | 2012-11-28 | 厦门游家网络有限公司 | Method for extracting jpg pictures and mp3 files in batch from swf files |
| CN102902781B (en) * | 2012-09-28 | 2015-08-05 | 五八有限公司 | Webpage decoration method for pushing and device |
| CN102968805A (en) * | 2012-10-14 | 2013-03-13 | 安科智慧城市技术（中国）有限公司 | Picture superposition method and system |
| CN103268624A (en) * | 2013-05-09 | 2013-08-28 | 四三九九网络股份有限公司 | Method and device for generating animation with high-efficiency |
| CN104123155B (en) * | 2014-07-04 | 2017-10-17 | 北京思特奇信息技术股份有限公司 | A kind of operation system page layer development platform and method based on WEB |
| CN104123742A (en) * | 2014-07-21 | 2014-10-29 | 徐才 | Method and player for translating static cartoon picture into two dimensional animation |
| CN104504090B (en) * | 2014-12-26 | 2018-02-13 | 北京奇虎科技有限公司 | The treating method and apparatus of image in a kind of webpage |
| CN105094804B (en) * | 2015-06-18 | 2019-04-26 | 北京奇虎科技有限公司 | Method and device for adding animation in page |
| CN105183887A (en) * | 2015-09-28 | 2015-12-23 | 北京奇虎科技有限公司 | Data processing method based on browser and browser device |
-
2016
- 2016-01-26 CN CN201610053573.XA patent/CN105740364B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN105740364A (en) | 2016-07-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105740364B (en) | Page processing method and related device | |
| CN109643212B (en) | 3D document editing system | |
| CA2937702C (en) | Emphasizing a portion of the visible content elements of a markup language document | |
| US9507519B2 (en) | Methods and apparatus for dynamically adapting a virtual keyboard | |
| US10366147B2 (en) | Techniques for programmatic magnification of visible content elements of markup language documents | |
| TWI700638B (en) | Display method and device of mixed view | |
| Fielding | Beginning responsive web design with HTML5 and CSS3 | |
| RU2662632C2 (en) | Presenting fixed format documents in reflowed format | |
| US10614156B1 (en) | System and method for using a dynamic webpage editor | |
| CN104657451B (en) | The processing method and processing device of the page | |
| Gasston | The modern Web: multi-device Web development with HTML5, CSS3, and JavaScript | |
| US20140223281A1 (en) | Touch Input Visualizations | |
| CN111611037B (en) | View object processing method for electronic book, electronic device and storage medium | |
| CN107533568B (en) | System and method for determining application zoom level | |
| CN111291533B (en) | Sentence segment to be displayed display method and device, computer equipment and storage medium | |
| US9158743B1 (en) | Grid layout control for network site design | |
| Grannell | The essential guide to CSS and HTML web design | |
| CN119166919A (en) | Internet page positioning method, device and electronic device | |
| Simmons | Instant responsive web design | |
| KR20230080060A (en) | Web page building system and method providing fake rendering | |
| Kyrnin | Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours | |
| CN118227250B (en) | Toolbar display method and device in page, computer equipment and storage medium | |
| Mohamed et al. | Responsive web design inFluid grid concept literature survey | |
| Storey | Pro CSS3 Animation | |
| Firdaus et al. | HTML5 and CSS3: Building Responsive Websites |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |