Qt WebEngine 概述

Qt WebEngine 模塊提供 Web 瀏覽器引擎,使之更易於把 WWW (萬維網) 內容嵌入到沒有本機 Web 引擎平颱的 Qt 應用程序中。

Qt WebEngine 提供 C++ 類和 QML 類型為渲染 HTML XHTML SVG 文檔,樣式化使用 CSS (級聯樣式錶),及腳本化采用 JavaScript。HTML 文檔可以完全可編輯,通過用戶透過使用 contenteditable 屬性在 HTML 元素。

Qt WebEngine 體係結構

Qt WebEngine 功能被分為以下模塊:

頁麵渲染和 JavaScript 執行由 GUI 進程分離到 Qt WebEngine Processes。它是必須與應用程序一起隨附的庫,若 Qt 庫被綁定到應用程序中。

Qt WebEngine Widgets 模塊

A Web 引擎視圖 是 Qt WebEngine 模塊的主要 Widget 組件。它可以被用於各種應用程序中以加載 Web 內容。在視圖中, Web 引擎頁麵 保持負責 Web 內容的主框架, history of navigated links, and actions 。視圖和頁麵非常相似,因為它們提供瞭一套常見函數。

所有頁麵屬於 Web 引擎 Profile (配置文件) 包含共享 settings , scripts ,和 Cookie 。可以使用 Profile (配置文件) 以彼此隔離頁麵。典型用例是專用 Profile 為 隱私瀏覽 模式,沒有永久保存信息的位置。

注意: Qt WebEngine Widgets 模塊使用 Qt Quick scene graph 把網頁元素組閤成一視圖。這意味著 UI 進程要求 OpenGL ES 2.0 或 OpenGL 2.0 為其渲染。

Qt WebEngine 模塊

Qt WebEngine QML 實現包含如 Qt WebEngine Widgets 實現相同的元素,除不可單獨訪問 Web 引擎頁麵外。支持的頁麵功能已集成到 Web 引擎視圖。

Qt WebEngine Core 模塊

Qt WebEngine 核心基於 Chromium 工程 。Chromium 提供自己的網絡和描繪引擎,並與其從屬模塊緊密協調開發。

注意: Qt WebEngine 基於 Chromium,但不包含或使用任何可能由 Google 構建 交付屬於 Chrome 瀏覽器的服務或附件。可以找到有關 Chromium 和 Chrome 之間差異的更多詳細信息,在此 概述 屬於文檔編製在 Chromium 工程 上遊源代碼樹。

This version of Qt WebEngine is based on Chromium version 87.0.4280, with additional security fixes from newer versions.

Qt WebEngine Process

Qt WebEngine Process 是用於渲染網頁並執行 JavaScript 的單獨可執行文件。這能緩解安全問題並隔離由特定內容導緻的崩潰。

把 Web 內容嵌入基於 Widget 的應用程序

使用 QWebEngineView 類以最簡單方式顯示網頁。因為它是 Widget,可以嵌入 QWebEngineView 到錶單中,並使用其方便函數去下載和顯示網站。

QWebEngineView *view = new QWebEngineView(parent);
view->load(QUrl("http://www.qt.io/"));
view->show();
					

實例化的 QWebEngineView has one QWebEnginePage . QWebEnginePage 可以擁有 QWebEngineHistory 提供訪問頁麵的導航曆史和幾個 QAction 對象在網頁上應用動作。此外, QWebEnginePage 有能力在頁麵主框架的上下文中運行 JavaScript 代碼,並啓用針對特定事件 (像展示自定義身份驗證對話框) 的定製處理程序。

每個 QWebEnginePage 屬於 QWebEngineProfile 可以擁有 QWebEngineSettings 用於指定頁麵設置, QWebEngineScriptCollection 用於在頁麵上運行腳本,和 QWebEngineCookieStore 用於訪問 Chromium 的 HTTP Cookie。 QWebEnginePage 也可以直接指嚮腳本集閤。

對於基於 Widget 的應用程序,Web 引擎被自動初始化,除非它被放置在插件中。在此情況下,它必須在應用程序 main 源文件中被初始化通過使用 QtWebEngine::initialize ,如以下代碼段所闡明的:

int main(int argc, char **argv)
{
    QApplication app(argc, argv);
    QtWebEngine::initialize();
    QMainWindow window;
    window.show();
    return app.exec();
}
					
					

把 Web 內容嵌入 Qt Quick 應用程序

The WebEngineView QML 類型允許 Qt Quick 應用程序渲染動態 Web 內容區域。 WebEngineView 類型可以與其它 QML 類型共享屏幕,或圍繞在 Qt Quick 應用程序中指定的全屏。

為確保 OpenGL 上下文可以在 GUI 和渲染進程之間共享,必須初始化 Web 引擎通過使用 QtWebEngine::initialize 在應用程序主源文件中,如以下代碼段所示:

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QtWebEngine::initialize();
    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/main.qml"));
    return app.exec();
}
					

應用程序可以把頁麵加載到 WebEngineView ,使用 URL 或 HTML 字符串,並在會話曆史中導航。默認情況下,指嚮不同頁麵的鏈接會被加載在同一 WebEngineView 對象,但網站可能要求把它們打開作為新選項卡、窗口或對話框。

以下樣本 QML 應用程序加載網頁使用 url 特性:

