Qt嵌入瀏覽器（六）——QCefView實現(xiàn)JS通信接口

本篇簡介

上一節(jié)中，我們完成了CEF各基本組件的封裝，并完成了瀏覽器基本功能的實現(xiàn)。>>點這里回顧上節(jié)內(nèi)容

本節(jié)我們將嘗試擴展所實現(xiàn)的各組件，實現(xiàn)瀏覽器與頁面的雙向通信。

本篇的小目標：

  • 實現(xiàn)瀏覽器與頁面的雙向通信

原理簡述

上一節(jié)曾提到過，CEF應用在默認情況下包含很多子進程，這些進程會共享同一個執(zhí)行入口。除了主進程的各類處理接口外，CEF還提供了各類子進程的處理接口。而頁面到瀏覽器的消息通道就可以借助對渲染進程的控制來實現(xiàn)，整體流程如下：

  1. 重載渲染進程的上下文初始化監(jiān)聽接口，獲取V8上下文引用
  2. 從V8上下文中獲取所加載的窗口對象
  3. 借助V8處理器定義消息通道函數(shù)
  4. 向窗口對象中注冊消息通道函數(shù)

完成上述步驟后，在頁面調(diào)用對應的消息通道函數(shù)時，V8處理器則會相應地進行處理，從而完成消息的發(fā)送。

另一方面，實現(xiàn)瀏覽器到頁面的消息通道和第二節(jié)中基于Qt WebEngine的方法類似，CEF也提供了執(zhí)行JS腳本的方法，只需在頁面中定義好對應的消息接口，并通過執(zhí)行腳本方法執(zhí)行該接口即可完成消息的發(fā)送。

因此，實現(xiàn)雙向通道主要的問題集中在針對渲染進程處理和JS腳本執(zhí)行的擴展上。接下來先就渲染進程處理進行說明。

渲染進程處理

為了實現(xiàn)對渲染進程的處理，我們首先需要向上一節(jié)中封裝的QCefContext中添加對渲染進程入口的解析和處理。具體實現(xiàn)如下：

int QCefContext::initCef(CefMainArgs& mainArgs)
{
    CefRefPtr<CefApp> app;

    // 創(chuàng)建一個正確類型的App Client
    if (!m_cmdLine->HasSwitch("type"))
    {
      app = new QCefApp();
      m_cefApp = CefRefPtr<QCefApp>((QCefApp*)app.get());
    }
    else
    {
        CefString procType = m_cmdLine->GetSwitchValue("type");
        bool typeJudge = (procType == "renderer");
#ifdef CEF_LINUX
        typeJudge |= (procType == "zygote");
#endif
        if (typeJudge)
        {
            app = new QCefRenderHandler();
            m_cefRenderer = CefRefPtr<QCefRenderHandler>((QCefRenderHandler*)app.get());
        }
    }
    // 后續(xù)處理與上一小節(jié)相同，略過
    ...
}

上面的實現(xiàn)除了處理了CEF主進程外，還判斷了子進程是否為渲染進程（Windows環(huán)境下的renderer進程和Linux環(huán)境下的zygote進程），如果發(fā)現(xiàn)當前處理的是渲染進程，則創(chuàng)建一個渲染進程處理器QCefRenderHandler的實例。QCefRenderHandler的聲明如下：

class QCefRenderHandler : public CefApp,
        public CefRenderProcessHandler
{
public:
    QCefRenderHandler();
    ~QCefRenderHandler();

    CefRefPtr<CefRenderProcessHandler> GetRenderProcessHandler() OVERRIDE
    {
        return this;
    }

    virtual void OnContextCreated(CefRefPtr<CefBrowser> browser, CefRefPtr<CefFrame> frame, CefRefPtr<CefV8Context> context) OVERRIDE;

private:
    CefRefPtr<QCefV8Handler> m_v8Handler;

    IMPLEMENT_REFCOUNTING(QCefRenderHandler)
};

