Qt编程：QtWebKit（一）

2014-08-28 18:32 ⁄ 工业·编程 ⁄ 共 2015字 ⁄ 字号小中大 ⁄ 暂无评论

WebKit 是一个开源的浏览器引擎，与之相应的引擎有Gecko（Mozilla Firefox 等使用的排版引擎）和Trident（也称为MSHTML，IE 使用的排版引擎）。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。

相关阅读

----理解WebKit和Chromium: 浏览器综述

现在浏览器的内核引擎，基本上是三分天下：

Trident: IE 以Trident 作为内核引擎;

Gecko: Firefox 是基于 Gecko 开发;

WebKit: Safari, Google Chrome,搜狗浏览器基于 Webkit 开发。

WebKit内核在手机上的应用十分广泛，例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。

WebKit从Qt 4.4开始被作为一个Module被集成到Qt中。Qt 4.7 使Qt WebKit集成的稳定性和性能均得到提升的更新。QtWebKit提供了一个web浏览器引擎使World Wide Web更容易集成到Qt应用中. 使web页面能显示各种本地控件，通过JavaScript和本地对象交互.

下面是我写的一个简单的QtWebKit程序。

****.pro
#-------------------------------------------------
#
# Project created by QtCreator 2011-01-01T11:44:58
#
#-------------------------------------------------

QT       += core gui
QT       += webkit

TARGET = webkit2
TEMPLATE = app

SOURCES += main.cpp/
        mainwindow.cpp

HEADERS += mainwindow.h

OTHER_FILES += /
    hellowebkit.html /
    hellowebkit.js /
    hellowebkit.css

RESOURCES += /
    resource.qrc

//main.cpp
#include <QtGui/QApplication>
#include "mainwindow.h"
#include <QtWebKit/QWebView>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QWebView *view = new QWebView;
    view->load(QUrl("qrc:/html/hellowebkit.html"));
    view->show();

    return a.exec();
}

//hellowebkit.html
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
       <title>HelloWorld</title>
       <mce:script type="text/javascript" src="qrc:/html/hellowebkit.js" mce_src="qrc://writeblog.csdn.net/html/hellowebkit.js"></mce:script>
       <link rel="stylesheet" href="qrc:/html/hellowebkit.css" mce_href="qrc://writeblog.csdn.net/html/hellowebkit.css" type="text/css"/>
    </head>
    <body>
      <h1>Hello WebKit<h1>
      <input type="submit" onClick="showMsg()" value="Click Me"/>
    </body>
</html>

//hellowebkit.css
body {
background-color:#99FF00;}
}

//hellowebkit.js
function showMsg() {
alert("Hello WebKit!");
}