import QtQuick 2.0
import QtQuick.Window 2.0
import QtWebEngine 1.0
Window {
    width: 1024
    height: 750
    visible: true
    WebEngineView {
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}
					
					

腳本注入

Qt WebEngine 不允許直接訪問頁麵的 DOM (文檔對象模型)。無論如何,DOM 可以被審查和改編通過注入腳本。

頁麵 DOM 的構造是在文檔就緒時,通常在頁麵完全加載時。所以,創建文檔後盡快執行腳本不適於 DOM 操作,因為必須等待直到 DOM 就緒。

此外,注入的腳本共享相同 world 如在頁麵上的其它執行腳本,可能導緻衝突。要避免這, QWebEngineScript 類和 WebEngineScript QML 類型提供瞭 Chromium API 實現為 內容腳本擴展 。它們指定要運行的腳本、注入點及腳本運行的世界。這使在世界中能夠操縱訪問 DOM。

從 Qt 5.8 起,Qt WebEngine 支持增廣腳本通過使用以下 Greasemonkey-like 屬性 :

  • @exclude <regexp>
  • @include <regexp>
  • @match <regexp>
  • @name <free text>
  • @run-at [document-start|document-end|document-idle]

屬性確定是否以及何時 用戶腳本 運行。它們必須立即被放置在腳本開頭處,在 ==UserScript== 注釋:

// ==UserScript==
// @include http://*.qt.io/*
// @exclude http://wiki.qt.io/*
// ==/UserScript==
window.alert("Page is from qt.io, but not wiki.qt.io");
					

WebEngine 應用程序是使用 Qt Quick Compiler 構建的,且應用程序在 .qrc 資源中隨附瞭 JavaScript 文件,請考慮閱讀章節 Qt 資源文件中的 JavaScript 文件 .

管理證書

Qt WebEngine 使用自己的網絡堆棧,因此 QSslConfiguration 不被用於打開 SSL 連接。相反,Qt WebEngine 使用來自操作係統的根 CA 證書去驗證對等方的證書。

The WebEngineCertificateError::error and QWebEngineCertificateError::Error 枚舉提供可能發生證書錯誤的類型的有關信息。可以處理錯誤通過使用 WebEngineView::certificateError QML 方法或通過重實現 QWebEnginePage::certificateError 函數。

代理支持

Qt WebEngine 使用代理設置來自 Qt Network ,並把它們轉發給 Chromium 的網絡堆棧。若 QNetworkProxy::applicationProxy 有設置,也會用於 Qt WebEngine。若 QNetworkProxyFactory::usesSystemConfiguration () 被啓用,自動檢索係統代理設置。設置來自安裝的 QNetworkProxyFactory 將被忽略,雖然。

QNetworkProxy::user () 和 QNetworkProxy::password () 被設置,這些憑證將被自動用於代理身份驗證。由用戶提供有效憑證因為沒有錯誤處理迴調。

若沒有證書被設置采用 QNetworkProxy ,但代理要求身份驗證, QWebEnginePage::proxyAuthenticationRequired 被發射。對於 Qt Quick,展示對話框。

並非所有特性為 QNetworkProxy 都被 Qt WebEngine 所支持。也就是說, QNetworkProxy::type (), QNetworkProxy::hostName () 和 QNetworkProxy::port () 會考慮在內。所有其它代理設置,如 QNetworkProxy::rawHeader () 被忽略。

高 DPI 支持

要支持高 DPI (每英寸點數) 設備,推薦應用程序屬性 Qt::AA_EnableHighDpiScaling 設置為啓用基於監視器的像素密度的自動比例縮放。在 Qt WebEngine 應用程序中,比例縮放影響默認縮放因子和滾動條尺寸。

例如:

int main(int argc, char *argv[])
{
  QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
  QApplication app(argc, argv);
  // ...
}
					

QT WebEngine 把普通和高 DPI (每英寸點數) 分辨率圖像綁定到 qtwebengine_resources_100p.pak and qtwebengine_resources_200p.pak 文件。根據目標分辨率,需要部署這些文件中的一個或兩個。

更多信息,見 高 DPI 顯示 .

使用 WebEngine Core

Qt WebEngine Core 提供由 Qt WebEngine 和 Qt WebEngine Widgets 共享的 API,用於處理為 Chromium 網絡堆棧發齣的 URL 請求及訪問其 HTTP Cookie。

實現 QWebEngineUrlRequestInterceptor 接口並在 Profile (配置文件) 中安裝攔截器啓用攔截、阻塞及修改 URL 請求 ( QWebEngineUrlRequestInfo ) 在它們到達 Chromium 網絡堆棧之前。

A QWebEngineUrlSchemeHandler 可以注冊為 Profile (配置文件) 以添加自定義 URL 方案支持。然後會將方案請求發送給 QWebEngineUrlSchemeHandler::requestStarted () 作為 QWebEngineUrlRequestJob 對象。

The QWebEngineCookieStore 類提供訪問 Chromium HTTP Cookie 的函數。可以使用這些函數同步 Cookie 與 QNetworkAccessManager ,及在導航期間設置、刪除、攔截 Cookie。

平颱注意事項

Qt WebEngine 目前僅支持 Windows、Linux 和 macOS。由於 Chromium 的構建要求,它通常還需要比其餘 Qt 更新的編譯器。見 Qt WebEngine 平颱注意事項 進一步瞭解細節。

Qt WebEngine 取代 Qt WebKit 模塊基於 WebKit 工程,但沒有主動同步上遊 WebKit code since Qt 5.2 and has been deprecated in Qt 5.5. For tips on how to change a Qt WebKit widgets application to use Qt WebEngine widgets, see 從 Qt WebKit 移植到 Qt WebEngine .

The Qt WebView 模塊允許在可用平颱上使用本機 Web 瀏覽器。

The Qt WebChannel 模塊可以被用於創建雙嚮通信通道介於 QObject 對象在 C++ 側和 JavaScript 在 QML 側。