当前位置：首页 > news >正文

QT C++ QWebEngine与Web JS之间通信

news 2025/11/13 6:33:09

Qt 与 Web 通信指南（QWebEngineView + QWebChannel）

概览

目标：让网页 JavaScript 与 Qt 客户端进行双向通信（调用本地方法、通知 UI）。
技术栈：Qt WebEngineWidgets + Qt WebChannel + JavaScript qwebchannel.js。
适用场景：在 QWebEngineView 内嵌外部或内部网页，并需要与桌面端交互。

通信模型

Qt 暴露一个 QObject（如 WebBridge），注册到 QWebChannel。
Web 端通过 qwebchannel.js 获得该对象（例如 bridge），直接调用其 slot 方法。
Qt 端通过 signals 向 UI 或其他模块转发事件，或主动调用 evaluateJavaScript 与 Web 交互。

快速集成步骤

引入依赖并链接：

CMake：

find_package(Qt6 REQUIRED COMPONENTS WebEngineWidgets WebChannel)
target_link_libraries(QuantClient PRIVATE Qt6::WebEngineWidgets Qt6::WebChannel)

实现桥对象（Qt → Web 暴露）：
- src/gui/web/WebBridge.h / src/gui/web/WebBridge.cpp
- 暴露 slot，在需要处 emit 信号给 UI 层。
在 QWebEngineView 完成加载前注册通道：
- webView->page()->setWebChannel(channel);
Web 端加载 qwebchannel.js 并初始化通道，获取 bridge 对象进行调用。

Qt 侧代码示例

// StrategyPerformanceDialog.cpp（片段）
QWebChannel* channel = new QWebChannel(this);
WebBridge* bridge = new WebBridge(this);
channel->registerObject(QStringLiteral("bridge"), bridge);
webView->page()->setWebChannel(channel);
QObject::connect(bridge, &WebBridge::openStrategyDetailRequested, this, &StrategyPerformanceDialog::onStrategyDetailRequested);

// WebBridge.h（片段）
class WebBridge : public QObject {Q_OBJECT
public:explicit WebBridge(QObject *parent = nullptr);
public slots:void refreshStrategyData();void openStrategyDetail(const QString &strategyId);
signals:void openStrategyDetailRequested(const QString &strategyId);
};

// WebBridge.cpp（片段）
void WebBridge::openStrategyDetail(const QString &strategyId) {emit openStrategyDetailRequested(strategyId);
}

Web 侧代码示例

页面可改（直接在 HTML 中）

<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script>new QWebChannel(qt.webChannelTransport, function(channel) {const bridge = channel.objects.bridge;bridge.refreshStrategyData();bridge.openStrategyDetail("strategy_123");});
</script>

页面不可改（Qt 侧注入）

// 加载完成后动态注入脚本
connect(webView, &QWebEngineView::loadFinished, this, [webView](bool){webView->page()->runJavaScript(R"((function(){var s=document.createElement('script');s.src='qrc:///qtwebchannel/qwebchannel.js';s.onload=function(){new QWebChannel(qt.webChannelTransport,function(c){window.bridge=c.objects.bridge;});};document.head.appendChild(s);})();)");
});

预注入（更稳，文档创建阶段）

QWebEngineScript script;
script.setName(QStringLiteral("qwebchannel-loader"));
script.setInjectionPoint(QWebEngineScript::DocumentCreation);
script.setWorldId(QWebEngineScript::MainWorld);
script.setRunsOnSubFrames(true);
script.setSourceCode(QStringLiteral("(function(){var s=document.createElement('script');" "s.src='qrc:///qtwebchannel/qwebchannel.js';" "s.onload=function(){new QWebChannel(qt.webChannelTransport,function(c){window.bridge=c.objects.bridge;});};" "document.head.appendChild(s);})();"
));
webView->page()->scripts().insert(script);

常见问题与排错

链接错误：Undefined symbols for architecture arm64 → 未将 WebBridge.cpp 加入构建或未链接 Qt6::WebChannel。
头文件找不到：'config/AppConfig.h' file not found → #include 相对路径错误，从 src/gui/mainwindow 到 src/gui/config 需用 ../config/AppConfig.h。
qwebchannel.js 加载失败：确保使用 qrc:///qtwebchannel/qwebchannel.js，并已链接 Qt6::WebChannel。
JS 不生效：确认已调用 webView->page()->setWebChannel(channel)，且对象名与 JS 一致（如 bridge）。