和主進程CefApp的實現(xiàn)類似，這里也實現(xiàn)了CefApp接口，此外額外實現(xiàn)了CefRenderProcessHandler接口的OnContextCreated方法，來獲取V8上下文的引用，具體實現(xiàn)如下：

void QCefRenderHandler::OnContextCreated(CefRefPtr<CefBrowser> browser, CefRefPtr<CefFrame> frame, CefRefPtr<CefV8Context> context)
{
    qDebug() << "V8 Context Created!";

    // 取回V8上下文的window對象
    CefRefPtr<CefV8Value> object = context->GetGlobal();

    // 創(chuàng)建"sendMessage"函數(shù)，作為消息通道使用.
    m_v8Handler = CefRefPtr<QCefV8Handler>(new QCefV8Handler(browser));
    CefRefPtr<CefV8Value> func = CefV8Value::CreateFunction("sendMessage", m_v8Handler);

    // 將消息通道注冊到window對象
    object->SetValue("sendMessage", func, V8_PROPERTY_ATTRIBUTE_NONE);
}

上面的實現(xiàn)將sendMessage函數(shù)定義為消息通道，并注冊到了window對象上。sendMessage函數(shù)的具體實現(xiàn)則放在v8Handler的實現(xiàn)中。QCefV8Handler聲明如下：

class QCefV8Handler : public CefV8Handler
{
public:
    QCefV8Handler(CefRefPtr<CefBrowser> browser);
    ~QCefV8Handler();

virtual bool Execute(const CefString& name, CefRefPtr<CefV8Value> object, const CefV8ValueList& arguments, CefRefPtr<CefV8Value>& retval, CefString& exception) OVERRIDE;

private:
    CefRefPtr<CefBrowser> m_browser;

  IMPLEMENT_REFCOUNTING(QCefV8Handler)
};

QCefV8Handler通過實現(xiàn)CEF V8處理器的Execute執(zhí)行方法，完成對所加載的JS函數(shù)的過濾，并進行相應的處理，實現(xiàn)如下：

bool QCefV8Handler::Execute(const CefString& name,
           CefRefPtr<CefV8Value> object,
           const CefV8ValueList& arguments,
           CefRefPtr<CefV8Value>& retval,
           CefString& exception)
{
    if (name == "sendMessage")
    {
        if (arguments.size() == 1)
        {
            CefString msgStr = arguments.at(0)->GetStringValue();
            //消息會被發(fā)送到CefClient的OnProcessMessageReceived接口方法
            m_browser->SendProcessMessage(PID_BROWSER, CefProcessMessage::Create(msgStr));
            retval = CefV8Value::CreateInt(0);
        }
        return true;
    }
    return false;
}

這里首先對函數(shù)名和參數(shù)進行了校驗，之后調(diào)用CefBrowser的IPC方法SendProcessMessage向主進程的CefClient發(fā)送消息，從而完成頁面向瀏覽器主進程消息的傳遞。

實現(xiàn)消息通道

頁面->瀏覽器

要實現(xiàn)頁面到瀏覽器的消息通道，除了完成了上面渲染進程的控制擴展，我們還需要在QCefClient中添加接收IPC消息的接口實現(xiàn)。首先在QCefClient頭文件中聲明對CefClient接口的重載：

virtual bool OnProcessMessageReceived(CefRefPtr<CefBrowser> browser, CefProcessId source_process, CefRefPtr<CefProcessMessage> message) OVERRIDE;

然后實現(xiàn)這個接口，完成消息的接收處理：

bool QCefClient::OnProcessMessageReceived(CefRefPtr<CefBrowser> browser, CefProcessId source_process,  CefRefPtr<CefProcessMessage> message)
{
    emit webMsgReceived(QString(message->GetName().ToString().c_str()));
    return true;
}

可以看到這里只是對收到的消息進行了簡單的轉(zhuǎn)換，并通過信號發(fā)送給感興趣的下游控件使用。在第四小節(jié)的實現(xiàn)中，我們將QCefClient封裝到了QCefView中，因此在QCefView中也需要將這個信號轉(zhuǎn)發(fā)給它的下游控件：

