如何设置 QWebChannel JS API 以在 QWebEngineView 中使用？

Posted 2023-02-16

【中文标题】如何设置 QWebChannel JS API 以在 QWebEngineView 中使用？

【英文标题】：How to setup QWebChannel JS API for use in a QWebEngineView?

【发布时间】：2016-09-22 22:24:44

【问题描述】：

由于 Qt 的文档远未完成，有哪些设置 QWebChannel 的方法，与文档中推荐的在 html 页面中添加 <script> 标记有什么不同？

【参考方案1】：

在 URL qrc:///qtwebchannel/qwebchannel.js 处加载所需的脚本有不同的选项：

注意：

只有在 QWebEngineView 中查看页面时，才能使用该 URL。否则，您可能需要将 API 文件加载到您的网络服务器。

先决条件：

将QT += webchannel 添加到您的.pro 文件并运行qmake

使用runjavascript()执行Qt的QWebChannel JS API中的代码：

我最喜欢的方法是因为它看起来很简单，而且到目前为止一直很可靠。 请记住，在此代码完成之前，API 可能尚未设置，因为 runJavaScript() 方法在执行 JS 代码之前不会阻塞当前线程。

QFile apiFile(":/qtwebchannel/qwebchannel.js"); //load the API from the resources
if(!apiFile.open(QIODevice::ReadOnly))
    qDebug()<<"Couldn't load Qt's QWebChannel API!";
QString apiScript = QString::fromLatin1(apiFile.readAll());
apiFile.close();
QWebEngineView view;    //your custom QWebEngineView
view.page().runJavaScript(apiScript);

使用runJavaScript()执行代码加载Qt的QWebChannel JS API：

虽然我没有尝试这些方法，但它们应该仍然可以工作，因为它们旨在加载外部 JS 文件。 here 建议的方法之一可能会派上用场，具体取决于您使用的其他库。

在网页中使用<script>标签：

这是 Qt 文档推荐的默认方法。它的优点是在页面加载后立即提供 API。 这样做的缺点是您需要修改网页的 HTML，如果您不是该网站的所有者，这可能会很痛苦。

别忘了在 C++ 端创建一个 QWebChannel 对象：

QWebChannel* channel_ = new QWebChannel(view.page());
//attach it to the QWebEnginePage
view.page()->setWebChannel(channel_);
//register a QObject to be exposed to JavaScript
channel_->registerObject(QStringLiteral("jshelper"), this);

在 JavaScript 代码上设置 QWebChannel：

正如 cmets 中所指出的，为了在 C++ 和 JavaScript 之间共享对象，您需要初始化 QWebChannel。

new QWebChannel(qt.webChannelTransport, function (channel) 
    var sharedObject = channel.objects.sharedObject;
);

---

这个答案被认为是对 Qt 文档的补充，所以如果你想添加一些东西，请随意这样做。

版本：Qt 5.6.1

来源：

QT QWebEnginePage::setWebChannel() transport object How do I include a JavaScript file in another JavaScript file? How to use Qt WebEngine and QWebChannel? http://doc.qt.io/qt-5/qtwebchannel-javascript.html

【讨论】：

请注意，您仍然需要从您的 JS 代码中调用 new QWebChannel(qt.webChannelTransport, function(channel)); 来初始化 QWebChannel（在执行 qwebchannel.js 内容之后）。至少对于 Qt 5.11 来说，它内置了对 WebEngine 通道的支持

QFile apiFile(":/qtwebchannel/qwebchannel.js") 行应该在 Qt 手册中。