12

我正在使用 QT WebEngine 框架来显示网页。我在加载时将 javascript 注入页面，并希望允许 javascript 能够访问 QT 对象。显然，要做到这一点，必须存在一个在铬（javascript）和我的 C++/QT 项目的其余部分之间建立一些 IPC 的 QWebChannel。我遇到了 QWebEnginePage::setWebChannel (QWebChannel *channel) 函数，但是我找不到任何使用它的例子。文档（http://doc.qt.io/qt-5/qwebenginepage.html#setWebChannel）提到 qt.webChannelTransport 应该在 javascript 上下文中可用，但我没有看到在 qwebchannel.js 中建立的位置（https://github.com/qtproject/qtwebchannel/blob/dev/src/webchannel/qwebchannel.js）。一世'http://doc.qt.io/qt-5/qtwebchannel-examples.html ) 并且希望尽可能避免使用 WebSockets。

以下是我尝试实现网络频道的方式。

每当页面加载时，我都会建立一个通道并在 C++ 中注入 javascript：

QWebChannel *channel = new QWebChannel();
channel->registerObject(QStringLiteral("jshelper"), helper);

view->page()->runJavaScript(qwebjs); //this is qwebchannel.js
view->page()->setWebChannel(channel);
view->page()->runJavaScript(myfunction); //function that calls QT object (jshelper)

在 Javascript 中：

new QWebChannel(qt.webChannelTransport, function(channel) { ... });

这导致通道没有正确连接（假设这是因为 qt.webChannelTransport，因为它在我使用 WebSockets 时正在工作）。任何指向以这种方式使用 QWebEnginePage 设置的 QWebChannel 示例的指针也值得赞赏。

4

1 回答 1

29

简短的回答：添加<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>到您的 html 页面（当然在您调用之前），并从您的 C++ 代码new QWebChannel中删除该行。view->page()->runJavaScript(qwebjs); //this is qwebchannel.js

长答案：

在弄清楚如何在没有 WebSockets 的情况下正确使用 QWebChannel 时，我也遇到了很多麻烦——在 Qt 5.5 源代码和邮件列表（仍然缺乏文档）中挖掘之后设法让它工作。请注意，这只适用于新的 Qt 5.5。

以下是如何使用 QWebChannel：

// file: MyWebEngineView.cpp, MyWebEngineView extends QWebEngineView
QWebChannel *channel = new QWebChannel(page());

// set the web channel to be used by the page
// see http://doc.qt.io/qt-5/qwebenginepage.html#setWebChannel
page()->setWebChannel(channel);

// register QObjects to be exposed to JavaScript
channel->registerObject(QStringLiteral("jshelper"), helper);

// now you can call page()->runJavaScript(...) etc
// you DON'T need to call runJavaScript with qwebchannel.js, see the html file below

// load your page
load(url);

在 JS 方面：

<!-- NOTE: this is what you're missing -->
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>

<script type="text/javascript">
    <!-- it's a good idea to initialize webchannel after DOM ready, if your code is going to manipulate the DOM -->
    document.addEventListener("DOMContentLoaded", function () {
        new QWebChannel(qt.webChannelTransport, function (channel) {
            var jshelper = channel.objects.jshelper;
            // do what you gotta do
        });
    });
</script>

还要确保您已添加QT += webenginewidgets webchannel到.pro文件中，否则将无法构建！

奖励：您现在可以在舒适的 Chrome 开发工具中调试您的 JavaScript！只需在您的 Qt 代码中的某处添加它（最好在您的应用程序启动中）：

#ifdef QT_DEBUG
    qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "23654");
#endif

然后启动您的应用程序，在 Chrome 中导航http://localhost:23654，您将获得一个功能齐全的 JS 调试器、分析器、控制台等 :)

跟进（19/04/2016）：如果您的远程调试器不工作，请注意该qputenv调用也必须发生在对QWebEngineSettings任何其他 WebEngine 相关类或任何其他 WebEngine 相关类的调用之前，因为这些会立即触发 WebEngine“zygote”进程（ zygote 是父 QtWebEngineProcess，所有未来的 QtWebEngineProcesses 都是从它派生出来的），然后qputenv不能影响它。花了几个小时追踪这个。

于 2015-08-12T13:29:58.730 回答