connect(cefClientPtr, SIGNAL(webMsgReceived(QString)), this, SIGNAL(webMsgReceived(QString)));

這樣，QCefView接收JS消息的通道就實現(xiàn)完成了。

這里額外講解一下有關(guān)js alert的特殊處理。要實現(xiàn)js調(diào)用alert方法時的彈窗提醒，需要額外在CefClient中實現(xiàn)CefJSDialogHandler接口的OnJSDialog方法，參考實現(xiàn)如下：

bool QCefClient::OnJSDialog(CefRefPtr<CefBrowser> browser, const CefString& origin_url,JSDialogType dialog_type, const CefString& message_text,const CefString& default_prompt_text, CefRefPtr<CefJSDialogCallback> callback, bool& suppress_message)
{
    QMessageBox::warning(NULL, "JavaScript Alert", QString(message_text.ToString().c_str()));
    return true;
}

瀏覽器->頁面

承前所述，瀏覽器到頁面的消息發(fā)送通過CEF的JS腳本執(zhí)行接口實現(xiàn)。首先在QCefView中，聲明并實現(xiàn)一個執(zhí)行JS腳本的方法：

void QCefView::runJavaScript(QString script)
{
    CefRefPtr<CefFrame> frame = m_cefClient->browser()->GetMainFrame();
    frame->ExecuteJavaScript(script.toStdString(), frame->GetURL(), 0);
}

然后指定一個特定的JS方法，作為消息通道使用：

void QCefView::sendToWeb(QString msg)
{
    runJavaScript(QString("recvMessage('%1');").arg(msg));
}

如此，QCefView發(fā)送JS的通道也實現(xiàn)完成了。

使用消息通道發(fā)送消息

完成了消息通道的實現(xiàn)，接下來我們實際使用一下我們定義好的消息通道。

首先是Qt端的實現(xiàn)，在MainDlg的initWebView方法中，添加對JS消息的監(jiān)聽，并將監(jiān)聽到的消息通過QMessageBox顯示出來：

connect(m_webview, SIGNAL(webMsgReceived(QString)), this, [this](QString msg){
    QMessageBox::information(this, "接收到Web消息", msg);
});

然后添加文本輸入和發(fā)送按鈕，并在按鈕點擊信號對應的槽中調(diào)用QCefView的消息發(fā)送方法：

connect(ui->btnSend, &QPushButton::clicked, this, [this]() {
        QString msg = ui->editJsMsg->text();
        if(!msg.isEmpty()){
            m_webview->sendToWeb(msg);
        }
    });

接下來在頁面端實現(xiàn)消息接收和發(fā)送的接口msgutils.js：

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

// 控件控制函數(shù)
function onBtnSendMsg()
{
    var cmd = document.getElementById("待發(fā)送消息").value;
    window.sendMessage(cmd);
}

可以看到這里我們使用了上面定義的recvMessage和sendMessage兩個函數(shù)。然后在頁面上調(diào)用這些接口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CEF JS通道測試</title>
</head>
<body>
    <p>Cef Js Channel Test</p>
    <script type="text/javascript" src="./msgutils.js"></script>
    <input id="待發(fā)送消息" type="text" name="msgText" />
    <input type="button" value="發(fā)送消息到瀏覽器" onclick="onBtnSendMsg()" />
</body>
</html>

實際運行一下瀏覽器，并加載我們實現(xiàn)的這個頁面，消息發(fā)送效果如下：


cef消息通道qt->web.png
cef消息通道web->qt.png

有關(guān)CEF消息通道的講解就先進行到這里。下一節(jié)將分析使用CEF接口實現(xiàn)Https雙向認證的方法。

>>返回系列索引

參考鏈接

[1] Chromium Embedded Framework官網(wǎng)
[2] Chromium Embedded Framework官方教程

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容