本篇簡(jiǎn)介
本篇的小目標(biāo)：
- 借助QWebChannel明郭，實(shí)現(xiàn)瀏覽器與頁(yè)面的通信交互
上一節(jié)中我們實(shí)現(xiàn)了瀏覽器的基本功能和一個(gè)簡(jiǎn)易的調(diào)試界面糠睡。>>點(diǎn)這里回顧上節(jié)內(nèi)容
本節(jié)將嘗試在此基礎(chǔ)上實(shí)現(xiàn)瀏覽器與所加載頁(yè)面的相互通信迫靖。既然是相互通信膳灶，自然包含兩個(gè)方向：
- 頁(yè)面向?yàn)g覽器發(fā)送消息
- 瀏覽器向頁(yè)面發(fā)送消息
頁(yè)面向?yàn)g覽器發(fā)送消息
為了實(shí)現(xiàn)頁(yè)面向?yàn)g覽器發(fā)送消息悔常，需要在一定程度上實(shí)現(xiàn)在頁(yè)面中訪問Qt對(duì)象循帐。Qt官方的推薦方式是使用QWebChannel。借助官方提供的qwebchannel.js腳本惠遏，可以很方便地實(shí)現(xiàn)頁(yè)面對(duì)Qt對(duì)象的調(diào)用砾跃，同時(shí)便于實(shí)現(xiàn)C++和html/js的解耦，方便使用不同技術(shù)棧的開發(fā)人員的分工节吮。
注：qwebchannel.js在Qt發(fā)布版的文件夾下可以找到抽高。
Qt這邊，為了方便后續(xù)開發(fā)透绩，我們先設(shè)計(jì)一個(gè)JsContext類翘骂，聲明如下：
class JsContext : public QObject
{
Q_OBJECT
public:
explicit JsContext(QObject *parent = nullptr);
signals:
void recvdMsg(const QString& msg);
public:
// 向頁(yè)面發(fā)送消息
void sendMsg(QWebEnginePage* page, const QString& msg);
public slots:
// 接收到頁(yè)面發(fā)送來(lái)的消息
void onMsg(const QString& msg);
};
這里需要注意的是，onMsg這個(gè)方法是提供給js直接調(diào)用的方法帚豪，按照Qt官方的說明碳竟，這個(gè)方法必須被聲明為一個(gè)slot。onMsg方法的具體實(shí)現(xiàn)如下：
void JsContext::onMsg(const QString &msg)
{
emit recvdMsg(msg);
}
也就是發(fā)送了一個(gè)“已接收到消息”的信號(hào)志鞍，供感興趣的其他組件接收瞭亮。簡(jiǎn)便起見，我們直接把接收這個(gè)信號(hào)的部分實(shí)現(xiàn)到上一節(jié)中實(shí)現(xiàn)好的主界面初始化方法中——在接收到頁(yè)面發(fā)送的消息后固棚，把接收到的消息顯示在狀態(tài)欄里，實(shí)現(xiàn)如下：
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);
});
上面的實(shí)現(xiàn)里包含了QWebChannel的使用步驟：
- 創(chuàng)建QWebChannel對(duì)象;
-
向QWebChannel對(duì)象注冊(cè)Qt對(duì)象仙蚜。 例子里的Qt對(duì)象就是上面實(shí)現(xiàn)的JsContext對(duì)象此洲。
注意：這里注冊(cè)時(shí)所用的名字“context”，就是js獲取qt對(duì)象時(shí)所使用的索引名委粉。 -
將設(shè)置好的QWebChannel對(duì)象設(shè)置為當(dāng)前頁(yè)面的通道呜师。即調(diào)用QWebEnginePage的setWebChannel方法。
注意：如果沒有正確注冊(cè)webchannel贾节，在js調(diào)用qt對(duì)象時(shí)會(huì)出現(xiàn)qt對(duì)象為undefined的情況汁汗。
接下來(lái)我們來(lái)看看頁(yè)面這邊要如何實(shí)現(xiàn)對(duì)應(yīng)的接口衷畦。首先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的js工具包msgutils.js：
var context;
// 初始化
function init()
{
if (typeof qt != 'undefined')
{
new QWebChannel(qt.webChannelTransport, function(channel)
{
context = channel.objects.context;
}
);
}
else
{
alert("qt對(duì)象獲取失敗知牌！");
}
}
// 向qt發(fā)送消息
function sendMessage(msg)
{
if(typeof context == 'undefined')
{
alert("context對(duì)象獲取失斊碚！");
}
else
{
context.onMsg(msg);
}
}
// 控件控制函數(shù)
function onBtnSendMsg()
{
var cmd = document.getElementById("待發(fā)送消息").value;
sendMessage(cmd);
}
init();
這里有幾點(diǎn)需要注意的地方：
- 初始化時(shí)創(chuàng)建了一個(gè)QWebChannel對(duì)象角寸，里面的第一個(gè)參數(shù)qt.webChannelTransport菩混，只有Qt端正確地向頁(yè)面設(shè)置了webchannel才能取到，否則會(huì)是undefined扁藕。
- QWebChannel對(duì)象里的channel.objects對(duì)應(yīng)了上面Qt實(shí)現(xiàn)里向webchannel注冊(cè)的對(duì)象表沮峡，channel.objects.context即為從表中取出名為"context"的對(duì)象。
- context.onMsg即為對(duì)context對(duì)象所提供的onMsg方法的調(diào)用亿柑。如果該對(duì)象沒有提供這個(gè)方法邢疙，或者這個(gè)方法沒有被聲明為一個(gè)slot，則Qt端會(huì)報(bào)找不到方法的錯(cuò)望薄。
以這個(gè)腳本為基礎(chǔ)秘症，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的交互頁(yè)面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webchannel測(cè)試</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="待發(fā)送消息" type="text" name="msgText" />
<input type="button" value="發(fā)送消息到瀏覽器" onclick="onBtnSendMsg()" />
</body>
</html>
如此，頁(yè)面向?yàn)g覽器發(fā)送消息的通道就實(shí)現(xiàn)完成了式矫。
瀏覽器向頁(yè)面發(fā)送消息
這個(gè)方向相對(duì)比較簡(jiǎn)單乡摹。QWebEnginePage提供了執(zhí)行JS的方法runJavaScript，因此只需要在頁(yè)面上提供一個(gè)接收消息的JS接口采转，就能實(shí)現(xiàn)瀏覽器向頁(yè)面的消息發(fā)送聪廉。
首先Qt端，上面的JsContext類已經(jīng)聲明了發(fā)送消息的方法sendMsg故慈，其具體實(shí)現(xiàn)如下：
void JsContext::sendMsg(QWebEnginePage* page, const QString& msg)
{
page->runJavaScript(QString("recvMessage('%1');").arg(msg));
}
然后在msgutils.js里添加上對(duì)應(yīng)的js接口recvMessage：
// 接收qt發(fā)送的消息
function recvMessage(msg)
{
alert("接收到Qt發(fā)送的消息：" + msg);
}
最后板熊，我們?cè)跒g覽器的主界面上加上一個(gè)輸入框(msgEdit)和一個(gè)按鈕(btnSend)，并實(shí)現(xiàn)發(fā)送消息的槽：
connect(ui->btnSend, &QPushButton::clicked, this, [this]() {
QString msg = ui->msgEdit->text();
if (!msg.isEmpty())
{
m_jsContext->sendMsg(m_webView->page(), msg);
}
});
這樣察绷，瀏覽器向頁(yè)面發(fā)送消息的接口就也實(shí)現(xiàn)完成了干签。
來(lái)試試效果，如下圖：
有關(guān)舊版本的坑
如開篇簡(jiǎn)介中所說拆撼，這里的范例是基于Qt5.10版本實(shí)現(xiàn)的容劳。如果使用Qt5.7.1之前的版本，在使用WebChannel時(shí)闸度，會(huì)有一個(gè)嚴(yán)重的bug：在刷新頁(yè)面后竭贩，頁(yè)面會(huì)丟失window.qt對(duì)象[3]。所以如果要借助WebChannel實(shí)現(xiàn)Qt對(duì)象與頁(yè)面的交互莺禁，一定要將Qt升級(jí)到5.7.1之后的版本留量。
對(duì)于基于WebChannel的頁(yè)面與瀏覽器間的通信實(shí)現(xiàn)就先介紹到這里。下一節(jié)會(huì)就使用Qt WebEngine實(shí)現(xiàn)https雙向認(rèn)證進(jìn)行簡(jiǎn)要的分析。
參考鏈接
[1] Qt5.10 QWebEngine幫助文檔
[2] 實(shí)現(xiàn)QT與HTML頁(yè)面通信
[3] 5.7.1版之前WebChannel的bug report
