Qt加载Html实现与Js交互

在Qt中，你可以使用QWebEngineView来加载HTML并与JavaScript交互。以下是一个简单的例子，展示了如何实现这一功能：




#include <QApplication>
#include <QWebEngineView>
#include <QWebChannel>
 
// 自定义的C++类，用于与JavaScript交互
class MyObject : public QObject {
    Q_OBJECT
public:
    explicit MyObject(QObject *parent = nullptr) : QObject(parent) {}
 
public slots:
    void showMessage(const QString &message) {
        qDebug() << "JavaScript called showMessage with:" << message;
    }
};
 
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
 
    QWebEngineView view;
    QWebChannel channel;
 
    // 创建自定义的C++对象
    MyObject myObject;
 
    // 将C++对象注册到channel，使其可以从JavaScript访问
    channel.registerObject(QStringLiteral("myObject"), &myObject);
 
    // 加载包含JavaScript调用的HTML页面
    view.page()->setWebChannel(&channel);
    view.setUrl(QUrl(QStringLiteral("qrc:/index.html")));
    view.show();
 
    return app.exec();
}

HTML (index.html) 文件:




<!DOCTYPE html>
<html>
<head>
    <title>Qt WebChannel Example</title>
    <script type="text/javascript" src="qwebchannel.js"></script>
    <script type="text/javascript">
        function onLoad() {
            new QWebChannel(qt.webChannelTransport, function(channel) {
                // 获取在C++中注册的对象
                var myObject = channel.objects.myObject;
 
                // 调用C++对象的showMessage方法
                myObject.showMessage("Hello from JavaScript!");
            });
        }
    </script>
</head>
<body onload="onLoad();">
    <h1>Qt WebChannel Example</h1>
</body>
</html>

确保你的项目文件（.pro）包含了对应的模块和资源：




QT += webengine webchannel
 
RESOURCES += \
    myresources.qrc
 
myresources.qrc: \
    index.html

在这个例子中，MyObject类有一个公共槽函数showMessage，它可以从JavaScript中调用。通过QWebChannel，你可以将这个C++对象暴露给JavaScript，并在HTML页面加载时，JavaScript会调用这个对象的方法。

Qt加载Html实现与Js交互

评论已关闭

推荐阅读