嵌 入 式 浏 览 器 开 发

 摘  要 think58好，好think58

 本文主要论述了嵌入式浏览器开发所涉及到的技术，对HTML词法分析、浏览器JavaScript支持、linux和gtk编程等做了详细的分析和介绍，并对Netbit浏览器的开发进行了介绍，分析了主要的模块的功能和组成，并给出了主要算法。

[资料来源：http://www.THINK58.com]

还对典型的嵌入式浏览器进行了分析，包括Gzilla,Mozilla,Thunder和zen,总结了浏览器设计的技术要点和开发策略。 内容来自think58

另外，在论文开头，介绍了目前嵌入式浏览器产品的发展现状，嵌入式浏览器的组成和各部份功能说明。 [资料来源：THINK58.com]

 HTML词法分析是着重讨论的技术问题，给出了详尽的数据结构，程序流程。 think58

[资料来源：THINK58.com]

 Netbit浏览器的开发，是本论文的重点，分模块进行了分析，提出了需要改进的地方，并给出了改进措施。

copyright think58

[版权所有：http://think58.com]

关键词：嵌入式浏览器，HTML词法分析，Javascript，linux，gtk
目 录

copyright think58

引言………………………………………………………………5
第一章 嵌入式浏览器设计概述 ………………………… 6
1.1目前嵌入式浏览器产品的发展现状 ……………………… 6
1.2嵌入式浏览器的组成和各部份功能说明 ………………… 8
1.3开发难度分析 ……………………………………………… 9
1.4开发的前期策划 …………………………………………… 10

本文来自think58 [来源：http://www.think58.com]

[来源：http://think58.com]

第二章 HTML词法分析器的设计及其应用 …………… 12
2.1 Bit Token的组成及其功能 ………………………………12
2.2 数据结构 ……………………………………………………12
2.3 算法 …………………………………………………………13
2.4词法分析结果示意……………………………………………15
2.5 HTML词法分析的应用 ………………………………………15

[版权所有：http://think58.com]

第三章 浏览器JavaScript支持的实现 …………………18
3.1基本的JavaScript 开发环境 ………………………………18
3.2 JavaScript Engine …………………………………………18
3.3 JavaScript与浏览器接合 ………………………………… 19
3.4 浏览器消息响应 …………………………………………… 21 [资料来源：www.THINK58.com]

第四章 Linux程序开发技术及 GTK图形程序开发…… 23
4.1 Linux下的程序开发环境 ……………………………………23
4.2 GTK图形程序开发 ……………………………………………29 copyright think58

[资料来源：THINK58.com]

第五章 Netbit浏览器开发与分析 ……………………… 31
5.1 Netbit 浏览器简介 ………………………………………… 31
5.2 Netbit Browser浏览器各部份的功能 …………………… 31
5.3 界面模块………………………………………………………32
5.4 控制模块………………………………………………………34
5.5词法分析模块… ………………………………………………34
5.6使用PIXMAP的画图模块………………………………………35
5.7 文本文件的显示模块…………………………………………36
5.8 HTML文件的显示模块 ……………………………………… 37
5.9 Netbit实际应用效果及比较 ……………………………… 40
5.10 Netbit Browser的缺点分析及改进办法 …………………44
5.11 Netbit Browser未来的展望 ………………………………48 [来源：http://www.think58.com]

第六章  其它浏览器分析…………………………………… 50
6.1  Dillo(Gzilla)浏览器分析 ……………………………… 50
6.2 Thunder浏览器分析…………………………………………55
6.3 Mozilla浏览器分析…………………………………………56
6.4 ZEN浏览器分析………………………………………………57
6.5 浏览器分析工作的总结………………………………………58 内容来自think58 [资料来源：www.THINK58.com]

致  谢…………………………………………………………… 60
参考文献表………………………………………………………61

think58.com

[版权所有：http://think58.com]

[资料来源：www.THINK58.com]

第一章 嵌入式浏览器设计概述 think58.com [来源：http://think58.com]

1.1目前嵌入式浏览器产品的发展现状 think58好，好think58 [版权所有：http://think58.com]

1.1.1桌面浏览器简介及其与嵌入式浏览器的区别：
常见的桌面浏览器有微软的Internet Explorer，网景的Netscape，开放源码的Mozilla，以及opera，mosaic，Hotjava，字符模式的lynx等。其中IE，Opera已有嵌入式版本，以上的大多数浏览器均有跨多平台的版本。这些桌面型浏览器功能参差不齐，但大多能实现基本的浏览功能。其中IE与Netscape对HTML页面的显示效果均堪称完美（对于XML，WML等标准的网页浏览，本文不予讨论）。

[资料来源：THINK58.com]

与完美的浏览效果，功能丰富，支持多种媒体格式和视音频插件等优点形成对立的是，这些浏览器庞大的体积和对机器配置的高要求。这也是桌面浏览器和嵌入式浏览器最大的区别。另外，桌面型浏览器通常是基于通用的操作系统，用于桌面电脑如PC机、MAC机等。而嵌入式浏览器通常基于专用系统。

本文来自think58 [资料来源：http://www.THINK58.com]

[资料来源：http://think58.com]

需要指出的是，我们在网上常看到的一些所谓的优秀浏览器，如Netcaptor，魔装网神，腾讯，飓风，Fantasia，金山WPS office的浏览器等等，均为使用IE内核的浏览器，使用了多页面多线程的方式，降低了系统资源的耗费，方便了浏览，但软件本身没有多少技术可言，可以用Delphi，VB等工具轻易开发出来（如果不要求完善的功能，只需简单到拖一个IE控件过去就行了），这也体现了微软的COM+及ActiveX技术的强大。

copyright think58

[资料来源：http://think58.com]

[资料来源：http://THINK58.com]

1.1.2常见嵌入式浏览器
(1) Internet Explorer for WinCE，是IE的Windows CE版，这也意味着用户为了使用它，必须选用基于WinCE平台的产品，随着微软势力在掌上终端领域的蔓延，WinCE版的IE必将大行其道。

[资料来源：http://THINK58.com]

(2) Access Netfront，Access是日本的浏览器大厂，占据了大部份的日本浏览器市场，其产品广泛应用于手持设备、机顶盒、游戏机等产品。其新推出的Netfront Linux版本可以免费下载，网址是：http://www.access.co.jp/product/develop。经试用，发现Netfront浏览效果非常好，对中文的支持和表格的显示效果，甚至超过Netscape 4.6 for Linux。而且支持键盘操作。可以使用箭头键来选择网址进行跳转。但显然为了简化设计，Netfront使用了一定的权宜手段。比如它不支持使用<font>标记来设置字体，也不支持样式表，所有字体的大小是固定的，但一般情况不易发现，不过由于Linux版本不是商业性版本，无法就此推断其他版本的特性。Netfront Linux版大小为1.9M，如再加以简化（比如去掉一些图片按钮）可以做的更小。

think58.com

[来源：http://think58.com]

[资料来源：www.THINK58.com]

(3) Gzilla，现名Dillo，是基于Linux，使用GTK作为GUI平台开发的浏览器，其开发目的也包含嵌入式的应用。是开放源码项目。我们在设计Netbit Browser时主要参考了该浏览器的界面设计。该浏览器的缺点是不支持表格，布局过于简单，不支持中文，浏览效果比较差，优点是网络功能完善，支持cache缓冲，能够支持多种图片格式。网址是：http://www.gzilla.com。

think58好，好think58

[资料来源：http://www.THINK58.com]

(4) Viewml，使用FLTK作为GUI平台开发的浏览器，主要面向嵌入式的应用。是开放源码项目。使用C++面向对象的设计。因为使用FLTK，所以可以在嵌入式的Micro Window平台运行，该浏览器支持简单的表格，界面还没有做（只有一个主窗口），不支持中文，由于FLTK的BUG比较多，我们在实际编译时经常出错，即使编译通过，也常常是还没运行就core dump了，但曾经由某人编译成功，基本可用，网址是：http://www.viewml.com。

[版权所有：http://think58.com]

(5) ZEN，一个并不知名的嵌入式浏览器，但却十分优秀，开放源码项目，不仅支持表格，支持多种图像格式，而且在设计上很有特色，将涉及到GUI平台的部分独立出来，用户可以指定不同的GUI平台运行，内置了对字符，SVGA和GTK的支持，开发这只需按照相应规范编写该软件的涉及GUI的部份，就可以将其移植到其它GUI平台，而无须对整个软件进行修改。缺点是网络功能比较弱，不支持多线程，另外其必须等到所有图片下载完毕才开始布局，若某文件传输失败则会导致死锁，需用户中断。网址是：http://www.nocrew.org/software/zen/。 think58.com

[资料来源：THINK58.com]

以上主要介绍了开放源码的嵌入式浏览器，因为其对本项目具有实际的参考价值。 内容来自think58 [资料来源：THINK58.com]

1.1.3  嵌入式浏览器的应用领域
嵌入式浏览器主要应用于手持终端和信息家电，例如掌上电脑、3G手机、网络机顶盒、具有网络功能的其它家电，如可上网的电冰箱等，另外，在军事等领域也有一定的应用需求。

本文来自think58 [资料来源：THINK58.com]

1.2嵌入式浏览器的组成和各部份功能说明
下面简介主要的组成部份，其设计原理后面将进行专门论述。
1.2.1 词法分析
主要是针对HTML进行词法分析，该词法分析器实际是通用的，还可用于XML、WML的词法分析，只需替换元素名称即可。 copyright think58 [资料来源：http://www.THINK58.com]

HTML词法分析是浏览器设计的基础环节之一，也是整个设计过程中重要的前端工作，其数据结构的拟定与接下来的语法分析和布局算法密切相关，词法分析的效率与准确性、容错性也关系到整个浏览器设计的质量。 think58 [资料来源：http://www.THINK58.com]

1.2.2语法分析
在大型的浏览器中，语法分析通常是独立的模块，但在嵌入式浏览器中，语法分析通常是与布局混合在一起的，即一边进行语法分析，一边布局，不设立相应的数据结构来存储语法分析的结果。语法分析对布局的算法有直接的指导意义。

[资料来源：THINK58.com]

1.2.3布局
本文中的布局应理解为界面输出前的预演和处理位置等信息的算法，而不是具体的画图和界面输出。布局算法的好坏直接关系到界面的输出效果，但布局算法也是要根据GUI所能实现的输出效果来设计的，所以，GUI往往成为系统的瓶颈，如果GUI提供的支持有限，即使有再好的布局算法，也是纸上谈兵，无用武之地。

think58.com

[来源：http://www.think58.com]

[版权所有：http://think58.com]

第五章 Netbit浏览器开发与分析
5.1 Netbit 浏览器简介
Netbit Browser 是基于Linux平台的浏览器，使用了gtk作为gui开发工具。项目的目的是要建立一个小型的、快捷的web浏览器，并便于移植到嵌入式系统中。该项目是开放源码项目，由sogo456@263.net负责维护，网址是：http://netbit_browser.myetang.com。

内容来自think58 [版权所有：http://think58.com]

项目目前已完成 0.0.1 demo版，实现了基本界面，html4.0词法分析、支持本地文本文件查看，英文网页浏览（使用菜单open file），支持简单http连接，支持URL访问，如输入http://www.gtk.org/download/top.htm等，支持字体颜色、字号等基本的元素。

内容来自think58

[来源：http://think58.com]

Netbit Browser在界面上主要承袭了Gzilla的风格，在技术上主要涉及了词法、语法分析，文档布局，PIXMAP画图，文件IO操作，简单HTTP访问等技术。 [资料来源：www.THINK58.com]

5.2 Netbit Browser浏览器各部份的功能 copyright think58

(1)主程序：用于初始化。
(2)界面模块：窗口、菜单、工具条、滚动条等的初始化。
(3)控制模块：负责命令的响应，消息的处理，是软件控制的中枢。
(4)IO模块：包括http和文件操作。
(5)词法分析模块：HTML的词法分析。
(6)文本文件的显示模块：对Plain text显示的处理，也包含相应的布局算法。
(7)HTML文件的显示模块：在Netbit browser中使用了语法分析与布局同时进行的方式，由此模块来驱动HTML文件的显示。
(8)使用PIXMAP的画图模块：是实际输出采用的方法，被6、7模块调用。 think58好，好think58

[版权所有：http://think58.com]

以下将就主要的较复杂的模块进行说明。 本文来自think58 [资料来源：http://think58.com]

5.3 界面模块
(1) interface.c，interface.h：用于界面的初始化和定制。
主要的函数说明：
void a_Interface_init(void);界面初始化的主函数
void a_Interface_status(BrowserWindow *bw, const char *format, ... );
设置状态栏内容。
void a_Interface_openfile_dialog(BrowserWindow *bw);文件打开对话框
void a_Interface_set_Page_title(BrowserWindow *bw, char *title);
设置窗口标题。
void a_Interface_entry_open_url(GtkWidget *widget, BrowserWindow *bw);
打开网址输入栏输入的网址。
BrowserWindow *a_Interface_new_browser_window(gint width, gint height);
新建浏览窗口，是很重要的函数，在其中创建了所有的界面控件，并对按钮等进行了消息绑定。

think58

[版权所有：http://think58.com]

(2) menu.c，menu.h
主要函数：GtkWidget *a_Menu_mainbar_new (BrowserWindow *bw);
定义了主菜单项，并进行了消息绑定

think58好，好think58 [资料来源：www.THINK58.com]

[资料来源：THINK58.com]

(3) browser.h
定义了重要的窗口结构如下：
struct _BrowserWindow
{
   /* 主窗口的widgets */
   GtkWidget *main_window;
   GtkWidget *back_button;
   GtkWidget *forw_button;
   GtkWidget *stop_button;
   GtkWidget *location;
   GtkWidget *location_button;
   GtkWidget *status; [资料来源：http://think58.com]

   /* 键盘控制表*/
   GtkAccelGroup *accel_group;

copyright think58

[版权所有：http://think58.com]

   /* 工具条按钮 */
   GtkWidget *back_menuitem;
   GtkWidget *forw_menuitem;
   GtkWidget *stop_menuitem; 本文来自think58

[资料来源：http://www.THINK58.com]

   /* 主文档 widget. (用于绘制HTML或其它) */
   GtkWidget *layout; think58.com

[资料来源：www.THINK58.com]

   /* 当前光标类型 */
   GdkCursorType CursorType; 内容来自think58

[资料来源：http://THINK58.com]

   /* 对话框widgets*/
   GtkWidget *open_dialog_window;
   GtkWidget *open_dialog_entry;
   GtkWidget *openfile_dialog_window;
   GtkWidget *quit_dialog_window;

本文来自think58 [版权所有：http://think58.com]

[来源：http://think58.com]

   /* 指向保存词法分析结果的数据结构 */
   BitTokenContext *global_cx;

think58.com

[资料来源：http://THINK58.com]

[来源：http://www.think58.com]

   /* 文件类型：html or plain text*/
   gint file_type;
}; copyright think58 [来源：http://www.think58.com]

5.4 控制模块
(1) command.c，command.h
主要的函数说明：
void a_Commands_openfile_callback (GtkWidget *widget, gpointer client_data);打开文件的对话框
void a_Commands_openurl_callback (GtkWidget *widget, gpointer client_data);打开URL
void a_Commands_close_callback(GtkWidget * widget, gpointer client_data);关闭窗口
void a_Commands_exit_callback (GtkWidget *widget, gpointer client_data);退出程序
void a_Commands_viewsource_callback (GtkWidget *widget, gpointer client_data);查看HTML源码
void a_Commands_reload_callback (GtkWidget *widget, gpointer client_data);刷新当前网页
void a_Commands_home_callback (GtkWidget *widget, gpointer client_data);显示主页
void a_Commands_helphome_callback (GtkWidget *widget, gpointer client_data); 显示帮助 [资料来源：www.THINK58.com]

(2) nav.h，nav.c：是命令对应的与网页操作有关的具体实施 think58好，好think58

[资料来源：http://www.THINK58.com]

主要的函数说明：
void a_Nav_push(BrowserWindow *bw, const char*);按URL打开一个网址或文件，具有对不完整URL的兼容性。
void a_Nav_reload(BrowserWindow *bw);刷新当前网页
void a_Nav_open_splash(BrowserWindow *bw,char *str);打开起始页（内置页面） think58.com

[来源：http://www.think58.com]

5.5词法分析模块
词法分析的原理和算法在前面已有详述。
(1) BitToken.c，BitToken.h
主要的函数说明：
BitTokenContext * Bit_NewContext(); 创建新的全局结构
int Bit_Tokenize(BitTokenContext *global_cx); 局部词法分析
void Bit_BeginToken(BitTokenContext *global_cx); 全局词法分析
int Bit_DestroyToken(BitTokenContext *global_cx); 释放内存
char *Token_ReadUntil(BitTokenContext *global_cx,char *sUntil);重要的字符处理函数，读取到指定字符后结束
char *Token_GetAttribute(BitTokenContext *global_cx); 取元素属性
void Token_ConvertIfNeed(char * aString); 转义字串的处理
int Token_ConsumTag(BitTokenContext *global_cx);处理元素
int Token_Consum_PlainText(BitTokenContext *global_cx); 处理文本
void Bit_ShowTokenResult(BitTokenContext *global_cx);显示分析结果
void Bit_SaveTokenResult(BitTokenContext *global_cx,char * filename); 保存分析结果

本文来自think58 [资料来源：http://THINK58.com]

[资料来源：THINK58.com]

(2) BitHtmlDtd.h，BitHtmlDtd.c
用于存储HTML4.0元素的名称和属性。 think58好，好think58 [资料来源：www.THINK58.com]

(3) BitTokenList.h，BitTokenList.c
元素链表相关
(4) BitTokenAttrList.h，BitTokenAttrList.c
元素属性链表相关
(5) BitStr.h，BitStr.c
字符串处理函数 copyright think58

[资料来源：http://www.THINK58.com]

5.6使用PIXMAP的画图模块
因本部份是HTML文件的显示模块、文本文件的显示模块的基础，所以先予说明。

copyright think58 [资料来源：http://THINK58.com]

paint.c，paint.h
主要的函数说明：
gint pixmap_new(GtkWidget *widget,int width,int height);
在此函数中使用
pixmap  = gdk_pixmap_new(widget->window,width+30,height+30,-1);来新建一个pixmap。 [来源：http://www.think58.com]

gint expose_event (GtkWidget *widget, GdkEventExpose *event); 在expose消息到来时，即若界面被破坏需重画时，使用
gdk_draw_pixmap(widget->window,widget->style->fg_gc[GTK_WIDGET_STATE(widget)],pixmap,event->area.x,event->area.y,event->area.x,ent->area.y, event->area.width, event->area.height);来重画。

think58好，好think58 [资料来源：THINK58.com]

[资料来源：www.THINK58.com]

gint pixmap_repaint(GtkWidget *widget);用于提供手动重画。
gint Browser_Paint(BrowserWindow *bw);layout的主函数，用来根据文件类型来调用HTML文件的显示模块或文本文件的显示，同时初始化滚动条。

[来源：http://think58.com]

参考文献表

think58.com

[资料来源：http://think58.com]

1. John Goerzen著. Linux编程宝典 . 北京：电子工业出版社，2000
2. 杜为文编著. Unix使用指南. 北京：清华大学出版社，1997
3. 潘爱民 著. COM原理与应用. 北京：清华大学出版社，1999
4. Microsoft Corporation. The Microsoft Internet Security Framework: Technology for Secure Communication, Access Control, and Commerce. MSDN Library，December 1998
5. www.gtk.org. GTK+ Reference Manual. GTK documents,2000

think58好，好think58 [资料来源：www.THINK58.com]