如何使用 Qt WebEngine 和 QWebChannel?

2021-12-09 00:00:00 qt qtwebengine javascript c++ qtwebchannel

我正在使用新的 WebEngine 来玩耍和学习.我一直试图找到一些使用 Qt WebKit 找到的类似方法:addToJavaScriptWindowObject()

I'm using the new WebEngine to play around and learn. I've been trying to find some similar methods found using Qt WebKit: addToJavaScriptWindowObject()

我发现使用 Qt WebEngine 时，必须使用 QWebChannel 将函数注册到 JavaScript 窗口对象.如果这是正确的，那么我将回答以下问题.

I found that using Qt WebEngine, I have to use the QWebChannel to register functions to the JavaScript window object. If this is correct, it takes me to the following question.

我已经在我的电脑上安装了 Qt 5.4.0.我注意到 qwebchannel.js 在我电脑上安装的 SDK 中没有找到.我在 Git 源码上找到的.

I've installed Qt 5.4.0 on my computer. I noticed that qwebchannel.js is not found in the SDK installed on my computer. I found it on the Git source.

如果我有一个带有 QWebEnginePage 和 QWebEngineView 的 Qt 本机桌面应用程序，我需要什么才能在 JavaScript 窗口对象上注册函数?

If I have a Qt native desktop application with a QWebEnginePage and QWebEngineView, what do I need to be able to register functions on the JavaScript window object?

我的桌面应用程序会自动导航到我创建的 http 页面.所以我可以访问连接到 QWebEngineView 的内容.

My desktop application navigates automatically to a http page that I have created. So I have access to the content connected to the QWebEngineView.

需要采取哪些步骤才能完成这项工作?

What are the steps to take so I can make this work?

推荐答案

在 Qt5.6 中，如果想让 C++ 部分和 JavaScript 进行通信，唯一的方法就是使用 QWebChannel 在 QWebEngineView，如您所说.你在 .cpp 文件中这样做:

In Qt5.6, if you want to make C++ part and JavaScript to communicate, the only way to do it is using QWebChannel on a QWebEngineView, as you stated. You do it this way in the .cpp file:

m_pView = new QWebEngineView(this);
QWebChannel * channel = new QWebChannel(page);
m_pView->page()->setWebChannel(channel);
channel->registerObject(QString("TheNameOfTheObjectUsed"), this);

在这里，您只是说您注册了一个名为 TheNameOfTheObjectUsed 的对象，该对象将在 JS 端可用.现在，这是在 JS 端使用的代码部分:

Here, you just say that you register an object named TheNameOfTheObjectUsed that will be available on the JS side. Now, this is the part of code to use in the JS side :

new QWebChannel(qt.webChannelTransport, function (channel) {
            // now you retrieve your object
            var JSobject = channel.objects.TheNameOfTheObjectUsed;
        });

现在，如果你想在 JS 端检索类的一些属性，你需要在 C++ 端有一个方法，它返回一个字符串，一个整数，一个长......这是它的样子C++ 端，在你的 .h 中:

Now, if you want to retrieve some properties of the class in the JS side, you need to have a method on the C++ side which returns a string, an integer, a long... This is what it looks like on the C++ side, in your .h:

Q_INVOKABLE int getInt();
Q_PROPERTY(int myIntInCppSide READ getInt);

现在，你在 JS 端得到这样的 int :

And now, you get the int like this on the JS side :

var myIntInJSside= JSobject.myIntInCppSide;

这是一个非常简单的解释，我建议您观看这个视频对我很有用.此外，您可能想了解更多关于 QWebChannel 提供的 JavaScript API，以及有关 QWebChannel 的文档.

This is a very simple explanation, and I recommend you to watch this video which was very useful to me. Also, you might want to read more about the JavaScript API provided by QWebChannel, as well as the documentation about QWebChannel.

希望有帮助！

相关文章