閱讀351 返回首頁    go 人物


[Qt教程] 第40篇 網絡(十)WebKit初識

[Qt教程] 第40篇 網絡(十)WebKit初識

樓主
 發表於 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("https://www.qter.org"));
    view.show();
    return a.exec();
}


       要使用WebKit,就要先添加webkit模塊。QWebViewQtWebKit模塊主要的窗體部件,它可以在各種應用程序中用來顯示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);

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

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

  17. // 設置並加載初始網頁地址
  18. locationEdit->setText("https://www.baidu.com");
  19. view->load(QUrl("https://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!");
    }
}


       下麵運行程序,效果如下圖所示:


01.jpg




結語



WebKit是一個很龐大的體係,我們這裏隻是講解了其最基本的應用,有興趣的朋友可以結合Qt文檔來進一步的學習。




涉及到的代碼:  myweb.rar (382 Bytes, 下載次數: 3)  webview.rar (2.17 KB, 下載次數: 5) 

最後更新:2017-04-03 14:54:11

  上一篇:go [Qt教程] 第21篇 數據庫(一)Qt數據庫應用簡介
  下一篇:go [Qt教程] 第39篇 網絡(九)進程和線程