QWebChannel实现与JS的交互

在利用Qt框架的QWebEngineView进行嵌入浏览器开发时，可以很方便的通过
QWebChannel实现与js的交互，本节内容简单讲解js向Qt应用程序发送消息，实现对本地程序notepad的调用。

---

要实现js向Qt应用程序发送消息，可以分如下几步：
1. 创建自己的C++交互类：用于接收消息的接口必须定义为public slots：，以供js调用:
jscontext.h

#ifndef JSCONTEXT_H
#define JSCONTEXT_H

#include 
#include 

class JsContext : public QObject
{
    Q_OBJECT

public:
    JsContext(QObject *parent = 0);
    ~JsContext(){}

signals:
    void openNotepad(const QString& msg);

public slots:
    // 接收前端js发送来的消息
    void onRecvMsg(const QString& msg, const QString para);
};
#endif // JSCONTEXT_H

jscontext.cpp

#include "jscontext.h"

JsContext::JsContext(QObject *parent /*= 0*/) : QObject(parent)
{

}

void JsContext::onRecvMsg(const QString &msg, const QString para)
{
    if (msg == "notepad")
    {
        emit openNotepad(para);
    }
}

2. 创建QWebChannel通道，在QWebChannel中注册C++交互类对象，并设置为当前页面的通道：

m_pJsContext = new JsContext(this);
m_pWebChannel = new QWebChannel(this);
m_pWebChannel->registerObject("context_qt", m_pJsContext);
m_pWebView->page()->setWebChannel(m_pWebChannel);

接下来看看页面这边的实现：
首先创建一个测试的html页面：

    
    


    
webchannel test
    
    
    打开notepad 

实现我们的js工具包opennotepad.js

var context_qt;
// 初始化
function init_qt()
{
    if (typeof qt != 'undefined')
    {
        new QWebChannel(qt.webChannelTransport, function(channel)
        {
            context_qt = channel.objects.context_qt;  //从通道中获取交互对象
        })
    }
    else
    {
        console.log("qt object obtain fail!");
    }
}
// 向qt发送消息
function sendMessage(msg, para)
{
    if(typeof context_qt == 'undefined')
    {
        console.log("context_qt object obtain fail!");
    }
    else
    {
        context_qt.onRecvMsg(msg, para);  //调用交互对象接口，接收消息
    }
}
// 控件响应函数
function open_notepad(msg, para)
{
    sendMessage(msg, para);   
}

init_qt();

备注：qwebchannel.js文件可以在qt自带的例子或网上下载拷贝

运行效果：

image.png