1. 概述

QT内嵌浏览器支持拦截请求、获取cookie、js代码注入及js调用QT方法。本篇主要介绍js调用QT方法其他方式的使用QT WebEngineView 拦截请求、获取cookie，本文代码基于QT WebEngineView 拦截请求、获取cookie进行编写

2. JS调用QT方法

其中QT中用到QWebChannel。与JS交互的对象需要通过QWebChannel对象进行注册，注册完成后QWebChannel对象要设置到QWebEngineView的page。

JS中用到qwebchannel.js，这个文件通常在QT的examples/webchannel/share目录下。这里附带了QT 5.15.2中的qwebchannel.js源码，如下：

/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2016 Klarälvdalens Datakonsult AB, a KDAB Group company, info@kdab.com, author Milian Wolff <milian.wolff@kdab.com>
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QtWebChannel module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:LGPL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 3 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL3 included in the
** packaging of this file. Please review the following information to
** ensure the GNU Lesser General Public License version 3 requirements
** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 2.0 or (at your option) the GNU General
** Public license version 3 or any later version approved by the KDE Free
** Qt Foundation. The licenses are as published by the Free Software
** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-2.0.html and
** https://www.gnu.org/licenses/gpl-3.0.html.
**
** $QT_END_LICENSE$
**
****************************************************************************/"use strict";var QWebChannelMessageTypes = {signal: 1,propertyUpdate: 2,init: 3,idle: 4,debug: 5,invokeMethod: 6,connectToSignal: 7,disconnectFromSignal: 8,setProperty: 9,response: 10,
};var QWebChannel = function(transport, initCallback)
{if (typeof transport !== "object" || typeof transport.send !== "function") {console.error("The QWebChannel expects a transport object with a send function and onmessage callback property." +" Given is: transport: " + typeof(transport) + ", transport.send: " + typeof(transport.send));return;}var channel = this;this.transport = transport;this.send = function(data){if (typeof(data) !== "string") {data = JSON.stringify(data);}channel.transport.send(data);}this.transport.onmessage = function(message){var data = message.data;if (typeof data === "string") {data = JSON.parse(data);}switch (data.type) {case QWebChannelMessageTypes.signal:channel.handleSignal(data);break;case QWebChannelMessageTypes.response:channel.handleResponse(data);break;case QWebChannelMessageTypes.propertyUpdate:channel.handlePropertyUpdate(data);break;default:console.error("invalid message received:", message.data);break;}}this.execCallbacks = {};this.execId = 0;this.exec = function(data, callback){if (!callback) {// if no callback is given, send directlychannel.send(data);return;}if (channel.execId === Number.MAX_VALUE) {// wrapchannel.execId = Number.MIN_VALUE;}if (data.hasOwnProperty("id")) {console.error("Cannot exec message with property id: " + JSON.stringify(data));return;}data.id = channel.execId++;channel.execCallbacks[data.id] = callback;channel.send(data);};this.objects = {};this.handleSignal = function(message){var object = channel.objects[message.object];if (object) {object.signalEmitted(message.signal, message.args);} else {console.warn("Unhandled signal: " + message.object + "::" + message.signal);}}this.handleResponse = function(message){if (!message.hasOwnProperty("id")) {console.error("Invalid response message received: ", JSON.stringify(message));return;}channel.execCallbacks[message.id](message.data);delete channel.execCallbacks[message.id];}this.handlePropertyUpdate = function(message){message.data.forEach(data => {var object = channel.objects[data.object];if (object) {object.propertyUpdate(data.signals, data.properties);} else {console.warn("Unhandled property update: " + data.object + "::" + data.signal);}});channel.exec({type: QWebChannelMessageTypes.idle});}this.debug = function(message){channel.send({type: QWebChannelMessageTypes.debug, data: message});};channel.exec({type: QWebChannelMessageTypes.init}, function(data) {for (const objectName of Object.keys(data)) {new QObject(objectName, data[objectName], channel);}// now unwrap properties, which might reference other registered objectsfor (const objectName of Object.keys(channel.objects)) {channel.objects[objectName].unwrapProperties();}if (initCallback) {initCallback(channel);}channel.exec({type: QWebChannelMessageTypes.idle});});
};function QObject(name, data, webChannel)
{this.__id__ = name;webChannel.objects[name] = this;// List of callbacks that get invoked upon signal emissionthis.__objectSignals__ = {};// Cache of all properties, updated when a notify signal is emittedthis.__propertyCache__ = {};var object = this;// ----------------------------------------------------------------------this.unwrapQObject = function(response){if (response instanceof Array) {// support list of objectsreturn response.map(qobj => object.unwrapQObject(qobj))}if (!(response instanceof Object))return response;if (!response["__QObject*__"] || response.id === undefined) {var jObj = {};for (const propName of Object.keys(response)) {jObj[propName] = object.unwrapQObject(response[propName]);}return jObj;}var objectId = response.id;if (webChannel.objects[objectId])return webChannel.objects[objectId];if (!response.data) {console.error("Cannot unwrap unknown QObject " + objectId + " without data.");return;}var qObject = new QObject( objectId, response.data, webChannel );qObject.destroyed.connect(function() {if (webChannel.objects[objectId] === qObject) {delete webChannel.objects[objectId];// reset the now deleted QObject to an empty {} object// just assigning {} though would not have the desired effect, but the// below also ensures all external references will see the empty map// NOTE: this detour is necessary to workaround QTBUG-40021Object.keys(qObject).forEach(name => delete qObject[name]);}});// here we are already initialized, and thus must directly unwrap the propertiesqObject.unwrapProperties();return qObject;}this.unwrapProperties = function(){for (const propertyIdx of Object.keys(object.__propertyCache__)) {object.__propertyCache__[propertyIdx] = object.unwrapQObject(object.__propertyCache__[propertyIdx]);}}function addSignal(signalData, isPropertyNotifySignal){var signalName = signalData[0];var signalIndex = signalData[1];object[signalName] = {connect: function(callback) {if (typeof(callback) !== "function") {console.error("Bad callback given to connect to signal " + signalName);return;}object.__objectSignals__[signalIndex] = object.__objectSignals__[signalIndex] || [];object.__objectSignals__[signalIndex].push(callback);// only required for "pure" signals, handled separately for properties in propertyUpdateif (isPropertyNotifySignal)return;// also note that we always get notified about the destroyed signalif (signalName === "destroyed" || signalName === "destroyed()" || signalName === "destroyed(QObject*)")return;// and otherwise we only need to be connected only onceif (object.__objectSignals__[signalIndex].length == 1) {webChannel.exec({type: QWebChannelMessageTypes.connectToSignal,object: object.__id__,signal: signalIndex});}},disconnect: function(callback) {if (typeof(callback) !== "function") {console.error("Bad callback given to disconnect from signal " + signalName);return;}object.__objectSignals__[signalIndex] = object.__objectSignals__[signalIndex] || [];var idx = object.__objectSignals__[signalIndex].indexOf(callback);if (idx === -1) {console.error("Cannot find connection of signal " + signalName + " to " + callback.name);return;}object.__objectSignals__[signalIndex].splice(idx, 1);if (!isPropertyNotifySignal && object.__objectSignals__[signalIndex].length === 0) {// only required for "pure" signals, handled separately for properties in propertyUpdatewebChannel.exec({type: QWebChannelMessageTypes.disconnectFromSignal,object: object.__id__,signal: signalIndex});}}};}/*** Invokes all callbacks for the given signalname. Also works for property notify callbacks.*/function invokeSignalCallbacks(signalName, signalArgs){var connections = object.__objectSignals__[signalName];if (connections) {connections.forEach(function(callback) {callback.apply(callback, signalArgs);});}}this.propertyUpdate = function(signals, propertyMap){// update property cachefor (const propertyIndex of Object.keys(propertyMap)) {var propertyValue = propertyMap[propertyIndex];object.__propertyCache__[propertyIndex] = this.unwrapQObject(propertyValue);}for (const signalName of Object.keys(signals)) {// Invoke all callbacks, as signalEmitted() does not. This ensures the// property cache is updated before the callbacks are invoked.invokeSignalCallbacks(signalName, signals[signalName]);}}this.signalEmitted = function(signalName, signalArgs){invokeSignalCallbacks(signalName, this.unwrapQObject(signalArgs));}function addMethod(methodData){var methodName = methodData[0];var methodIdx = methodData[1];// Fully specified methods are invoked by id, others by name for host-side overload resolutionvar invokedMethod = methodName[methodName.length - 1] === ')' ? methodIdx : methodNameobject[methodName] = function() {var args = [];var callback;var errCallback;for (var i = 0; i < arguments.length; ++i) {var argument = arguments[i];if (typeof argument === "function")callback = argument;else if (argument instanceof QObject && webChannel.objects[argument.__id__] !== undefined)args.push({"id": argument.__id__});elseargs.push(argument);}var result;// during test, webChannel.exec synchronously calls the callback// therefore, the promise must be constucted before calling// webChannel.exec to ensure the callback is set upif (!callback && (typeof(Promise) === 'function')) {result = new Promise(function(resolve, reject) {callback = resolve;errCallback = reject;});}webChannel.exec({"type": QWebChannelMessageTypes.invokeMethod,"object": object.__id__,"method": invokedMethod,"args": args}, function(response) {if (response !== undefined) {var result = object.unwrapQObject(response);if (callback) {(callback)(result);}} else if (errCallback) {(errCallback)();}});return result;};}function bindGetterSetter(propertyInfo){var propertyIndex = propertyInfo[0];var propertyName = propertyInfo[1];var notifySignalData = propertyInfo[2];// initialize property cache with current value// NOTE: if this is an object, it is not directly unwrapped as it might// reference other QObject that we do not know yetobject.__propertyCache__[propertyIndex] = propertyInfo[3];if (notifySignalData) {if (notifySignalData[0] === 1) {// signal name is optimized away, reconstruct the actual namenotifySignalData[0] = propertyName + "Changed";}addSignal(notifySignalData, true);}Object.defineProperty(object, propertyName, {configurable: true,get: function () {var propertyValue = object.__propertyCache__[propertyIndex];if (propertyValue === undefined) {// This shouldn't happenconsole.warn("Undefined value in property cache for property \"" + propertyName + "\" in object " + object.__id__);}return propertyValue;},set: function(value) {if (value === undefined) {console.warn("Property setter for " + propertyName + " called with undefined value!");return;}object.__propertyCache__[propertyIndex] = value;var valueToSend = value;if (valueToSend instanceof QObject && webChannel.objects[valueToSend.__id__] !== undefined)valueToSend = { "id": valueToSend.__id__ };webChannel.exec({"type": QWebChannelMessageTypes.setProperty,"object": object.__id__,"property": propertyIndex,"value": valueToSend});}});}// ----------------------------------------------------------------------data.methods.forEach(addMethod);data.properties.forEach(bindGetterSetter);data.signals.forEach(function(signal) { addSignal(signal, false); });Object.assign(object, data.enums);
}//required for use with nodejs
if (typeof module === 'object') {module.exports = {QWebChannel: QWebChannel};
}

2.1 QT代码

新建JSCommunication.hpp文件，这个类主要定义与JS通讯的方法，与JS通讯的方式都要以 槽函数方式定义 ，代码如下：

#ifndef JSCOMMUNICATION_H
#define JSCOMMUNICATION_H
#include <QObject>
#include <QDebug>class JSCommunication : public QObject
{Q_OBJECT
public slots:/** 1. 需要将与JS通讯的函数定义为槽函数*/void test(QString content){qDebug() << content;}
};
#endif // JSCOMMUNICATION_H

2.2 HTML/代码

被加载的页面代码如下：

<!DOCTYPE html>
<html><head><title>jsCommunication</title></head><body style="background-color: bisque;"><div ><p style="font-size: 20;font-family:serif;">这里仅仅是为了显示下，表示这个页面加载成功了</p></div><script src="./qwebchannel.js"></script><script type="text/javascript">// 创建QWebChannel对象new QWebChannel(qt.webChannelTransport,function(channel){// 通过 channel 获取与qt交互的对象，这里获取的对象名称(jsCommunication)与qt中注册的对象名称一致var jsCommunicationInstance = channel.objects.jsCommunication;// 调用QT对象中的方法jsCommunicationInstance.test("JS send test message!");});</script>    </body></html>

3 WebEngineView示例

这里的代码与QT WebEngineView 拦截请求、获取cookie的区别是增加内存管理的处理及与JS通讯的逻辑，均可参照QT WebEngineView 拦截请求、获取cookie，WebEngineView.hpp代码如下，：

#ifndef WEBENGINEVIEW_H
#define WEBENGINEVIEW_H
#include <QWebEngineView>
#include <QWebEngineProfile>
#include <QWebEngineCookieStore>
#include "MyInterceptor.hpp"
#include <QTimer>
#include "CustomWebEnginePage.hpp"
#include <QAction>
#include <QWebChannel>
#include "JSCommunication.hpp"class WebEngineView:public QWebEngineView
{Q_OBJECT
public:WebEngineView(QWidget *p = nullptr):QWebEngineView(p){}~WebEngineView(){if(m_pjsCommunication)delete m_pjsCommunication;if(m_pcustomWebEnginePage)delete m_pcustomWebEnginePage;}void run(void){this->page()->profile()->cookieStore()->deleteAllCookies();// 关闭右键菜单//this->setContextMenuPolicy(Qt::ContextMenuPolicy::NoContextMenu);MyInterceptor *interceptor = new MyInterceptor(this);if(nullptr == m_pcustomWebEnginePage)m_pcustomWebEnginePage = new CustomWebEnginePage;this->setPage(m_pcustomWebEnginePage);// 设置右键菜单// this->pageAction(QWebEnginePage::Back)->setText("TT");// url请求拦截器this->page()->setUrlRequestInterceptor(interceptor);connect(this->page()->profile()->cookieStore(), SIGNAL(cookieAdded(const QNetworkCookie &)),this, SLOT(getCookie(const QNetworkCookie &)));connect(this, SIGNAL(loadFinished(bool)),this, SLOT(loadFinishedSlot(bool)));// 创建通道对象用于和JS交互if(nullptr == m_pchannel)m_pchannel = new QWebChannel(this);// 创建于JS实际交互的对象if(nullptr == m_pjsCommunication)m_pjsCommunication = new JSCommunication;/** 向通道注册用于交互的对象*  这里注册对象名"jsCommunication"与JS里用到的对象一致，这样在JS里才能访问到这个用于交互的对象*/m_pchannel->registerObject("jsCommunication", (QObject*)m_pjsCommunication);// 将交互通道设置到page中page()->setWebChannel(m_pchannel);this->load(QUrl("D:/TestCode/QTCode/4_QTWebEngineView/QTWebEngineView/jsCommunication.html"));//this->load(QUrl("https://mail.qq.com/"));this->show();}private slots:void loadFinishedSlot(bool ok) {if(ok){QTimer::singleShot(100, this, SLOT(getContentSlot()));}}void getContentSlot() {//        this->page()->runJavaScript("function GetCookie(){return document.cookie}");//            this->page()->runJavaScript("GetCookie();",[](const QVariant& v){//                qDebug()<<v.toString();//            });//        this->page()->toPlainText([](const QString &content) {//            qDebug() << content;//        });}void getCookie(const QNetworkCookie& cookie){qDebug() << cookie.domain() << cookie.name() << cookie.value();}
private:// 用于与前端界面JS通讯的通道QWebChannel* m_pchannel = nullptr;// 用于与前端界交互的对象，最终需要被注册到QWebChannel对象中JSCommunication* m_pjsCommunication = nullptr;// 自定义page中忽略了证书的认证处理CustomWebEnginePage* m_pcustomWebEnginePage = nullptr;
};#endif // WEBENGINEVIEW_H

4. 效果展示

启动后界面如下：

JS发送的信息输出如下：