CN104598465A - Method and device for realizing embedded address bar of browser - Google Patents

Method and device for realizing embedded address bar of browser Download PDF

Info

Publication number
CN104598465A
CN104598465A CN201310529557.XA CN201310529557A CN104598465A CN 104598465 A CN104598465 A CN 104598465A CN 201310529557 A CN201310529557 A CN 201310529557A CN 104598465 A CN104598465 A CN 104598465A
Authority
CN
China
Prior art keywords
html
address bar
preset
browser
embedded
Prior art date
Application number
CN201310529557.XA
Other languages
Chinese (zh)
Other versions
CN104598465B (en
Inventor
舒玉强
Original Assignee
腾讯科技(深圳)有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 腾讯科技(深圳)有限公司 filed Critical 腾讯科技(深圳)有限公司
Priority to CN201310529557.XA priority Critical patent/CN104598465B/en
Publication of CN104598465A publication Critical patent/CN104598465A/en
Application granted granted Critical
Publication of CN104598465B publication Critical patent/CN104598465B/en

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions

Abstract

The invention is suitable for the technical field of browsers, and provides a method and a device for realizing an embedded address bar of the browser. The method comprises the following steps: when an HTML (Hypertext Markup Language) of a webpage is loaded, inserting a preset HTML into the HTML of the webpage, wherein the preset HTML is used for displaying the address bar in the webpage; analyzing the preset HTML, and creating a DOM (Document Object Model) node corresponding to a label in the preset HTML; according to the created DOM node, creating a Render node corresponding to the label in the preset HTML; and drawing each created Render node to embed the address bar in the webpage. When a relevant page operation is related, the browser does not need to process the embedded address bar, so that the workload of development is greatly lightened, and development efficiency is improved.

Description

一种浏览器内嵌地址栏的实现方法及装置 One of the browsers embedded implementation method and device address bar

技术领域 FIELD

[0001] 本发明属于浏览器技术领域,尤其涉及一种浏览器内嵌地址栏的实现方法及装置。 [0001] The present invention belongs to the technical field of the browser, the embedded browser particularly to a method and apparatus implemented in the address bar.

背景技术 Background technique

[0002] 内嵌地址栏是一种特殊的浏览器地址栏,其并非传统的独立于页面的一个浏览器组件,而是内嵌在页面中,被视为页面的一部分。 [0002] embedded in the address bar is a special browser address bar, it is not a traditional independent of the browser page of a component, but embedded in the page, is considered part of the page. 目前浏览器的内嵌地址栏均是基于用户界面(User Interface,UI)控件来实现的,通过将页面的显示区域向下推动,由内嵌地址栏占据一部分原本属于页面的位置,从而在视觉上实现地址栏的内嵌。 Currently embedded address bar of the browser are based user interface (User Interface, UI) controls to achieve, by pushing down the page display area, part of the location originally belonged to the page by the embedded address bar to occupy, so visual the realization of embedded address bar.

[0003] 然而,由于部分浏览器内核(例如webkit内核)无法感知到通过UI控件来实现的内嵌地址栏的存在,当涉及到页面滚动等操作时,都需要额外对内嵌地址栏进行处理,导致整个开发过程工作量增加,开发效率降低。 [0003] However, since part of the browser kernel (such as webkit kernel) can not sense the presence of the embedded address bar achieved through the UI controls, when it comes to page scrolling and other operations, require additional processing to the embedded address bar , leading to increased workload of the entire development process, reduce development efficiency.

发明内容 SUMMARY

[0004] 本发明实施例的目的在于提供一种浏览器内嵌地址栏的实现方法,旨在解决现有的浏览器内嵌地址栏的实现办法容易导致开发过程工作量增加,开发效率降低的问题。 [0004] The object of embodiments of the present invention to provide a method for implementing embedded browser address bar, to achieve a way to solve the conventional embedded browser address bar easily lead to increase in workload of the development process, the development efficiency is reduced problem.

[0005] 本发明实施例是这样实现的,一种浏览器内嵌地址栏的实现方法,包括: [0005] Example embodiments of the present invention is implemented as a browser address bar embedded implemented method, comprising:

[0006] 当载入网页的超文本标记语言时,在所述网页的超文本标记语言中插入预置的超文本标记语言,所述预置的超文本标记语言用于在所述网页中显示地址栏; [0006] When the loaded HTML web page, the web page HTML insert HTML preset, the preset HTML for displaying the webpage Address Bar;

[0007] 解析所述预置的超文本标记语言,创建与所述预置的超文本标记语言中的标签对应的文件对象模型节点; [0007] The document object model nodes of the parse HTML preset, the preset create hypertext markup language tags corresponding;

[0008] 根据创建的所述文件对象模型节点,创建与所述预置的超文本标记语言中的标签对应的渲染节点; [0008] The document object model to the created node, create a label corresponding to the node and the preset rendering HTML in;

[0009] 绘制创建的每个所述渲染节点,以在网页中内嵌所述地址栏。 [0009] each render node rendering created, embedded in a web page to the address bar.

[0010] 本发明实施例的另一目的在于提供一种浏览器内嵌地址栏的实现装置,包括: [0010] Another object of an embodiment of the present invention to provide a device for implementing the embedded browser address bar, comprising:

[0011] 插入单元,用于当载入网页的超文本标记语言时,在所述网页的超文本标记语言中插入预置的超文本标记语言,所述预置的超文本标记语言用于在所述网页中显示地址栏; [0011] inserting unit, configured to, when loaded HTML web page, insert a preset HTML of the web page in hypertext markup language, the Hypertext Markup Language preset for the address bar of the web page;

[0012] 第一创建单元,用于解析所述预置的超文本标记语言,创建与所述预置的超文本标记语言中的标签对应的文件对象模型节点; Document Object Model node [0012] a first creating unit configured to parse the HTML preset, the preset create hypertext markup language tags corresponding;

[0013] 第二创建单元,用于根据创建的所述文件对象模型节点,创建与所述预置的超文本标记语言中的标签对应的渲染节点; Render node corresponding to the tag [0013] a second creating unit configured to create a document object model nodes to create the preset in HTML;

[0014] 显示单元,用于绘制创建的每个所述渲染节点,以在网页中内嵌所述地址栏。 [0014] a display unit for rendering each of said nodes draw created inline in the page address bar.

[0015] 在本发明实施例中,通过HTML的方式来实现浏览器对内嵌地址栏的加载与显示,同时,在浏览器内预置相应的解析功能,使得浏览器能够成功地对用于显示内嵌地址栏的HTML中新扩充的标签进行解析,通过上述方式,当涉及到相关页面操作时,浏览器无需额外对内嵌地址栏进行处理,由此大大地减轻了开发工作量,提高了开发效率。 [0015] In an embodiment of the present invention, implemented by HTML browser address bar embedded manner of loading the display, while the corresponding pre-analysis functions within the browser, so that the browser can be successfully used for HTML display embedded in the address bar of a new expanded label parsing, when it comes to operating the relevant page, the browser address bar to the embedded without additional processing by the above-mentioned manner, thereby greatly reducing the development effort and improve the development efficiency.

附图说明 BRIEF DESCRIPTION

[0016] 图1是本发明实施例提供的浏览器内嵌地址栏的实现方法的实现流程图; [0016] FIG. 1 is a flow chart for implementing embodiments provide implementation embedded browser address bar of the embodiment of the present invention;

[0017] 图2是本发明实施例提供的S102生成的继承关系示意图; [0017] FIG. 2 is a schematic diagram inheritance S102 generated according to an embodiment of the present invention;

[0018] 图3是本发明实施例提供的S102生成的DOM树示意图; [0018] FIG. 3 is a schematic diagram S102 generated DOM tree according to an embodiment of the present invention;

[0019] 图4是本发明实施例提供的S103生成的继承关系示意图; [0019] FIG. 4 is a schematic diagram inheritance S103 generated according to an embodiment of the present invention;

[0020] 图5是本发明实施例提供的S103生成的Render树示意图; [0020] FIG. 5 is a schematic diagram S103 Render tree generated according to an embodiment of the present invention;

[0021] 图6是本发明另一实施例提供的浏览器内嵌地址栏的实现方法的实现流程图; [0021] FIG. 6 is a flow chart for implementing embodiments provide implementation embedded browser address bar according to another embodiment of the present invention;

[0022] 图7是本发明另一实施例提供的浏览器内嵌地址栏的实现方法的实现流程图; [0022] FIG. 7 is a flow chart for implementing embodiments provide implementation embedded browser address bar according to another embodiment of the present invention;

[0023] 图8是本发明实施例提供的浏览器内嵌地址栏的实现方法S107的具体实现流程图; [0023] FIG 8 is a flow chart for implementing specific embodiments provided by the embedded browser address bar S107 implementation of the present invention;

[0024] 图9是本发明实施例提供的浏览器内嵌地址栏的实现装置的结构框图。 [0024] FIG. 9 is a block diagram of the embodiment provide means to realize the embedded browser address bar of the embodiment of the present invention.

具体实施方式 Detailed ways

[0025] 为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。 [0025] To make the objectives, technical solutions and advantages of the present invention will become more apparent hereinafter in conjunction with the accompanying drawings and embodiments of the present invention will be further described in detail. 应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。 It should be understood that the specific embodiments described herein are only intended to illustrate the present invention and are not intended to limit the present invention.

[0026] 在本发明实施例中,通过超文本标记语言(Hypertext Markup Language,HTML)的方式来实现浏览器对内嵌地址栏的加载与显示,同时,在浏览器内预置相应的解析功能,使得浏览器能够成功地对用于显示内嵌地址栏的HTML中新扩充的标签进行解析,通过上述方式,当涉及到相关页面操作时,浏览器无需额外对内嵌地址栏进行处理,由此大大地减轻了开发工作量,提高了开发效率。 [0026] In an embodiment of the present invention, is achieved by the browser HTML (Hypertext Markup Language, HTML) on the way the column loading the embedded address and the display, while the corresponding pre-analysis function within the browser so that the browser can successfully address bar embedded HTML for display in a new expanded label parsing, when it comes to operating the relevant page, the browser address bar to the embedded without additional processing by the manner described above, by the this greatly reduces the development effort and improve development efficiency.

[0027] 图1示出了本发明实施例提供的浏览器内嵌地址栏的实现方法的实现流程,详述如下: [0027] FIG. 1 shows the present invention provides a method to realize the embedded browser address bar implementation process embodiments, as detailed below:

[0028] 在SlOl中,当载入网页的HTML时,在所述网页的HTML中插入预置的HTML,所述预置的HTML用于在所述网页中显示地址栏。 [0028] In SlOl, when loaded HTML web page, the HTML of the web page HTML inserted preset, the preset address bar for displaying HTML in the web page.

[0029] 当浏览器需要加载网页时,首先获取并载入该网页的HTML,从而启动浏览器的解析功能,对该网页的HTML进行解析。 [0029] When the browser to load the page, first obtain and load HTML of the page to initiate parsing browser parses the HTML page. 而在本实施例中,在载入网页的HTML之后,对网页的HTML进行解析之前,浏览器会在该网页的HTML中插入一段预置的HTML,以使该预置的HTML作为该网页的HTML的一部分,一同进行解析。 In the previous embodiment, after loading HTML page, an HTML page is parsed in the present embodiment, the browser will insert a preset HTML in the HTML page, so that as the preset HTML page part of the HTML together for resolution. 具体地,可以在该网页的HTML的body标签中插入一段预置的HTML。 Specifically, the preset period may be inserted in the HTML body tag of the HTML page.

[0030] 在本实施例中,预置的HTML在经过浏览器的解析之后,用于在网页中显示地址栏,即,实现浏览器内嵌地址栏。 [0030] In the present embodiment, after the preset parsed HTML browser for displaying a web page in the address field, i.e., to achieve the embedded browser address bar. 为了能够最终在网页中显示地址栏,该预置的HTML中包含了一些现行的HTML标准之外的、新定义的HTML标签(TAG),其中,包括了内嵌地址栏标签(<AddressBar>),以及以下至少一项: To be able to display the final page in the address bar, the preset HTML contains newly defined HTML tags (TAG) than some of the current HTML standard, wherein the address bar including embedded tag (<AddressBar>) and at least one of the following:

[0031 ] 地址栏图标标签(〈AddressBarlcon〉)、地址栏输入框标签(〈AddressBar Input〉)或者地址栏分享标签(〈AddressBarShare〉)。 [0031] Location bar icon tag (<AddressBarlcon>), column address input box tag (<AddressBar Input>) or shared column address tag (<AddressBarShare>).

[0032] 在本实施例中,当新定义了上述标签之后,需要在浏览器中增加对上述新定义标签的解析功能,以使得当浏览器解析到这部分新定义标签时,能够成功解析并在页面显示区域渲染出内嵌地址栏。 [0032] In the present embodiment, when the newly defined above label, it is necessary to increase resolution to the above newly defined label in the browser, such that when the browser parses this part of the newly defined tags, can be successfully parsed and in the page display area rendering the embedded address bar. 其中,内嵌地址栏标签即被解析并渲染为在网页中显示的内嵌地址栏,地址栏图标标签即被解析并渲染为在内嵌地址栏中显示的图标,地址栏输入框标签即被解析并渲染为在内嵌地址栏中显示的用于输入网页地址的输入框,地址栏分享标签即被解析并渲染为在内嵌地址栏中显示的用于分享网址或者网页内容的图标或者按钮。 Among them, the address bar embedded tag ie parsing and rendering embedded in the address bar of a web page, the address bar icon label ie, parsed and rendered in the embedded address bar icon, the address bar input box label ie parsed and rendered in the address bar embedded in the input box for entering web addresses, the address bar ie share tag parsing and rendering as an icon or a button embedded in the address bar of the web site or for sharing web content .

[0033] 作为本发明的一个实现示例,预置的HTML的格式可以大致如下: [0033] As a HTML format exemplary implementation of the invention, can be preset as follows:

[0034] <Addres sBar> [0034] <Addres sBar>

[0035] 〈AddressBarlcon〉 [0035] <AddressBarlcon>

[0036] 〈/AddressBarlcon〉 [0036] </ AddressBarlcon>

[0037] 〈AddressBar Input〉 [0037] <AddressBar Input>

[0038] 〈/AddressBar Input〉 [0038] </ AddressBar Input>

[0039] 〈AddressBarShare〉 [0039] <AddressBarShare>

[0040] 〈/AddressBarShare〉 [0040] </ AddressBarShare>

[0041] 〈/AddressBar〉 [0041] </ AddressBar>

[0042] 其中,上述新定义的标签中的内容可以包括一些现行HTML标准中的标准属性,例如id、name λ onClick等等,还可以包括一些自定义的属性,当涉及到自定义属性时,相应地,需要在浏览器中增加对这些自定义属性的解析功能,在此不一一举例说明。 [0042] wherein, the contents of the newly defined label attributes may include a number of existing standard HTML standards, e.g. id, name λ onClick like, and could also include custom properties, when it comes to custom properties, accordingly, a need to increase the resolution to these custom properties in the browser, not in this example.

[0043] 在S102中,解析所述预置的HTML,创建与所述预置的HTML中的标签对应的文件对象模型(Document Object Model,D0M)节点。 [0043] In S102, the preset parsing HTML, the preset create the HTML tag corresponding to the Document Object Model (Document Object Model, D0M) node.

[0044] 在本实施例中,由于新定义了标签,因此,需要在浏览器中增加对这部分新定义标签的解析功能。 [0044] In the present embodiment, since the newly defined label, therefore, necessary to increase this part of the newly defined tags parsing function in the browser. 具体地,通过在浏览器中增加这部分新定义标签对应的节点类,从而生成这部分新定义标签所对应的DOM节点,用于完整构建整个网页的DOM树。 Specifically, by adding a new definition of this part of the node corresponding to the tag in the browser class, thereby generating a new part of this custom label DOM node, the entire page to build a complete DOM tree.

[0045]例如, [0045] For example,

[0046]标签〈AddressBar〉对应 DOM 节点HTMLAddressBarElement ; [0046] The tab <AddressBar> DOM corresponding to the node HTMLAddressBarElement;

[0047]标签〈AddressBarlcon〉对应 DOM 节点HTMLAddressBarIconElement ; [0047] The tab <AddressBarlcon> DOM corresponding to the node HTMLAddressBarIconElement;

[0048]标签〈AddressBarlnput〉对应 DOM 节点HTMLAddressBarInputElement ; [0048] The tab <AddressBarlnput> DOM corresponding to the node HTMLAddressBarInputElement;

[0049]标签〈AddressBarShare〉对应 DOM 节点HTMLAddressBarShareElement。 [0049] The tab <AddressBarShare> DOM corresponding to the node HTMLAddressBarShareElement.

[0050] 作为本发明的一个实现示例,经过S102之后,生成的DOM节点之间的继承关系图以及DOM树可以分别如图2及图3所示。 [0050] As an exemplary implementation of the present invention, after S102, inheritance and FIG DOM node between the DOM tree can be generated as shown in FIGS. 2 and 3, respectively. 在图2中,每个DOM节点均继承于连接该节点的箭头所指向的上一个节点,例如,DOM节点HTMLAddressBarElement和DOM节点HTMLAddressBarIconElement 均继承于DOM 节点HTMLELment,又例如,DOM 节点HTMLAddressBarInputElement 和DOM 节点HTMLAddressBarShareElement 均继承于DOM节点HTMLFormControlElement◦而图3中展示的则是将内嵌地址栏的代码进行解析之后生成的DOM树,其中,内嵌地址栏标签对应HTMLAddressBarElement节点,在该节点之下存在三个子节点,分别是HTMLAddressBarIconElement、HTMLAddressBarInputElement 和HTMLAddressBarShareEIement。 In FIG. 2, each of the DOM node are inherited to a connection node of the node pointed to by the arrow, e.g., DOM node HTMLAddressBarElement HTMLAddressBarIconElement DOM node and inherits all DOM node HTMLELment, and for example, and DOM node HTMLAddressBarInputElement DOM node HTMLAddressBarShareElement 3 are inherited code embedded sucked shown in the address bar and DOM node HTMLFormControlElement◦ diagrams generated DOM tree after parsing, wherein the embedded tags corresponding to HTMLAddressBarElement node address bar, there are three child nodes below the node , respectively HTMLAddressBarIconElement, HTMLAddressBarInputElement and HTMLAddressBarShareEIement.

[0051] 在S103中,根据创建的所述DOM节点,创建与所述预置的HTML中的标签对应的渲染(Render)节点。 Tag corresponds to rendering (the Render) node [0051] In S103, based on the DOM created node, create the preset HTML.

[0052] 在本实施例中,由于新定义了标签,因此,还需要在浏览器中增加相应的解析功能,用于根据这部分新定义标签所对应的DOM节点来创建这部分新定义的标签所对应的Render节点。 [0052] In the present embodiment, since the newly defined label, therefore, we need to increase further in the corresponding analytical function browser, for creating a new part of this definition according to which part of the new label custom label DOM node Render the corresponding node. 具体地,通过在浏览器中增加对应的渲染类,从而生成这部分新定义标签的DOM节点所对应的Render节点,用于完整构建整个网页的Render树。 Specifically, by increasing the corresponding classes in the browser rendering, thereby generating Render this node of the DOM node corresponding to the newly defined label for the entire page to build a complete tree Render.

[0053]例如, [0053] For example,

[0054] DOM 节点HTMLAddressBarElement 对应Render 节点RenderAddressBar ; [0054] DOM corresponding to the node HTMLAddressBarElement Render node RenderAddressBar;

[0055] DOM 节点HTMLAddressBarIconElement 对应Render 节点RenderAddressBarIcon ; [0055] DOM corresponding to the node HTMLAddressBarIconElement Render node RenderAddressBarIcon;

[0056] DOM 节点HTMLAddressBarInputElement 对应Render 节点RenderAddressBarInput ; [0056] DOM corresponding to the node HTMLAddressBarInputElement Render node RenderAddressBarInput;

[0057] DOM 节点HTMLAddressBarShareElement 对应Render 节点RenderAddressBarShare。 [0057] DOM corresponding to the node HTMLAddressBarShareElement Render node RenderAddressBarShare.

[0058] 作为本发明的一个实现示例,经过S103之后,生成的Render节点之间的继承关系图以及Render树可以分别如图4及图5所示。 [0058] As an implementation example of the present invention, after S103, the inheritance relation between generated and Render Render node tree can be as shown in FIG. 4 and FIG. 5 respectively. 在图4中,每个Render节点均有共同的祖先RenderBox,但每个Render节点的父节点却不完全相同,这源于它们各自的特性,例如Render节点RenderAddressBarInput,其可以用于文本输入,因此,其父节点为RenderTextControlο而图5中展示的则是根据图3的DOM树生成的Render树,由于在本实现示例中,内嵌地址栏的元素均是显示在浏览器界面中的,因此,这意味着DOM树中的每个DOM节点都会生成对应的Render节点,以完成对每个节点的渲染,因此,图5中的Render树和图3中的DOM树是——对应的。 In FIG. 4, each have a common ancestor node Render RenderBox, but the parent node of each node is not identical Render, which stems from their respective properties, e.g. Render node RenderAddressBarInput, which can be used for text input, , while the parent node is RenderTextControlο FIG. 5 is shown in FIG. 3 in accordance with the generated DOM tree Render tree, because in the present implementation example, the elements are embedded in the address bar is displayed in the browser interface, and therefore, this means that each of the DOM tree node will generate a corresponding DOM node render to complete the rendering of each node, and therefore, in FIG. 5 and FIG. 3 render tree is a DOM tree - corresponding.

[0059] 在S104中,绘制创建的每个所述Render节点,以在网页中内嵌所述地址栏。 Render each node [0059] In S104, the drawing is created, embedded in a web page to the address bar.

[0060] 在本实施例中,经过S103,仓Ij建出的Render节点用于构建整个网页显示的Render树,此时,将会执行布局过程,确定每个Render节点在屏幕上的确切坐标,从而遍历创建出的每个Render节点,并使用UI后端层绘制每个Render节点,最终在显示网页的同时,完成内嵌地址栏的显示。 [0060] In the present embodiment, after S103, the construction of the cartridge Ij Render Render tree node used to construct the entire page is displayed, in which case, the layout process will be performed to determine the exact coordinates of each node Render on the screen, Render each node in order to iterate create and use UI backend layer rendering Render each node, the final displaying a web page at the same time, complete the display embedded in the address bar.

[0061] 需要说明的是,在执行S102〜S104的同时,原始的网页的HTML也是按照正常的解析流程生成DOM树及Render树,并进行渲染,在此不用于限定本发明。 [0061] Incidentally, while performing S102~S104 of the original HTML page is generated in accordance with normal resolution process Render DOM tree and the tree, and rendering, which is not intended to limit the present invention.

[0062] 在本发明实施例中,通过HTML的方式来实现浏览器对内嵌地址栏的加载与显示,同时,在浏览器内预置相应的解析功能,使得浏览器能够成功地对用于显示内嵌地址栏的HTML中新扩充的标签进行解析,通过上述方式,当涉及到相关页面操作时,浏览器无需额外对内嵌地址栏进行处理,由此大大地减轻了开发工作量,提高了开发效率。 [0062] In an embodiment of the present invention, implemented by HTML browser address bar embedded manner of loading the display, while the corresponding pre-analysis functions within the browser, so that the browser can be successfully used for HTML display embedded in the address bar of a new expanded label parsing, when it comes to operating the relevant page, the browser address bar to the embedded without additional processing by the above-mentioned manner, thereby greatly reducing the development effort and improve the development efficiency.

[0063] 图6示出了本发明另一实施例提供的浏览器内嵌地址栏的实现方法的实现流程,在本实施例中,通过设置浏览器的默认级联样式表(Cascading Style Sheet, CSS)来保持显示的内嵌地址栏的风格一致,如图6所示,在本实施例中,S104之后,该方法还包括: [0063] FIG. 6 illustrates a provided implementation embedded browser address bar of a further embodiment of the process of the present invention to achieve, in the present embodiment, by providing the default browser cascading style sheets (Cascading Style Sheet, CSS) to display consistent inline style address bar, as shown in FIG. 6, in the present embodiment, after S104, the method further comprising:

[0064] S105,将所述地址栏相关的CSS保存为浏览器的默认CSS。 [0064] S105, the address bar associated CSS CSS is saved as the default browser.

[0065] 在本实施例中,由于浏览器每次加载网页时都需要在该网页的HTML中插入预置的HTML,并重新解析以得到内嵌地址栏,为了保持每次显示出的内嵌地址栏风格一致,在此,将与该地址栏相关的CSS保存至浏览器的默认样式表(例如html.css和wml.css)中,使得该地址栏相关的CSS只在第一次显示的时候被解析,此后浏览器再次加载网页时,该地址栏相关的CSS即可以直接从从内存中读取和使用,无需解析,也由此提高了解析效率。 [0065] In the present embodiment, since each time the browser pages are loaded in an HTML page of the HTML inserted preset, and re-embedded parsed to obtain the address bar, in order to keep each exhibited inline consistent style address bar, in this case, the address bar is associated with the default CSS stylesheet to save the browser (such as html.css and wml.css) so that the address bar associated CSS only for the first time in the show when it is resolved, after which time the browser loads the page again, the address bar that is associated CSS can be read from memory and use from without parsing directly, thereby also improving the efficiency of analysis.

[0066] 图7示出了本发明另一实施例提供的浏览器内嵌地址栏的实现方法的实现流程图,如图7所示,在S104之后,还包括: [0066] FIG. 7 shows a flow chart for implementing the present invention is provided in the browser address bar embedded implementation according to another embodiment, shown in Figure 7, after the S104, further comprising:

[0067] 在S106中,检测发生在所述预置的HTML中的标签上的用户事件。 [0067] In S106, the user event detection occurs on the label in the preset HTML.

[0068] 在本实施例中,预置的HTML中的每个标签可能都对应一个相应的事件处理过程,例如,对于地址栏图标标签,其对应的事件处理过程可以为搜索引擎选择,对于地址栏输入框标签,其对应的事件处理过程可以为弹出输入法,对于地址栏分享标签,其对应的事件处理过程可以为切换至分享进程,这些事件处理过程均需要由发生在相应标签上的用户事件来触发,因此,在S106中,检测是否在发生在预置的HTML中的标签上的用户事件。 [0068] In the present embodiment, each of the preset HTML tags may corresponds to a respective event processing, e.g., for address bar icon labels, the corresponding event handler can choose to search for address column to input tag, the corresponding event handler may be a pop-up input method for address bar shared tag, its corresponding event handler may be switched to the sharing process, these event processing require a place on the respective labels user event to trigger, therefore, in S106, detecting whether the user event occurs on the label in the preset HTML.

[0069] 在S107中,根据所述用户事件,切换相应的UI界面。 [0069] In S107, the event according to the user, the corresponding switching UI interface.

[0070] 当检测出预置的HTML中的标签上发生了用户事件,例如,点击事件时,则执行相应的事件处理过程,切换相应的UI界面。 [0070] event occurs when the user is detected in the preset HTML tags, for example, when the click event, executes the corresponding event handler, the corresponding switching UI interface.

[0071] 例如,当检测出发生在地址栏图标标签上的点击事件时,则弹出搜索引擎选择界面;当检测出发生在地址栏输入框标签上的点击事件,或者检测出发生在地址栏输入框标签上的光标活跃事件及键盘输入事件时,弹出输入法界面;当检测出发生在地址栏分享标签上的点击事件时,切换至网页分享进程界面。 [0071] For example, when detecting the occurrence in the address bar icon label click event, a pop-up search engine selection interface; when it is detected that occurs on the address bar box label click event, or detect the occurrence in the address bar when the cursor is active in events and keyboard events on the box label, pop input interface; when it is detected that occurred in the address bar Share tab click event, switching to shared web interface process.

[0072] 具体地,如图8所示,S107可以为: [0072] Specifically, as shown in FIG. 8, S107 may be:

[0073] 在S801中,将检测到的用户事件传递给浏览器的内核适配层。 [0073] In S801, the detected events are passed to the kernel of the user adaptation layer browser.

[0074] 在S802中,内核适配层将用户事件转发给浏览器内核处理。 [0074] In S802, the kernel adaptation layer forwards the user event to the browser core processing.

[0075] 在S803中,浏览器内核调用内核适配层接口,指示UI界面进行切换。 [0075] In S803, the browser interface to the kernel layer call a kernel adaptation, handover indication UI interface.

[0076] 图9示出了本发明实施例提供的浏览器内嵌地址栏的实现装置的结构框图,该装置可以位于浏览器中,用于运行本发明图1至图8所示的浏览器内嵌地址栏的实现方法。 [0076] FIG. 9 shows a block diagram of the structure of the present invention to provide apparatus for implementing a browser address bar embedded embodiment, the apparatus may be located in a browser, for operating the present invention in FIG. 1 to FIG. 8 browser embedded implementation of the address bar. 为了便于说明,仅示出了与本实施例相关的部分。 For ease of description, only a part related to the present embodiment.

[0077] 参照图9,该装置包括: [0077] Referring to FIG. 9, the apparatus comprising:

[0078] 插入单元91,当载入网页的HTML时,在所述网页的HTML中插入预置的HTML,所述预置的HTML用于在所述网页中显示地址栏。 [0078] The insertion unit 91, when loaded HTML page, pre-inserted in the HTML of the web page in HTML, HTML is used to preset the address bar in the web page.

[0079] 第一创建单元92,解析所述预置的HTML,创建与所述预置的HTML中的标签对应的DOM节点。 [0079] The first creating unit 92, parses the HTML preset, the preset create the HTML tag corresponding DOM node.

[0080] 第二创建单元93,根据创建的所述DOM节点,创建与所述预置的HTML中的标签对应的Render节点。 [0080] The second creating unit 93, based on the DOM created node, create the preset HTML tags in the corresponding node Render.

[0081] 显示单元94,绘制创建的每个所述Render节点,以在网页中显示内嵌所述地址栏。 [0081] The display unit 94, each of the node drawn Render created to show the address bar embedded in Web pages.

[0082] 可选地,所述预置的HTML中的标签包括以下至少一项: [0082] Alternatively, the preset in the HTML tags comprises at least one of:

[0083] 内嵌地址栏标签、地址栏图标标签、地址栏输入框标签或者地址栏分享标签。 [0083] tags embedded address bar, address bar icon labels, address bar input box label or tag to share the address bar.

[0084] 可选地,所述装置还包括: [0084] Optionally, the apparatus further comprising:

[0085] 保存单元,用于将所述地址栏相关的级联样式表CSS保存为浏览器的默认CSS。 [0085] storage unit, for saving the address bar associated cascading style sheets default browser CSS CSS.

[0086] 可选地,所述装置还包括: [0086] Optionally, the apparatus further comprising:

[0087] 检测单元,用于检测发生在所述预置的HTML中的标签上的用户事件; [0087] detecting means, the user event occurs in the preset tag in the HTML for detecting;

[0088] 切换单元,用于根据所述用户事件,切换相应的UI界面。 [0088] a switching unit, according to the user event, appropriate switching UI interface.

[0089] 可选地,所述用户事件包括点击事件。 [0089] Alternatively, the user event comprises a click event.

[0090] 在本发明实施例中,通过HTML的方式来实现浏览器对内嵌地址栏的加载与显示,同时,在浏览器内预置相应的解析功能,使得浏览器能够成功地对用于显示内嵌地址栏的HTML中新扩充的标签进行解析,通过上述方式,当涉及到相关页面操作时,浏览器无需额外对内嵌地址栏进行处理,由此大大地减轻了开发工作量,提高了开发效率。 [0090] In an embodiment of the present invention, implemented by HTML browser address bar embedded manner of loading the display, while the corresponding pre-analysis functions within the browser, so that the browser can be successfully used for HTML display embedded in the address bar of a new expanded label parsing, when it comes to operating the relevant page, the browser address bar to the embedded without additional processing by the above-mentioned manner, thereby greatly reducing the development effort and improve the development efficiency.

[0091] 以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等,均应包含在本发明的保护范围之内。 [0091] The foregoing is only preferred embodiments of the present invention but are not intended to limit the present invention, any modifications within the spirit and principle of the present invention, equivalent substitutions and improvements should be included in the present within the scope of the invention.

Claims (10)

1.一种浏览器内嵌地址栏的实现方法,其特征在于,包括: 当载入网页的超文本标记语言时,在所述网页的超文本标记语言中插入预置的超文本标记语言,所述预置的超文本标记语言用于在所述网页中显示地址栏; 解析所述预置的超文本标记语言,创建与所述预置的超文本标记语言中的标签对应的文件对象模型节点; 根据创建的所述文件对象模型节点,创建与所述预置的超文本标记语言中的标签对应的渲染节点; 绘制创建的每个所述渲染节点,以网页中内嵌所述地址栏。 An embedded browser address bar-implemented method, characterized by comprising: when loaded HTML web page, the preset inserted in the HTML page in HTML, the preset HTML in the web page for the address bar; HTML parsing the HTML preset, the preset create the label model corresponding to the file object node; according to the document object model node created, the creation of the preset HTML tags in the corresponding render nodes; each render node drawing created a web page embedded in the address bar .
2.如权利要求1所述的方法,其特征在于,所述预置的超文本标记语言中的标签包括内嵌地址栏标签以及以下至少一项: 地址栏图标标签、地址栏输入框标签或者地址栏分享标签。 2. The method according to claim 1, wherein said preset HTML tag includes the tag address field, and embedded at least one of: the address bar icon labels, tags or the address input box bar Share the address bar labels.
3.如权利要求1或2所述的方法,其特征在于,所述方法还包括: 将所述地址栏相关的级联样式表保存为浏览器的默认级联样式表。 3. The method according to claim 1, wherein said method further comprises: saving the address bar cascading style sheet associated to the default browser cascading style sheet.
4.如权利要求1或2所述的方法,其特征在于,所述方法还包括: 检测发生在所述预置的超文本标记语言中的标签上的用户事件; 根据所述用户事件,切换相应的用户界面。 4. The method of claim 1 or claim 2, wherein said method further comprises: detecting a user event occurs in the label of the preset in HTML; according to the user event, switching corresponding user interface.
5.如权利要求4所述的方法,其特征在于,所述用户事件包括点击事件。 5. The method according to claim 4, wherein the event comprises a user click event.
6.一种浏览器内嵌地址栏的实现装置,其特征在于,包括: 插入单元,用于当载入网页的超文本标记语言超文本标记语言时,在所述网页的超文本标记语言中插入预置的超文本标记语言,所述预置的超文本标记语言用于在所述网页中显示地址栏; 第一创建单元,用于解析所述预置的超文本标记语言,创建与所述预置的超文本标记语言中的标签对应的文件对象模型文件对象模型节点; 第二创建单元,用于根据创建的所述文件对象模型节点,创建与所述预置的超文本标记语言中的标签对应的渲染节点; 显示单元,用于绘制创建的每个所述渲染节点,以在网页中内嵌所述地址栏。 A device for implementing the embedded browser address bar, characterized by comprising: insertion means for, when loading HTML page when the HTML, the hypertext markup language page insert HTML preset, the preset HTML for displaying the address bar in the webpage; a first creating unit configured to parse the HTML preset, and create the document Object model document object model nodes of said pre-set in the HTML tag corresponding; a second creating unit configured to create the document object model nodes to create the preset HTML in render node corresponding to the tag; a display unit for rendering each of said nodes draw created inline in the page address bar.
7.如权利要求6所述的方法,其特征在于,所述预置的超文本标记语言中的标签包括内嵌地址栏标签以及以下至少一项: 地址栏图标标签、地址栏输入框标签或者地址栏分享标签。 7. The method according to claim 6, wherein said preset HTML tag includes the tag address field, and embedded at least one of: the address bar icon labels, tags or the address input box bar Share the address bar labels.
8.如权利要求6或7所述的方法,其特征在于,所述装置还包括: 保存单元,用于将所述地址栏相关的级联样式表保存为浏览器的默认级联样式表。 8. The method of claim 6 or claim 7, characterized in that said apparatus further comprising: a storage unit for storing the address bar cascading style sheet associated default browser cascading style sheets.
9.如权利要求6或7所述的方法,其特征在于,所述装置还包括: 检测单元,用于检测发生在所述预置的超文本标记语言中的标签上的用户事件; 切换单元,用于根据所述用户事件,切换相应的用户界面。 9. The method of claim 6 or claim 7, wherein said apparatus further comprises: detecting means for detecting a user event occurs on the label of the preset in HTML; switching unit , according to the user event for switching the corresponding user interface.
10.如权利要求9所述的方法,其特征在于,所述用户事件包括点击事件。 10. The method according to claim 9, wherein the event comprises a user click event.
CN201310529557.XA 2013-10-30 2013-10-30 A kind of browser embeds the implementation method and device of address field CN104598465B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201310529557.XA CN104598465B (en) 2013-10-30 2013-10-30 A kind of browser embeds the implementation method and device of address field

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310529557.XA CN104598465B (en) 2013-10-30 2013-10-30 A kind of browser embeds the implementation method and device of address field

Publications (2)

Publication Number Publication Date
CN104598465A true CN104598465A (en) 2015-05-06
CN104598465B CN104598465B (en) 2019-04-12

Family

ID=53124263

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310529557.XA CN104598465B (en) 2013-10-30 2013-10-30 A kind of browser embeds the implementation method and device of address field

Country Status (1)

Country Link
CN (1) CN104598465B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107329997A (en) * 2017-06-08 2017-11-07 腾讯科技(深圳)有限公司 Page displaying method and device, client side and storage medium

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040015398A1 (en) * 2001-10-24 2004-01-22 Hayward Monte Duane Method of disseminating advertisements using an embedded media player page
CN101587488A (en) * 2009-05-25 2009-11-25 深圳市腾讯计算机系统有限公司 Method and device for detecting re-orientation of page in search engine
CN101840413A (en) * 2010-03-09 2010-09-22 伍帝州 Method and device for address bar navigation of browsers
CN102915308A (en) * 2011-08-02 2013-02-06 阿里巴巴集团控股有限公司 Method and device for rendering pages
CN103034731A (en) * 2012-12-20 2013-04-10 北京思特奇信息技术股份有限公司 Method for generating Web front-end interactive page
CN103365920A (en) * 2012-04-09 2013-10-23 腾讯科技(深圳)有限公司 Method for displaying webpage, browser and mobile terminal

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040015398A1 (en) * 2001-10-24 2004-01-22 Hayward Monte Duane Method of disseminating advertisements using an embedded media player page
CN101587488A (en) * 2009-05-25 2009-11-25 深圳市腾讯计算机系统有限公司 Method and device for detecting re-orientation of page in search engine
CN101840413A (en) * 2010-03-09 2010-09-22 伍帝州 Method and device for address bar navigation of browsers
CN102915308A (en) * 2011-08-02 2013-02-06 阿里巴巴集团控股有限公司 Method and device for rendering pages
CN103365920A (en) * 2012-04-09 2013-10-23 腾讯科技(深圳)有限公司 Method for displaying webpage, browser and mobile terminal
CN103034731A (en) * 2012-12-20 2013-04-10 北京思特奇信息技术股份有限公司 Method for generating Web front-end interactive page

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107329997A (en) * 2017-06-08 2017-11-07 腾讯科技(深圳)有限公司 Page displaying method and device, client side and storage medium

Also Published As

Publication number Publication date
CN104598465B (en) 2019-04-12

Similar Documents

Publication Publication Date Title
US7614052B2 (en) System and method for developing and deploying computer applications over a network
US7331014B2 (en) Declarative mechanism for defining a hierarchy of objects
US7814425B1 (en) Thumbnail image previews
CN101611397B (en) Application-based copy and paste operations
US9767082B2 (en) Method and system of retrieving ajax web page content
US20050268215A1 (en) Method and apparatus for viewing and interacting with a spreadsheet from within a web browser
US7320113B2 (en) Systems and methods for creating and displaying a user interface for displaying hierarchical data
US20110191666A1 (en) Animation control methods and systems
US20150095763A1 (en) Browser emulator system
KR101524897B1 (en) Editing a document using a transitory editing surface
JPH113201A (en) Method and system for accelerating pop-up link inside hyper text usable computer system
KR20080053293A (en) Initial server-side content rendering for client-script web pages
CN101082917A (en) Method and apparatus for rapid previewing summary of web page content
CN107562735A (en) System and method for automatic language translation for applications
JP2012518836A (en) Handling of the font for viewing a document on the Web
CN102722563B (en) Method and device for displaying page
CN1609793A (en) Programming interface for a computer platform
CN101916192B (en) Multi-language switching method and device for user interface
JP2012168959A (en) Method and system for displaying and interacting with paginated content
US20150121193A1 (en) User interface virtualization for web applications
JP2011070640A (en) Method and system for converting desktop application to web application
CN101079041A (en) Dynamic web page updating method and system
US20070240032A1 (en) Method and system for vertical acquisition of data from HTML tables
US7143359B2 (en) Emulating advanced graphical user interface elements in a hypermedia content browser
JP5550636B2 (en) Technology to edit a document using the latent transfer

Legal Events

Date Code Title Description
C06 Publication
C10 Entry into substantive examination