关于QT实现和html页面的交互

最新推荐文章于 2025-05-06 14:39:51 发布

原创最新推荐文章于 2025-05-06 14:39:51 发布 · 5.3k 阅读

20 ·

CC 4.0 BY-SA版权

QT 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用QT的QWebEngineView组件加载HTML页面，并通过QWebChannel实现QT与HTML页面之间的信号和槽机制交互。具体包括配置所需组件、创建交互类及其实现方法、设置HTML页面监听等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通过QWebEngineView引入html页面, .pro文件中引入webenginewidgets，webengine，network，webchannel组件

组件可以通过QT软件根目录的MaintenanceTool.exe安装，设置中选择临时资料档案库，临时资料档案库可以在网上找资源路径（我用的是：http://mirrors.ustc.edu.cn/qtproject/online/qtsdkrepository/mac_x64/root/qt/，如果临时资料档案库测试是失败的，可能是因为没有装visual studio），选择添加或移除组件

2.建立连接html和QT的QObject类

mychannel.h

#ifndef MYCHANNEL_H
#define MYCHANNEL_H

#include <QObject>
#include <QDebug>
#include <QWebChannel>

class MyChannel : public QObject
{
    Q_OBJECT
public:
    explicit MyChannel(QObject *parent = nullptr);
    void sendSetViewPort();

signals:
    void setViewPort();//QT给html页面发送的信号

};

#endif // MYCHANNEL_H

mychannel.cpp

#include "mychannel.h"

MyChannel::MyChannel(QObject *parent) : QObject(parent)
{

}

void MyChannel::sendSetViewPort()
{
    qDebug()<<"----------------alert==========";
    emit setViewPort();
}

mapload.cpp(加载html页面的cpp文件)

void MapLoad::initMap(){
    _myChannel = new MyChannel(this);
    QWebChannel* web_channel = new QWebChannel(this);
    //html文件用的时候可以知道用的是哪个webchannel
    web_channel->registerObject("qtChannel",_myChannel);
	//加载html页面的widget
    view = new QWebEngineView(ui->widget_map_content);
    view->load(QUrl("qrc:/font/images/static/mapindex.html"));
    view->page()->setWebChannel(web_channel);
    view->show();
    //点击按钮的时候给发给MapLoad发送点击事件的信号
    QObject::connect(ui->button_right, &QPushButton::clicked, this, &MapLoad::sendSetViewPort);

}

void MapLoad::sendSetViewPort()
{
    qDebug()<<"----------------alert";
    _myChannel->sendSetViewPort();
}

mapload.h

private:
    Ui::MapLoad *ui;
    QWebEngineView *view=nullptr;
    MyChannel* _myChannel=nullptr;
private slots:
    void on_button_right_clicked();
    void sendSetViewPort();

mapindex.html

<script type="text/javascript" src="./qwebchannel.js"></script>
<script type="text/javascript">
  var mchannel;
  window.onload = function () {
    if (typeof qt != 'undefined') {
      new QWebChannel(qt.webChannelTransport, function (channel) {
        channel.objects.qtChannel.setViewPort.connect(mapSetView);
      })
    } else {
      alert("qt对象获取失败！");
    }
  }
 function mapSetView() {
    console.log("nihao");
  }
</script>