Qt与HTML/JavaScript网页端通信和调用
qt与网页的交互主要是借助js。简单的说就是在注册一个qt中的类给js段调用,,qt通过接口调用js端的函数。
这里需要用到一个qt自带的qwebchannel.js文件,还需要html文件和通信需要调用的js文件,qt源码,具体情况代码上有。
---------------------mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QVBoxLayout>
#include <QPushButton>
#include <QMainWindow>
#include <QWebEngineView>
#include <QWebchannel>
class JsContext : public QObject
{
Q_OBJECT
public:
explicit JsContext(QObject *parent = nullptr);
~JsContext();
signals:
void recvdMsg(const QString& msg);
public:
// 向页面发送消息
void sendMsg(QWebEnginePage* page, const QString& msg);
public slots:
// 接收到页面发送来的消息
void onMsg(const QString& msg);
};
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private:
QVBoxLayout *m_pVBoxLayout;
public:
JsContext *m_jsContext;
QWebChannel *m_webChannel;
QWebEngineView *m_webView;
public slots:
void anjian();
};
------------------------------------mainwindow.cpp
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent)
{
QPushButton *button1 = new QPushButton("发送信息to网页");
connect(button1, SIGNAL(clicked()),this, SLOT(anjian()));//信号与槽的链接
setCentralWidget(button1);
qDebug()<<"MainWindow";
m_jsContext = new JsContext(this);//需要注册供通信的类
m_webChannel = new QWebChannel(this);//web浏览器类通信用主要
m_webView = new QWebEngineView();//web浏览器,主要是显示网页等作用
//注册qt的一个类供js调用,第一个参数为注册名,被js获取和调用,第二个参数是类实体,
m_webChannel->registerObject("context", m_jsContext);
//浏览器加载一个网页,,,这里用来发送信息来qt和接受qt消息
m_webView->load(QUrl("C:/Users/Administrator/Desktop/QtTest/mydemo/index.html"));
//设置这个网页的端口为刚注册的端口,否则js网页是获取不到之前注册的类的注册名的
m_webView->page()->setWebChannel(m_webChannel);
m_webView->show();
}
MainWindow::~MainWindow()
{
//delete ui;
}
void MainWindow::anjian()
{
qDebug()<<"anjian";
//qt界面按键的曹,然后调用下面发送函数
m_jsContext->sendMsg(m_webView->page(),"qt fa song lai de xiao xi");
//delete ui;
}
JsContext::JsContext(QObject *parent):
QObject(parent)
{
//delete ui;
}
JsContext::~JsContext()
{
//delete ui;
}
void JsContext::onMsg(const QString &msg)
{
qDebug()<<"onMsg";
qDebug()<<msg;
emit recvdMsg(msg);
}
//发送消息到网页,参数1为网页,但是这个网页
void JsContext::sendMsg(QWebEnginePage* page, const QString& msg)
{
//调用网页的运行js函数,前提是有这个函数名
page->runJavaScript(QString("recvMessage('%1');").arg(msg));
}
-------------------------index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webchannel测试</title>
</head>
<body>
<p>webchannel test</p>
<script type="text/javascript" src="./qwebchannel.js"></script>
<script type="text/javascript" src="./msgutils.js"></script>
<input id="daifasongxinxi" type="text" name="msgText" />
<input type="button" value="fasong xinxi dao qt" οnclick="onBtnSendMsg()" />
</body>
</html>
-------------------------msgutils.js
var context;
// 初始化
function init()
{
if (typeof qt != 'undefined')
{
//初始化时创建了一个QWebChannel对象,里面的第一个参数qt.webChannelTransport,只有Qt端正确地向页面设置了webchannel才能取到,
//否则会是undefined
new QWebChannel(qt.webChannelTransport, function(channel)
{
//QWebChannel对象里的channel.objects对应了上面Qt实现里向webchannel注册的对象表
//所以只有context在qt中注册了,这里才能找到
context = channel.objects.context;
}
);
}
else
{
alert("qt duixianghuoshibai!");
}
}
// 向qt发送消息
function sendMessage(msg)
{
if(typeof context == 'undefined')
{
alert("context huoqu duixiang shibai!");
}
else
{
context.onMsg(msg);
}
}
// 控件控制函数
function onBtnSendMsg()
{
var cmd = document.getElementById("daifasongxinxi").value;
sendMessage(cmd);
}
function recvMessage(msg)
{
alert("jieshouqtxiaoxi: " + msg);
}
init();