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 模块

Web engine view 是 Qt WebEngine 模块的主要 Widget 组件。它可以被用于各种应用程序中以加载 Web 内容。在视图中, Web 引擎页面 保持负责 Web 内容的主框架,导航链接 history ,和 actions 。视图和页面非常相似,因为它们提供了一套常见函数。

所有页面属于 Web 引擎配置文件 包含共享 settings , scripts ,和 Cookie 。配置文件可以被用于把页面彼此隔离。典型用例是专用配置文件为 隐私浏览 模式,没有永久保存信息的位置。

注意: 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 69.0.3497.128, 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 实例有一 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 应用程序

WebEngineView QML type allows Qt Quick applications to render regions of dynamic web content. A WebEngineView type may share the screen with other QML types or encompass the full screen as specified within the Qt Quick application.

To make sure that OpenGL context can be shared between the GUI and render processes, the web engine must be initialized by using QtWebEngine::initialize in the application main source file, as illustrated by the following code snippet:

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

An application can load pages into the WebEngineView , using either an URL or HTML string, and navigate within session history. By default, links to different pages load within the same WebEngineView object, but web sites may request them to be opened as a new tab, window, or dialog.

The following sample QML application loads a web page using the 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 证书去验证对等方的证书。

WebEngineCertificateError::error and QWebEngineCertificateError::Error enumerations provide information about the types of certificate errors that might occur. The errors can be handled by using the WebEngineView::certificateError QML method or by reimplementing the QWebEnginePage::certificateError 函数。

代理支持

Qt WebEngine 使用的代理设置来自 Qt Network ,并把它们转发给 Chromium 的网络堆栈。若 QNetworkProxy::applicationProxy 被设置,它也会被用于 Qt WebEngine。若 QNetworkProxyFactory::usesSystemConfiguration () 被启用,则从系统自动检索代理设置。设置来自已安装的 QNetworkProxyFactory 将被忽略,虽然。

Not all properties of QNetworkProxy are supported by Qt WebEngine. That is, QNetworkProxy::type (), QNetworkProxy::hostName () 和 QNetworkProxy::port () are taken into account. All other proxy settings such as QNetworkProxy::rawHeader (), QNetworkProxy::user (),或 QNetworkProxy::password () are ignored.

If a proxy requires authentication, QWebEnginePage::proxyAuthenticationRequired 被发射。对于 Qt Quick,展示对话框。

高 DPI 支持

要支持高 DPI (每英寸点数) 设备,推荐应用程序属性 Qt::AA_EnableHighDpiScaling is set to enable automatic scaling based on the pixel density of the monitor. In Qt WebEngine applications, the scaling affects the default zooming factor and scrollbar size.

例如:

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 files. Depending on the target resolutions, one or both of these files need to be deployed.

更多信息,请见 高 DPI 显示 .

使用 WebEngine Core

Qt WebEngine Core provides an API shared by Qt WebEngine and Qt WebEngine Widgets for handling URL requests issued for the networking stack of Chromium and for accessing its HTTP cookies.

实现 QWebEngineUrlRequestInterceptor interface and installing the interceptor on a profile enables intercepting, blocking, and modifying URL requests ( QWebEngineUrlRequestInfo ) before they reach the networking stack of Chromium.

QWebEngineUrlSchemeHandler can be registered for a profile to add support for custom URL schemes. Requests for the scheme are then issued to QWebEngineUrlSchemeHandler::requestStarted () as QWebEngineUrlRequestJob 对象。

QWebEngineCookieStore class provides functions for accessing HTTP cookies of Chromium. The functions can be used to synchronize cookies with QNetworkAccessManager , as well as to set, delete, and intercept cookies during navigation.

平台注意事项

Qt WebEngine 目前只支持 Windows Linux 及 macOS . Due to Chromium build requirements it also often requires a newer compiler than the rest of Qt. See Qt WebEngine 平台注意事项 进一步了解细节。

Qt WebEngine 取代 Qt WebKit 模块基于 WebKit 工程,但没有主动同步上游 WebKit 代码,从 Qt 5.2 起,在 Qt 5.5 被弃用。有关如何把 Qt WebKit 小部件应用程序更改为使用 Qt WebEngine 小部件的技巧,见 从 Qt WebKit 移植到 Qt WebEngine .

Qt WebView 模块允许在可用平台上使用本机 Web 浏览器。

Qt WebChannel 模块可以被用于创建双向通信通道介于 QObject 对象在 C++ 侧和 JavaScript 在 QML 侧。