该文章原创于Qter开源社区（www.qter.org），作者yafeilinux，转载请注明出处！


导语

WebKit是一个开源的浏览器引擎。Qt中提供了基于WebKit的QtWebKit模块，它包含了一组相关的类。QtWebKit提供了一个Web浏览器引擎，使用它便可以很容易的将万维网（WorldWide Web）中的内容嵌入到Qt应用程序中。与此同时，本地也可以对Web内容进行控制。QtWebKit可以呈现HTML（HyperTextMarkup Language，超文本标记语言）文档、XHTML（Extensible HyperTextMarkup Language，可扩展超文本标记语言）文档和SVG（Scalable VectorGraphics，可缩放矢量图形）文档，风格使用CSS（Cascading StyleSheets，层叠样式表），脚本使用JavaScript。在JavaScript执行环境和Qt对象模型间搭建的桥梁，实现了使用WebKit的JavaScript环境访问本地对象。关于这一点，大家可以在帮助中参考The QtWebKit Bridge关键字对应的文档。通过整合Qt的网络模块，实现了从Web服务器、本地文件系统甚至Qt资源系统中透明的加载Web页面。





环境： Windows Xp + Qt 4.8.5+Qt Creator2.8.0




目录

一、简单应用
二、扩展应用




正文

一、简单应用


下面我们来实现一个可以打开特定网页的程序。新建空的Qt 项目，在pro 项目文件中添加一行代码：QT += webkit ，然后向项目中添加一个main.cpp 文件，并在其中添加如下代码：
#include   <QWebView>
#include   <QApplication>
int   main(int argc, char* argv[])
{
     QApplication   a(argc,   argv);
     QWebView   view;
     view. load(QUrl("http://www.qter.org"));
     view. show();
     return   a. exec();
}


        要使用WebKit ，就要先添加webkit 模块。QWebView 是QtWebKit 模块主要的窗体部件，它可以在各种应用程序中用来显示Internet 上的网页内容。QWebView 作为一个窗口部件，可以嵌入到窗体或者图形视图部件中。


QWebView用来显示Web页面，每个QWebView实例都包含一个QWebPage对象。QWebPage提供了对一个页面的文档结构的访问，描述了如框架（frame）、访问历史记录和可编辑内容的撤销/重做栈等特色。每一个QWebPage都包含一个QWebFrame对象作为它的主框架。在HTML中的每一个单独的框架都可以使用QWebFrame来表示，这个类包含了到JavaScript窗口对象的桥梁，而且可以进行绘制。在QWebPage的主框架中可以包含很多的子框架。


HTML文档中单独的元素可以通过DOM JavaScript接口进行访问，在QtWebKit中与这个接口等价的接口由QWebElement来表示。QWebElement对象可以使用QWebFrame的findAllElement()和findFirstElement()函数来获取。一般的网页浏览器的特色设置都可以通过QWebSettings类来配置，可以通过默认设置为所有的QWebPage实例提供默认值。单独的属性可以使用页面指定的设置对象进行重写。



二、扩展应用


下面再来看一个可以随意更改网址并且可以显示网站logo的例子。新建Qt Gui应用，项目名称为“webview”，类名和基类保持“MainWindow”和“QMainWindow”不变。完成后向webview.pro文件中添加QT += webkit一行代码，并按下Ctrl + S保存该文件。



1. 下面到mainwindow.h 文件中，先添加头文件：
#include   <QWebView>
#include   <QLineEdit>
然后添加槽的声明：
protected   slots :
     void   changeLocation();     //  改变路径
     void   setProgress(int);     //  更新进度
     void   adjustTitle();        //  更新标题显示
void finishLoading(bool);  // 加载完成后进行处理
        再添加对象和变量定义：
QWebView   * view ;
QLineEdit   * locationEdit ;
int   progress ;



2. 下面到mainwindow.cpp 文件中，在构造函数中添加如下代码：
  1. progress = 0;
  2. view = new QWebView(this);
  3. setCentralWidget(view);
  4. resize(800, 600);

  6. // 关联信号和槽
  7. connect(view, SIGNAL(loadProgress(int)), this, SLOT(setProgress(int)));
  8. connect(view, SIGNAL(titleChanged(QString)), this, SLOT(adjustTitle()));
  9. connect(view, SIGNAL(loadFinished(bool)), this, SLOT(finishLoading(bool)));
  10. locationEdit = new QLineEdit(this);
  11. connect(locationEdit, SIGNAL(returnPressed()), this, SLOT(changeLocation()));

  13. // 向工具栏添加动作和部件
  14. ui->mainToolBar->addAction(view->pageAction(QWebPage::Back));
  15. ui->mainToolBar->addAction(view->pageAction(QWebPage::Forward));
  16. ui->mainToolBar->addAction(view->pageAction(QWebPage::Reload));
  17. ui->mainToolBar->addAction(view->pageAction(QWebPage::Stop));
  18. ui->mainToolBar->addWidget(locationEdit);

  20. // 设置并加载初始网页地址
  21. locationEdit->setText("http://www.baidu.com");
  22. view->load(QUrl("http://www.baidu.com"));
复制代码
        当QWebView 开始加载时，会发射loadStarted() 信号；而每当一个网页元素（例如一张图片或一个脚本等）加载完成时，都会发射loadProgress() 信号；最后，当加载全部完成后，会发射loadFinished() 信号，如果加载成功，该函数的参数为true ，否则为false 。可以使用title() 来获取HTML 文档的标题，如果标题发生了改变，将会发射titleChanged() 信号。



3. 下面添加那几个槽的定义：
void   MainWindow :: changeLocation()
{
     QUrl   url   =   QUrl ( locationEdit -> text());
     view -> load(url);
     view -> setFocus();
}
void   MainWindow :: setProgress(int p)
{
     progress   =   p;
     adjustTitle();
}
void   MainWindow :: adjustTitle()
{
     if   (   progress   <=   0   ||   progress   >=   100 )   {
        setWindowTitle(view->title());
     }   else   {
setWindowTitle(QString("%1 (%2%)").arg(view->title()).arg(progress));
     }
}
void   MainWindow :: finishLoading(bool finished)
{
     if   (finished)   {
        progress   =   100 ;
        setWindowTitle(view->title());
     }   else   {
        setWindowTitle("web page loading error!");
     }
}


        下面运行程序，效果如下图所示：






结语


WebKit 是一个很庞大的体系，我们这里只是讲解了其最基本的应用，有兴趣的朋友可以结合 Qt 文档来进一步的学习。
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平

avatar 开放原子开发者工作坊

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

avatar 开放原子开发者工作坊