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

 

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


 

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 19
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值