QWebEngineView 简单的JS交互例子
时间: 2023-09-04 22:12:00 浏览: 73
QWebEngineView 可以很方便地与 JavaScript 进行交互。以下是一个简单的示例代码,演示如何从 JavaScript 调用 C++ 函数:
```cpp
#include <QApplication>
#include <QWebEngineView>
#include <QDebug>
#include <QWebChannel>
#include <QJsonObject>
#include <QJsonDocument>
// 定义一个用于与 JavaScript 交互的对象
class JsObject : public QObject
{
Q_OBJECT
public slots:
void jsFunction(const QString &msg) {
qDebug() << "Received message from JavaScript:" << msg;
}
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// 创建 QWebEngineView 控件
QWebEngineView view;
view.setUrl(QUrl("qrc:/index.html"));
view.show();
// 创建 QWebChannel 对象,用于将 C++ 对象暴露给 JavaScript
QWebChannel channel;
JsObject jsObject;
channel.registerObject("myObject", &jsObject);
// 注册 QWebChannel 对象到 QWebEngineView 控件中
view.page()->setWebChannel(&channel);
return a.exec();
}
```
在上面的代码中,我们创建了一个名为 `JsObject` 的类,它继承自 QObject,并定义了一个名为 `jsFunction` 的槽函数。当 JavaScript 调用该函数时,它将输出收到的消息。
我们还创建了一个 QWebChannel 对象,并将 `JsObject` 对象注册为 `myObject`。然后,我们将 QWebChannel 对象注册到 QWebEngineView 控件中,以便 JavaScript 可以访问我们注册的 C++ 对象。
接下来,我们需要在 JavaScript 中调用 `jsFunction` 函数。以下是一个简单的 index.html 文件,演示如何调用该函数:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QWebEngineView Example</title>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script>
// 在页面加载完成后,连接到 C++ 对象并调用 jsFunction 函数
window.onload = function() {
new QWebChannel(qt.webChannelTransport, function(channel) {
var myObject = channel.objects.myObject;
myObject.jsFunction("Hello from JavaScript!");
});
}
</script>
</head>
<body>
<h1>QWebEngineView Example</h1>
</body>
</html>
```
在上面的代码中,我们使用 `QWebChannel` 对象中的 `objects` 属性来访问我们在 C++ 中注册的对象 `myObject`。然后,我们调用 `jsFunction` 函数,并将消息传递给它。
当你运行该示例时,它将在控制台中输出消息 "Received message from JavaScript: Hello from JavaScript!",表示 C++ 函数已成功从 JavaScript 调用。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)