<a target="_blank" href="http://bbs.qter.org/forum.php?mod=viewthread&tid=691">樓主</a>
發表于 2013-9-11 17:26:05 | 檢視:
521| 回複: 10
webkit初識
版權聲明
該文章原創于作者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 <qlineedit>
然後添加槽的聲明：
protected slots:
void changelocation();
// 改變路徑
void setprogress(int);
// 更新進度
void adjusttitle();
// 更新标題顯示
void finishloading(bool); // 加載完成後進行處理
再添加對象和變量定義：
qwebview *view;
qlineedit *locationedit;
int progress;
2.下面到mainwindow.cpp檔案中，在構造函數中添加如下代碼：
progress = 0;
view = new qwebview(this);
setcentralwidget(view);
resize(800, 600);
// 關聯信号和槽
connect(view, signal(loadprogress(int)), this, slot(setprogress(int)));
connect(view, signal(titlechanged(qstring)), this, slot(adjusttitle()));
connect(view, signal(loadfinished(bool)), this, slot(finishloading(bool)));
locationedit = new qlineedit(this);
connect(locationedit, signal(returnpressed()), this, slot(changelocation()));
// 向工具欄添加動作和部件
ui->maintoolbar->addaction(view->pageaction(qwebpage::back));
ui->maintoolbar->addaction(view->pageaction(qwebpage::forward));
ui->maintoolbar->addaction(view->pageaction(qwebpage::reload));
ui->maintoolbar->addaction(view->pageaction(qwebpage::stop));
ui->maintoolbar->addwidget(locationedit);
// 設定并加載初始網頁位址
locationedit->settext("http://www.baidu.com");
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("web
page loading error!");
下面運作程式，效果如下圖所示：
結語
webkit是一個很龐大的體系，我們這裡隻是講解了其最基本的應用，有興趣的朋友可以結合qt文檔來進一步的學習。
涉及到的代碼：
bytes, 下載下傳次數: 3)
kb, 下載下傳次數: 5)