CN105138324A - Plug-in-based browser rendering method and system - Google Patents
Plug-in-based browser rendering method and system Download PDFInfo
- Publication number
- CN105138324A CN105138324A CN201510484047.4A CN201510484047A CN105138324A CN 105138324 A CN105138324 A CN 105138324A CN 201510484047 A CN201510484047 A CN 201510484047A CN 105138324 A CN105138324 A CN 105138324A
- Authority
- CN
- China
- Prior art keywords
- plug
- browser
- frame
- unit
- playing
- 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.)
- Pending
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses plug-in-based browser rendering method and system. The method comprises the following steps: when a browser page invokes a plug-in, receiving introduced parameter information; extracting a type value in the parameter information, and determining corresponding pop-up box type according to the type value, and generating a demo structure of the pop-up box type correspondingly; adding data information to the demo structure of the pop-up box type according to data information in the parameter information, and transmitting the demo structure added with the data information to a browser; and rendering the demo structure added with the data information by the browser, and displaying the rendered pop-up box on the browser page. According to the method disclosed by the invention, aiming at different application projects, different types of pop-up boxes can be achieved through the plug-in; the pop-up box does not need to be compiled for each type; code redundancy is solved; and the workload of a developer is reduced.
Description
Technical field
The present invention relates to Computer Applied Technology field, be specifically related to a kind of browser renders method and system based on plug-in unit.
Background technology
Indispensable at any one project frame of being hit by a bullet, when page warning, friendly prompting, various agreement, the page load slow, animation having alleviation etc. bullet frame is seen everywhere.If kind more than 10 also wanted by a bullet frame of writing of each type.Same type repeat replication, not only add workload but also code, demo structure, css file many places be copied to project and cause a lot of code redundancies.
Summary of the invention
Technical matters to be solved by this invention is to provide a kind of browser renders method and system based on plug-in unit, can solve the problem for the code redundancy that every type all writes a bullet frame and cause.
The technical scheme that the present invention solves the problems of the technologies described above is as follows:
On the one hand, the invention provides a kind of browser renders method based on plug-in unit, described method comprises:
S1, when browser page calls plug-in unit, receive browser page and import the parameter information of described plug-in unit into;
S2, the type value extracted in described parameter information, determine corresponding bullet box type according to described type value, and generate the corresponding demo structure playing box type;
S3, according to the data message in described parameter information, add data message in the demo structure of described bullet box type, and the demo structure being added with data message is passed to browser;
S4, browser according to described in be added with data message demo structure carry out playing up of corresponding bullet frame, and the bullet frame after playing up to be shown at browser page.
On the other hand, the invention provides a kind of browser renders system based on plug-in unit, described system comprises plug-in unit and browser;
Described plug-in unit comprises:
Parameter information receiver module, for when browser page calls plug-in unit, receives the parameter information that browser page imports plug-in unit into;
Extraction module, for extracting the type value in described parameter information;
Play box type determination module, for determining corresponding bullet box type according to described type value;
Demo structural generation module, for generating the corresponding demo structure playing box type;
Data add module, for according to the data message in described parameter information, in the demo structure of described bullet box type, add data message;
Transmit module, for the demo structure being added with data message is passed to browser;
Described browser comprises:
Rendering module, the demo structure for being added with data message described in basis carries out playing up of corresponding bullet frame;
Play frame display module, for being shown at browser page by the bullet frame after playing up.
A kind of browser renders method and system based on plug-in unit provided by the invention, for different application items, browser page only needs call plug-in unit and import parameter information into plug-in unit, parameter information that plug-in unit can import into according to browser page generates the demo structure of corresponding types bullet frame and the data message added in demo structure in parameter information, browser carries out playing up of corresponding bullet frame according to the demo structure being added with data message, for different application items, dissimilar bullet frame is realized by plug-in unit, and do not need to play frame for every type writes one, solve code redundancy, save the workload of developer.
Accompanying drawing explanation
Fig. 1 is a kind of browser renders method flow diagram based on plug-in unit of the embodiment of the present invention one;
Fig. 2 is the whole workflow diagram of a kind of browser renders based on plug-in unit of the embodiment of the present invention one;
Fig. 3 is that the embodiment of the present invention one is hit by a bullet frame for confirming frame schematic diagram;
Fig. 4 is the embodiment of the present invention one frame of being hit by a bullet is prompting frame schematic diagram;
Fig. 5 is the embodiment of the present invention one frame of being hit by a bullet is protocol contents bullet frame schematic diagram;
Fig. 6 is a kind of browser renders system schematic based on plug-in unit of the embodiment of the present invention two.
Embodiment
Be described principle of the present invention and feature below in conjunction with accompanying drawing, example, only for explaining the present invention, is not intended to limit scope of the present invention.
Embodiment one, a kind of browser renders method based on plug-in unit.Below in conjunction with Fig. 1-Fig. 5, the method that the present embodiment provides is described in detail.
In Fig. 1, S1, when browser page calls plug-in unit, receives the parameter information that browser page imports described plug-in unit into.
Concrete, in a lot of application item, various bullet frame is indispensable, such as, page warning, friendly prompting, various agreement (such as, bank agreements) and page loading velocity have the icon animation etc. of alleviation all to need to realize with bullet frame time slow.Prior art is that every type is all write a corresponding bullet frame and carried out exhibition information, if type is a lot, then the bullet frame write also can be a lot; And the same type bullet frame of disparity items also can repeat replication, add developer workload and write code, demo structure, CSS (CascadingStyleSheets, CSS (cascading style sheet)) file many places be copied to project and cause a lot of code redundancies.Therefore, the present embodiment devises a kind of plug-in unit based on browser, and browser page can directly call this plug-in unit, and transmit necessary parameter information when calling this plug-in unit to plug-in unit, plug-in unit receives this parameter information.Wherein, the parameter information that browser page transmits in plug-in unit at least comprises type value (namely playing box type parameter value), data message and the style information corresponding with data message, such as, data message comprises Word message, icon type information and button information, wherein Word message comprises the heading message playing frame, the business function information playing frame and text prompt information, style information comprises color, the word style and word size of Word message, and the color of button, needs the color of word and the word shown in button.Bullet box type corresponding to (playing box type parameter value) type value in the parameter information imported into plug-in unit for browser page is below that prompting frame illustrates that the parameter information code that browser page imports in plug-in unit is as follows:
Wherein, A, Type:1 page loads progress bar
Type:2 ejects and confirms frame
Type:3 prompting frame
Type:4 recalls to outside rear automatic closedown progress bar, protocol contents bullet frame
Type:5 changes bullet width of frame and height
B, info are heading message
C, title are business function information
D, text are prompt text
E, ok are the method that confirming button performs
F, cancle are the method on cancel button
G, tag--zq be successfully, cw be unsuccessfully, tx information, yw be query, ywsmall is bunny icon
H, btntext1 are orange button text, btntext1 is gray button word
I, ok1 call back function does not perform closedown.
It should be noted that, in the present embodiment, browser page is in the process calling plug-in unit, browser page is with HTML (HypertextMarkupLanguage, HTML (Hypertext Markup Language)) form of label is to plug-in unit Transfer Parameters information, wherein, the parameter information of transmission is JSON (JavaScriptObjectNotation) string parameter.The present embodiment supports IE6 (+), the major browsers such as FF3.6+, Opera9+, Chrome9+360.
Type value in S2, extracting parameter information, determines corresponding bullet box type according to type value, and generates the corresponding demo structure playing box type.
Concrete, aforementioned plug-in unit receives the parameter information that browser page transmits in plug-in unit, and from parameter information, extract type value, determines corresponding bullet box type according to this type value.In the present embodiment, play box type at least to comprise progress bar, confirm frame (as Fig. 3), prompting frame (as Fig. 4), close progress bar and protocol contents bullet frame (as Fig. 5).
See Fig. 2, the bullet frame of each bullet box type parameter value (i.e. type value) the corresponding type in parameter information, such as, and type=1, progress bar, namely the page loads; Type=2, confirms frame; Type=3, prompting frame; Type=4, closes progress bar or protocol contents bullet frame; Type=5, plays frame size adjustable; Type=6, pure version bullet frame, namely plays frame self without any content.Certainly, be not limited to these and play box type, the bullet frame of other type can also be configured.
Subsequently, plug-in unit, according to the bullet box type determined, generates the corresponding demo structure playing box type, namely generates the bullet circle shelf structure of respective type.
It should be noted that, if browser page to be hit by a bullet box type parameter value type=4 to the parameter information that plug-in unit imports into, and be defined as playing frame for closing progress bar, then close this bullet frame.
S3, according to the data message in described parameter information, add data message in the demo structure of described bullet box type, and the demo structure being added with data message is passed to browser.
Concrete, according to the data message in the parameter information that plug-in unit receives, in the demo structure of the correspondence bullet frame generated, add data message, form the demo structure being added with the correspondence bullet frame of data message, and the demo structure this with data message passes to browser.
S4, browser according to described in be added with data message demo structure play up, and the bullet frame after playing up to be shown at browser page.
Concrete, browser receives the demo structure with data message of plug-in unit transmission, plays up, and shown at browser page by the bullet frame after playing up according to the bullet frame of demo structure to correspondence.To the process that bullet frame is played up be specifically: (comprise the color of Word message according to the style information in aforementioned parameters information, word style and word size, and the color of button, the color of word and the word shown is needed) in button, CSS (CascadingStyleSheets subsidiary in plug-in unit, lamination style sheet) add pattern title in file, browser adopts according to the demo structure being added with data message and plays up corresponding bullet frame with pattern corresponding with pattern title in CSS file, and can according to the bullet frame size parameter in aforementioned parameters information, dynamic conditioning is carried out to the size playing frame, the height and width comprised playing frame adjusts.Bullet frame after playing up is shown at browser page by last browser.Can be prompting frame after corresponding with above-mentioned code playing up see Fig. 4, Fig. 4.
Embodiment two, a kind of browser renders system based on plug-in unit.Below in conjunction with Fig. 6, the system that the present embodiment provides is described in detail.
See Fig. 6, the system that the present embodiment provides comprises plug-in unit 10 and browser 20 wherein, plug-in unit 10 comprises parameter information receiver module 101, extraction module 102, bullet box type determination module 103, demo structural generation module 104, data interpolation module 105 and transmits module 106, and browser 20 comprises rendering module 201, plays frame size adjusting module 202 and play frame display module 203.Parameter information receiver module 101 in plug-in unit 10 is mainly used in when browser page calls plug-in unit, receives the parameter information that browser page imports this plug-in unit into.
Concrete, browser page can directly call this plug-in unit, and transmit necessary parameter information when calling this plug-in unit to plug-in unit, the parameter information receiver module 101 in plug-in unit 10 receives this parameter information.Wherein, the parameter information that browser page transmits in plug-in unit at least comprises type value (namely playing box type parameter value), data message and the style information corresponding with data message, such as, data message comprises Word message, icon type information and button information, wherein Word message comprises the heading message playing frame, the business function information playing frame and text prompt information, style information comprises color, the word style and word size of Word message, and the color of button, needs the color of word and the word shown in button.
Extraction module 102, is mainly used in the type value in extracting parameter information.
Play box type determination module 103 to be mainly used in determining corresponding bullet box type according to type value.
Demo structural generation module 104 is mainly used in generating the corresponding demo structure playing box type.
Concrete, the parameter information that browser page transmits in plug-in unit is received at parameter information receiver module 101, extraction module 20 extracts type value (namely playing box type parameter value) from the parameter information that parameter information receiver module 101 receives, play box type determination module 103 and determine corresponding bullet box type according to this type value, demo structural generation module 104 generates the corresponding demo structure playing box type.
Data are added module 105 and are mainly used according to the data message in parameter information, in the demo structure of described bullet box type, add data message.
Transmit module 106 to be mainly used in the demo structure being added with data message to pass to browser 20.
The bullet frame of the demo structure being added with data message to correspondence that rendering module 201 in browser 20 is mainly used according to transmitting module 106 transmission is played up.
Playing frame size adjusting module 202 is mainly used according to the bullet frame size parameter in parameter information, can carry out dynamic conditioning in the process played up to the size playing frame, and the height and width comprised playing frame adjusts.
Play frame display module 203 to be mainly used in the bullet frame after playing up to show at browser page.
Concrete, browser 20 receives the demo structure with data message that the transmission module 106 in plug-in unit 10 is transmitted, rendering module 201 is played up according to the bullet frame of demo structure to correspondence, plays frame display module 203 and is shown at browser page by the bullet frame after playing up.To the process that bullet frame is played up be specifically: plug-in unit 10 (comprises the color of Word message according to the style information in aforementioned parameters information, word style and word size, and the color of button, the color of word and the word shown is needed) in button, CSS (CascadingStyleSheets subsidiary in plug-in unit 10, lamination style sheet) add pattern title in file, rendering module 201 in browser 20 adopts according to the demo structure being added with data message and plays up corresponding bullet frame with pattern corresponding with pattern title in CSS file, in the process played up, playing frame size adjusting module 202 can according to the bullet frame size parameter in aforementioned parameters information, dynamic conditioning is carried out to the size playing frame, the height and width comprised playing frame adjusts.Finally play frame display module 203 the bullet frame after playing up is shown at browser page.
A kind of browser renders method and system based on plug-in unit provided by the invention, for different application items, browser page only needs call plug-in unit and import parameter information into plug-in unit, parameter information that plug-in unit can import into according to browser page generates the demo structure of corresponding types bullet frame and the data message added in demo structure in parameter information, browser is played up bullet frame according to the demo structure being added with data message, for different application items, dissimilar bullet frame is generated by plug-in unit, and do not need to play frame for every type writes one, solve code redundancy, save the workload of developer.
The foregoing is only preferred embodiment of the present invention, not in order to limit the present invention, within the spirit and principles in the present invention all, any amendment done, equivalent replacement, improvement etc., all should be included within protection scope of the present invention.
Claims (10)
1., based on a browser renders method for plug-in unit, it, for playing up polytype bullet frame, is characterized in that, described method comprises:
S1, when browser page calls plug-in unit, receive browser page and import the parameter information of described plug-in unit into;
S2, the type value extracted in described parameter information, determine corresponding bullet box type according to described type value, and generate the corresponding demo structure playing box type;
S3, according to the data message in described parameter information, in the demo structure of described bullet box type, add data message, and the demo structure being added with data message is passed to browser;
S4, browser according to described in be added with data message demo structure carry out correspondingly playing playing up of frame, and the bullet frame after playing up to be shown at browser page.
2. as claimed in claim 1 based on the browser renders method of plug-in unit, it is characterized in that, the bullet box type that in described step S2, type value is corresponding at least comprises progress bar, confirms frame, prompting frame, closedown progress bar and protocol contents bullet frame.
3. as claimed in claim 1 based on the browser renders method of plug-in unit, it is characterized in that, data message in described step S3 comprises Word message, icon type and button, and wherein Word message comprises the heading message playing frame, the business function information playing frame and text prompt information.
4. as claimed in claim 3 based on the browser renders method of plug-in unit, it is characterized in that, described parameter information also comprises style information, and described style information comprises color, the word style and word size of Word message, and the color of button, needs the color of word and the word shown in button.
5., as claimed in claim 4 based on the browser renders method of plug-in unit, it is characterized in that, according to described style information, add pattern title in CSS file subsidiary in plug-in unit, described step S4 specifically comprises:
Browser according to described in be added with data message demo structure adopt the pattern corresponding with described pattern title in CSS file to play up, and the bullet frame after playing up to be shown at browser page.
6. the browser renders method based on plug-in unit as described in claim 1 to 5, is characterized in that, according to the bullet frame size parameter in described parameter information, can carry out dynamic conditioning to the size playing frame, the height and width comprised playing frame adjusts.
7., as claimed in claim 1 based on the browser renders method of plug-in unit, it is characterized in that, described browser page transmits described parameter information with the form of html tag to plug-in unit, and described parameter information is JSON string parameter.
8. based on a browser renders system for plug-in unit, it is characterized in that, described system comprises plug-in unit and browser;
Described plug-in unit comprises:
Parameter information receiver module, for when browser page calls plug-in unit, receives the parameter information that browser page imports plug-in unit into;
Extraction module, for extracting the type value in described parameter information;
Play box type determination module, for determining corresponding bullet box type according to described type value;
Demo structural generation module, for generating the corresponding demo structure playing box type;
Data add module, for according to the data message in described parameter information, in the demo structure of described bullet box type, add data message;
Transmit module, for the demo structure being added with data message is passed to browser;
Described browser comprises:
Rendering module, the demo structure for being added with data message described in basis carries out playing up of corresponding bullet frame;
Play frame display module, for being shown at browser page by the bullet frame after playing up.
9. as claimed in claim 8 based on the browser renders system of plug-in unit, it is characterized in that, the bullet box type of described type value correspondence at least comprises progress bar, confirms frame, prompting frame, closedown progress bar and protocol contents bullet frame.
10., as claimed in claim 8 based on the browser renders system of plug-in unit, it is characterized in that, described browser also comprises:
Play frame size adjusting module, for according to the bullet frame size parameter in described parameter information, carry out dynamic conditioning to the size playing frame, the height and width comprised playing frame adjusts.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510484047.4A CN105138324A (en) | 2015-08-07 | 2015-08-07 | Plug-in-based browser rendering method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510484047.4A CN105138324A (en) | 2015-08-07 | 2015-08-07 | Plug-in-based browser rendering method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN105138324A true CN105138324A (en) | 2015-12-09 |
Family
ID=54723682
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510484047.4A Pending CN105138324A (en) | 2015-08-07 | 2015-08-07 | Plug-in-based browser rendering method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105138324A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110263287A (en) * | 2019-06-24 | 2019-09-20 | 北京字节跳动网络技术有限公司 | Page rendering method and apparatus |
| CN111223167A (en) * | 2019-12-30 | 2020-06-02 | 北京明略软件系统有限公司 | Method and device for managing electronic map |
| CN111553973A (en) * | 2020-05-19 | 2020-08-18 | 北京数字绿土科技有限公司 | Plug-in type point cloud color rendering method and device and computer storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080281564A1 (en) * | 2004-07-08 | 2008-11-13 | International Business Machines Corporation | System, method and program product for forecasting the demand on computer resources |
| CN102194003A (en) * | 2011-05-26 | 2011-09-21 | 重庆猪八戒网络有限公司 | Web page popup window method and device |
| CN103034721A (en) * | 2012-12-13 | 2013-04-10 | 北京奇虎科技有限公司 | Message display client side and message display method |
| CN104035984A (en) * | 2014-05-29 | 2014-09-10 | 北京奇虎科技有限公司 | Method for blocking popup windows in browser and device for blocking popup windows |
-
2015
- 2015-08-07 CN CN201510484047.4A patent/CN105138324A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080281564A1 (en) * | 2004-07-08 | 2008-11-13 | International Business Machines Corporation | System, method and program product for forecasting the demand on computer resources |
| CN102194003A (en) * | 2011-05-26 | 2011-09-21 | 重庆猪八戒网络有限公司 | Web page popup window method and device |
| CN103034721A (en) * | 2012-12-13 | 2013-04-10 | 北京奇虎科技有限公司 | Message display client side and message display method |
| CN104035984A (en) * | 2014-05-29 | 2014-09-10 | 北京奇虎科技有限公司 | Method for blocking popup windows in browser and device for blocking popup windows |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110263287A (en) * | 2019-06-24 | 2019-09-20 | 北京字节跳动网络技术有限公司 | Page rendering method and apparatus |
| CN111223167A (en) * | 2019-12-30 | 2020-06-02 | 北京明略软件系统有限公司 | Method and device for managing electronic map |
| CN111553973A (en) * | 2020-05-19 | 2020-08-18 | 北京数字绿土科技有限公司 | Plug-in type point cloud color rendering method and device and computer storage medium |
| CN111553973B (en) * | 2020-05-19 | 2021-03-16 | 北京数字绿土科技有限公司 | Plug-in type point cloud color rendering method and device and computer storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101706821B (en) | Tag-based mobile internet page design system and method | |
| CN105518614B (en) | Method, equipment and the computer-readable medium of screen recording for multi-screen application program | |
| CN102043626B (en) | Method and device for encapsulating extjs component, and method and system for generating user interface | |
| CN104484171A (en) | System, method and associated equipment for designing terminal interface | |
| CN104572084B (en) | User interface generation and data distributing method, device in card business | |
| CN107329861A (en) | A kind of multiplex roles method of testing and device | |
| CN104714982A (en) | Method and system for loading webpage | |
| CN102194003A (en) | Web page popup window method and device | |
| CN102263705A (en) | Method and device for displaying IM (instant messaging) messages | |
| CN105138324A (en) | Plug-in-based browser rendering method and system | |
| CN106651228A (en) | Method, device and system for querying logistics tracking information | |
| US9201851B2 (en) | Methods and apparatus for in-line editing of web page content stored in multiple data stores | |
| CN107341167A (en) | Help the user interface of the management of the formatting of digital content | |
| CN105027116A (en) | Flat book to rich book conversion in e-readers | |
| CN107479873A (en) | A kind of APP page modules melt forwarding method, electronic equipment and storage medium | |
| US20170063961A1 (en) | Systems and methods to consistently generate web content | |
| CA2834474C (en) | Browsing system, terminal, image server, program, computer-readable recording medium recording said program, and method | |
| CN101645090A (en) | Page display method, server and network system | |
| WO2017040440A1 (en) | Enhanced document services | |
| CN104156421B (en) | The page shows method, apparatus and system | |
| CN103092479B (en) | A kind of methods, devices and systems by right button transitional information | |
| US20070266315A1 (en) | System and method for creating and presenting mathematical documents | |
| EP3491536A1 (en) | Scalable vector graphics bundles | |
| CN108243174A (en) | Online living broadcast interactive system and method | |
| CN108241604A (en) | A kind of interactive editor's method and its device for realizing La Taihe form formula |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20151209 |