Qt与HTML/JavaScript网页端通信和调用

最新推荐文章于 2023-09-20 11:44:03 发布

Luck-Dream

最新推荐文章于 2023-09-20 11:44:03 发布

阅读量4.4k

点赞数 2

文章标签： QT QWebchannel HTML JavaScript

本文链接：https://blog.csdn.net/DreamSonGO/article/details/101026742

版权

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();

Luck-Dream

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
19
评论
Qt与HTML/JavaScript网页端通信和调用

Qt与HTML/JavaScript网页端通信和调用qt与网页的交互主要是借助js。简单的说就是在注册一个qt中的类给js段调用，，qt通过接口调用js端的函数。这里需要用到一个qt自带的qwebchannel.js文件，还需要html文件和通信需要调用的js文件，qt源码，具体情况代码上有。---------------------mainwindow.h#ifndef MAI...
复制链接

扫一扫