Qt 集成Web 的內容

Qt 集成Web 的內容

爲了創建基於Qt的Web應用程序，Qt提供了支持各種標準Web技術（如HTML，CSS和JavaScript）的接口。 這些接口使應用程序能夠嵌入來自萬維網的內容。

也可以將Qt C ++和QML代碼與HTML和JavaScript結合起來創建Web應用程序。通過Qt WebChannel，遠程客戶端可以訪問Qt的相關API。

Qt 中的WebEngine

Qt爲面向桌面和嵌入式平臺的應用程序提供基於Chromium的Qt WebEngine模塊。例如，Linux平臺的Web瀏覽器應用程序。

Qt還提供Qt WebView模塊，該模塊使用平臺的本機Web引擎。 例如，適用於Android和iOS的Rss Freed Reader。

這些頁面包含有關使用Qt WebEngine 的方法：

• Qt WebEngine 概述
• Qt WebView
• 從Qt WebKit移植到Qt WebEngine

Qt和HTML-JavaScript混合應用程序

Qt WebChannel模塊使HTML或JavaScript客戶端能夠訪問Qt API，例如QObject。它提供C ++或QML API，允許Qt應用程序與JavaScript和HTML前端進行通信。

API 信息如下：

• JavaScript API
• C++ API
• QML API
• 示例

Qt WebEngine 概述

Qt WebEngine模塊提供了一個Web瀏覽器引擎，可以輕鬆地將萬維網中的內容嵌入到Qt應用程序中，即使本地平臺沒有提供Web engine。

Qt WebEngine提供了用於呈現HTML，XHTML和SVG文檔的C ++類和QML類型，使用層疊樣式表（CSS）設置樣式並使用JavaScript編寫腳本。用戶可以通過在HTML元素上使用contenteditable屬性來編輯HTML文檔。

Qt WebEngine 架構

Qt WebEngine中的功能分爲以下幾個模塊：

• Qt WebEngine Widgets模塊，用於創建基於widget的Web應用程序。
• Qt WebEngine模塊，用於創建基於Qt Quick的Web應用程序。
• Qt WebEngine Core，用於與Chromium交互。

Page rendering和JavaScript執行從GUI過程分離到Qt WebEngine過程。 如果應用程序中有使用Qt庫，則在發佈程序的時候，也必須將Qt庫隨應用程序一起打包。

Qt WebEngine Widgets 模塊

web engine view 是Qt WebEngine模塊的主要widget組件。它可以在各種應用程序中用於加載Web內容。在視圖中，web engine page 包含一個主框架，負責Web內容，導航鏈接的歷史記錄和操作。View和Page非常相似，因爲它們提供了一組常用功能。

所有頁面都屬於包含共享設置，腳本和cookie的web engine profile。profile可用於將頁面彼此隔離。典型的用例是private browsing 模式的專用配置文件，其不會永久保存任何信息。

注意： 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 Project。Chromium提供自己的網絡和繪畫引擎，並與其依賴模塊緊密結合。

注意： Qt WebEngine基於Chromium，但不包含或使用任何可能屬於Google構建和提供的Chrome瀏覽器的服務或加載項。 您可以在此概述中找到有關Chromium和Chrome之間的差異，該概述是 Chromium Project 源代碼樹中文檔的一部分。

此版本的Qt WebEngine基於Chromium版本56.0.2924.122，其中包含更新版本的其他安全修復程序。

Qt WebEngine Process

Qt WebEngine Process是一個單獨的可執行文件，用於呈現網頁和執行JavaScript。 這可以緩解安全問題並隔離由特定內容引起的崩潰。

將Web內容嵌入到基於Widget的應用程序中

使用QWebEngineView 類以最簡單的方式顯示網頁。 因爲它是一個小部件，您可以將QWebEngineView 嵌入到表單中，並使用其便捷功能下載和顯示網站。

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

QWebEngineView 的一個實例包含一個QWebEnginePage 。 QWebEnginePage可以包含一個QWebEngineHistory 來提供訪問頁面的導航歷史記錄和若干操作網頁的QAction 對象。 此外，QWebEnginePage 能夠在頁面主框架的上下文中運行JavaScript代碼，併爲特定事件（如顯示自定義身份驗證對話框）啓用自定義的處理程序。

每個QWebEnginePage 都屬於一個QWebEngineProfile ，它可以包含一個用於指定頁面設置的QWebEngineSettings，一個用於在頁面上運行腳本的QWebEngineScriptCollection ，以及一個用於訪問Chromium的HTTP cookie的QWebEngineCookieStore。QWebEnginePage 也可以直接指向腳本集合。

對於基於widget的應用程序，Web引擎會自動初始化，除非它被放置在插件中。 在這種情況下，必須使用QtWebEngine::initialize ,在應用程序主源文件中初始化它，如以下代碼片段所示：

int main(int argc, char **argv)
{
    QApplication app(argc, argv);

    QtWebEngine::initialize();

    QMainWindow window;
    window.show();

    return app.exec();
}

將Web內容嵌入到Qt Quick應用程序中

WebEngineView QML類型允許Qt Quick應用程序呈現動態Web內容。WebEngineView 類型可以與其他QML類型共享屏幕，或者獨佔整個Qt Quick應用程序顯示頁面。

要確保可以在GUI和render processes之間共享OpenGL上下文，必須使用應用程序主源文件中的QtWebEngine::initialize 初始化Web引擎，如以下代碼段所示：

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QtWebEngine::initialize();

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

應用程序可以使用URL或HTML字符串將頁面加載到 WebEngineView中，並在會話歷史記錄中導航。默認情況下，指向不同頁面的鏈接在同一 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: "http://www.qt.io"
    }
}

注入腳本

Qt WebEngine不允許直接訪問頁面的文檔對象模型（DOM）。 但是，可以通過注入腳本來檢查和調整DOM。

在文檔準備好時，通常在頁面完全加載時創建頁面的DOM。 因此，一旦創建文檔就執行腳本不適合DOM操作，其必須等到DOM準備好之後。

此外，注入的腳本與頁面上執行的其他腳本共享相同的世界，這可能會導致衝突。爲避免這種情況，QWebEngineScript 類和WebEngineScript QML類型提供了Chromium API for Content Script Extensions的實現。它們指定要運行的腳本，注入點以及運行腳本的世界。這使得訪問DOM能夠在一個世界中操縱它。

從Qt 5.8開始，Qt WebEngine支持使用 Greasemonkey-like attributes 擴充腳本：

• @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");