QWebEngineView与html通信

最新推荐文章于 2024-05-17 05:58:46 发布

0x7CF

最新推荐文章于 2024-05-17 05:58:46 发布

阅读量517

点赞数

文章标签： html qt

本文链接：https://blog.csdn.net/FWY0x7CF/article/details/130346021

版权

一、Qt给Html发信号调用Html的函数

1.在与html同文件下加入qwebchannel.js文件

2.connectHtml类继承于QWebEngineView

3.声明全局变量QWebChannel *m_webChannel;

4.connectHtml类构造函数中：

QNetworkProxyFactory::setUseSystemConfiguration(false);//必须，防止加载为空白
this->settings()->setAttribute(QWebEngineSettings::WebAttribute::LocalContentCanAccessRemoteUrls, true);//必须，防止加载为空白
this->setParent(parent);//必须
this->resize(1440, 750);
m_webChannel = new QWebChannel(this->page());
m_webChannel->registerObject(QString("qtChannel"), this);
this->page()->setWebChannel(m_webChannel);
this->page()->load(QUrl("file:///" + htmlPath));
QObject::connect(this->page(), &QWebEnginePage::loadFinished, this, [=]() {
//TO DO};

5.connectHtml.h声明几个信号和槽函数

signals:

void setPieImage(QString msg1,QString msg2);

void setBarImage(QString msg1,QString msg2,QString msg3,QString msg4);

void setScatterImage(QString msg1,QString msg2);

public slots:

void loadfinish();【HTML调用QT函数】

6.html文件：

在<head>...</head>内添加

<script type="text/javascript" src="qwebchannel.js"></script>

在<body>...</body>内添加

window.onload = function () {

if (typeof qt != 'undefined') {

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

channel.objects.qtChannel.setPieImage.connect(setPieImage);

channel.objects.qtChannel.setBarImage.connect(setBarImage);

channel.objects.qtChannel.setScatterImage.connect(setScatterImage);

channel.objects.qtChannel.loadfinish();//加载成功后调用QT中loadfinish()槽函数

//alert("qt对象获取ok！");

})

}

else {

alert("qt对象获取失败！");

}

}

function setPieImage(msg1, msg2) {

var img1 = document.getElementById("pieChart1")

img1.src = msg1;

var img2 = document.getElementById("pieChart2")

img2.src = msg2;

}

function setBarImage(msg1, msg2, msg3, msg4) {

var img3 = document.getElementById("barChart1")

img3.src = msg1;

var img4 = document.getElementById("barChart2")

img4.src = msg2;

var img5 = document.getElementById("barChart3")

img5.src = msg3;

var img6 = document.getElementById("barChart4")

img6.src = msg4;

}

function setScatterImage(msg1, msg2) {

var img7 = document.getElementById("ScatterChart1")

img7.src = msg1;

var img8 = document.getElementById("ScatterChart2")

img8.src = msg2;

}