Qt嵌入浏览器（二）——QWebChannel实现与页面的通信

2018-02-24 本文已影响824人 ArcDriver

本篇简介

本篇的小目标：

借助QWebChannel，实现浏览器与页面的通信交互

上一节中我们实现了浏览器的基本功能和一个简易的调试界面。>>点这里回顾上节内容

本节将尝试在此基础上实现浏览器与所加载页面的相互通信。既然是相互通信，自然包含两个方向：

页面向浏览器发送消息
浏览器向页面发送消息

页面向浏览器发送消息

为了实现页面向浏览器发送消息，需要在一定程度上实现在页面中访问Qt对象。Qt官方的推荐方式是使用QWebChannel。借助官方提供的qwebchannel.js脚本，可以很方便地实现页面对Qt对象的调用，同时便于实现C++和html/js的解耦，方便使用不同技术栈的开发人员的分工。

注：qwebchannel.js在Qt发布版的文件夹下可以找到。

Qt这边，为了方便后续开发，我们先设计一个JsContext类，声明如下：

class JsContext : public QObject
{
    Q_OBJECT
public:
    explicit JsContext(QObject *parent = nullptr);

signals:
    void recvdMsg(const QString& msg);

public:
    // 向页面发送消息
    void sendMsg(QWebEnginePage* page, const QString& msg);

public slots:
    // 接收到页面发送来的消息
    void onMsg(const QString& msg);
};

这里需要注意的是，onMsg这个方法是提供给js直接调用的方法，按照Qt官方的说明，这个方法必须被声明为一个slot。onMsg方法的具体实现如下：

void JsContext::onMsg(const QString &msg)
{
    emit recvdMsg(msg);
}

也就是发送了一个“已接收到消息”的信号，供感兴趣的其他组件接收。简便起见，我们直接把接收这个信号的部分实现到上一节中实现好的主界面初始化方法中——在接收到页面发送的消息后，把接收到的消息显示在状态栏里，实现如下：

m_jsContext = new JsContext(this);
m_webChannel = new QWebChannel(this);
m_webChannel->registerObject("context", m_jsContext);
m_webView->page()->setWebChannel(m_webChannel);
connect(m_jsContext, &JsContext::recvdMsg, this, [this](const QString& msg) {
    ui->statusBar->showMessage(QString("Received message：%1").arg(msg), 3000);
});

上面的实现里包含了QWebChannel的使用步骤：

创建QWebChannel对象;
向QWebChannel对象注册Qt对象。 例子里的Qt对象就是上面实现的JsContext对象。
注意：这里注册时所用的名字“context”，就是js获取qt对象时所使用的索引名。
将设置好的QWebChannel对象设置为当前页面的通道。即调用QWebEnginePage的setWebChannel方法。
注意：如果没有正确注册webchannel，在js调用qt对象时会出现qt对象为undefined的情况。

接下来我们来看看页面这边要如何实现对应的接口。首先实现一个简单的js工具包msgutils.js：

var context;
// 初始化
function init()
{
    if (typeof qt != 'undefined')
    {
        new QWebChannel(qt.webChannelTransport, function(channel)
        {
        context = channel.objects.context;
        }
        );
    }
    else
    {
        alert("qt对象获取失败！");
    }
}
// 向qt发送消息
function sendMessage(msg)
{
    if(typeof context == 'undefined')
    {
        alert("context对象获取失败！");
    }
    else
    {
        context.onMsg(msg);
    }
}
// 控件控制函数
function onBtnSendMsg()
{
    var cmd = document.getElementById("待发送消息").value;
    sendMessage(cmd);   
}
init();

这里有几点需要注意的地方：

初始化时创建了一个QWebChannel对象，里面的第一个参数qt.webChannelTransport，只有Qt端正确地向页面设置了webchannel才能取到，否则会是undefined。
QWebChannel对象里的channel.objects对应了上面Qt实现里向webchannel注册的对象表，channel.objects.context即为从表中取出名为"context"的对象。
context.onMsg即为对context对象所提供的onMsg方法的调用。如果该对象没有提供这个方法，或者这个方法没有被声明为一个slot，则Qt端会报找不到方法的错。

以这个脚本为基础，实现一个简单的交互页面：

<!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="待发送消息" type="text" name="msgText" />
    <input type="button" value="发送消息到浏览器" onclick="onBtnSendMsg()" />
</body>
</html>

如此，页面向浏览器发送消息的通道就实现完成了。

浏览器向页面发送消息

这个方向相对比较简单。QWebEnginePage提供了执行JS的方法runJavaScript，因此只需要在页面上提供一个接收消息的JS接口，就能实现浏览器向页面的消息发送。

首先Qt端，上面的JsContext类已经声明了发送消息的方法sendMsg，其具体实现如下：

void JsContext::sendMsg(QWebEnginePage* page, const QString& msg)
{
    page->runJavaScript(QString("recvMessage('%1');").arg(msg));
}

然后在msgutils.js里添加上对应的js接口recvMessage：

// 接收qt发送的消息
function recvMessage(msg)
{
    alert("接收到Qt发送的消息：" + msg);
}

最后，我们在浏览器的主界面上加上一个输入框(msgEdit)和一个按钮(btnSend)，并实现发送消息的槽：

connect(ui->btnSend, &QPushButton::clicked, this, [this]() {
    QString msg = ui->msgEdit->text();
    if (!msg.isEmpty())
    {
        m_jsContext->sendMsg(m_webView->page(), msg);
    }
});

这样，浏览器向页面发送消息的接口就也实现完成了。

来试试效果，如下图：

页面向浏览器发送消息.png

浏览器向页面发送消息.png

有关旧版本的坑

如开篇简介中所说，这里的范例是基于Qt5.10版本实现的。如果使用Qt5.7.1之前的版本，在使用WebChannel时，会有一个严重的bug：在刷新页面后，页面会丢失window.qt对象^[3]。所以如果要借助WebChannel实现Qt对象与页面的交互，一定要将Qt升级到5.7.1之后的版本。

对于基于WebChannel的页面与浏览器间的通信实现就先介绍到这里。下一节会就使用Qt WebEngine实现https双向认证进行简要的分析。

>>返回系列索引

参考链接

[1] Qt5.10 QWebEngine帮助文档
 [2] 实现QT与HTML页面通信
 [3] 5.7.1版之前WebChannel的bug report