2. 程式人生 > >實現QT與HTML頁面通訊

實現QT與HTML頁面通訊

阿新 • • 發佈：2018-12-25

1.  前言

最近，C++和WEB本地混合應用開發模式逐漸流行起來，個人也認為標記語言描述的介面是介面開發的一個發展趨勢。WPF、Java FX，當然也少不了Html。基於Html的介面在開發效率，可移植性上都十分有優勢，所以也被很多程式採用

隨著HTML5技術風生水起，Qt開發團隊用近一年的時間開發了一個全新的基於Chromium的瀏覽器引擎Qt WebEngine，以支援面向未來的Hybrid應用開發，並完全支援桌面和嵌入式平臺。此外，Qt WebEngine不僅提供了易於使用的跨平臺API，還完全集成了Qt的圖形庫，允許網頁內容進行疊加，並與Qt使用者介面或OpenGL圖形效果混合。Qt 5.4仍然包含老舊的Qt WebKit模組，但在其後釋出的版本中將停止對於WebKit的支援，對此，Qt團隊建議開發者將專案統一從WebKit遷移至Qt WebEngine，而對於需要Web能力的新專案，最好直接採用Qt WebEngine開發。在現在下載的QT5.6 beta預編譯版本中已經沒有了Qt WebKit模組。


目前QT官方的文件中對如何從原來的WebKit遷移至QtWebEngine沒有提供足夠豐富的文件和指導。

本文記錄一些從WebKit遷移至QtWebEngine，實現C++與HTML和JS互動的一些經驗和例子。

2.  使用Qt WebEngine和WebChannel模組

在官方提供的Porting from QtWebKit to QtWebEngine---https://wiki.qt.io/Porting_from_QtWebKit_to_QtWebEngine文件中給出了從WebKit遷移至QtWebEngine的一些建議和指導，其中提到QWebFrame 已經被合併到QwebEnginePage中，Qt WebEngine不能和QnetworkAccessManager互動等。

原來在Webkit中使用的互動整合的類和方法也不能使用了，原來Webkit中常用的互動方式如下：

1)    在Qt程式碼中載入並顯示該頁面

QWebView view; 

view.load(QUrl("test.html")); 

view.show();

官方推薦的使用方式：

    view->load(QUrl("http://qt-project.org/"));

   view->show();

2)    在Qt物件中訪問web頁面元素

// myPlugin指向的物件可在HTML中用名字myPluginObject進行訪問

webView->page()->mainFrame()->addToJavaScriptWindowObject("myPluginObject",myPlugin); 

// 當訊號signalEmitted被觸發時，呼叫JavaScript的functionToCall函式

webView->page()->mainFrame()->evaluateJavaScript("myPluginObject.signalEmitted.connect(functionToCall);")

官方推薦的使用方式：

方法一：(const QString & scriptSource, FunctorOrLambdaresultCallback)

方法二：使用QtWebChannel方式，這是官方的推薦方式，他可以很方便的實現C++和HTML/JS的雙向通訊，同時實現C++和HTML/JS的解耦，方便開發人員的分工及系統整合，參見後面的例子。

3)    在web頁面中訪問Qt物件

在web頁面中可以通過類似於下的JavaScript程式碼訪問Qt物件：

<ahref="javascript:document.getElementByIdx_x("myLabel").setText("通過JavaScript訪問Qt物件");"mce_href="javascript:document.getElementByIdx_x("myLabel").setText("通過JavaScript訪問Qt物件");">點選訪問Qt物件</a>

官方推薦的使用方式：

使用QtWebChannel方式，這是官方的推薦方式，他可以很方便的實現C++和HTML/JS的雙向通訊，同時實現C++和HTML/JS的解耦，方便開發人員的分工及系統整合，參見後面的例子。

在QT5.5和QT5.6中，利用Qt的Qt WebEngine和WebChannel模組，你完全可以進行本地桌面與web混合應用開發，你可以自由地混合JavaScript，樣式表，Web內容和Qt元件。基於Chromium的 Qt WebEngine是一個非常成熟的web瀏覽引擎。你可以在Ｃ++ 中執行JavaScript，或者在網頁中整合Ｃ++物件，並且通過JavaScript和這些物件進行互動。

一個現代的ＨＴＭＬ渲染引擎只是混合開發的一半，另一半就是本地應用和渲染物件的互動。ＱＴ的Chromium的 Qt WebEngine 整合提供了這種解決方案，當然目前還不是很完善。

從QT5.4開始就新增了Qt WebChannel模組，該模組提供了在QML/C++ 和 HTML/Javascript之間的一個簡單、易用的橋接，從而使得開發能夠使用Qt和Web技術進行混合開發，目前QT官方也推薦是用QtWebChannel來橋接C++和HTML，參見Qt WebChannel – bridging the gap betweenC++/QML and the web------https://www.youtube.com/watch?v=KnvnTi6XafA，這是2014年Qt開發者大會上的一段視屏演講。

通過QtWebChannel能夠實現C++/QML和HTML/javascript客戶端之間進行無縫橋接，目前主要支援兩種方式的橋接。

  • l  客戶機可以是任何支援WebSockets的JavaScript runtime機器和應用，客戶機可以是獨立的應用或瀏覽器。也就是說QtWebChannel是基於WebSockets協議之上。
  • l  通過IPC的方式實現C++/QML和HTML/javascript客戶端之間進行通訊。在QT應用內嵌入HTML或JS頁面的情況下使用基於IPC的WebChannel通訊效率更高效。

在官方演進路線中提到將來的整合解決方案將支援以下特性：

  • l  使用object標籤嵌入Qt Widgets元件。這可以讓使用Ｃ++程式碼的Qt元件包含在網頁中，作為網頁的部分外觀。
  • l  在JavaScript中訪問Ｃ++物件。你可以在JavaScript環境中插入Ｃ++物件，讓網頁尾本直接訪問你的資料結構。
  • l  在Qt中執行JavaScript。你可以在Ｃ++呼叫網頁環境中的JavaScript函式，觸發網頁事件。
  • l  共享客戶端儲存。在JavaScript和Ｃ++中你都具有訪問資料庫的能力，這樣當下線時也能共享大量資料。

3.  QtWebChannel實現C++和HTML/javascript頁面之間通訊例項

在例項中在一個介面裡實現整合QT C++元件和QWebEnginePage中嵌入的HTML頁面通訊，左邊的lineedit元件中輸入的內容通過一個document物件又QtWebChannel傳到web頁面，並又js解析在HTML頁面上顯示，右邊HTML頁面中的INPUT標籤中輸入的內容也由document物件通過QtWebChannel傳到QT C++介面。通過QtWebChannel使得JS能夠接收到QT C++中傳出的物件，及由C++發出的訊號，並與相對應的方法關聯，C++也能介紹到由JS傳來的物件，並呼叫相應的槽函式。

 

工程清單如下：


首先，定義一個document物件用於在C++和JS之間傳遞，該物件實現了訊號和槽：

Document.h內容：

#ifndefDOCUMENT_H
#defineDOCUMENT_H
#include<QObject>
#include<QString>
#include"ui_mainwidget.h"
namespaceUi{
classMainWidget;
}
classDocument:publicQObject
{
Q_OBJECT
Q_PROPERTY(QStringtextMEMBERs_textNOTIFYsendText)
public:
explicitDocument(QObject*parent=nullptr):QObject(parent){}
voidsetSendTextText(constQString&text);
voidsetUi(Ui::MainWidget*ui);
publicslots:
voidreceiveText(constQString&r_text);
signals:
voidsendText(constQString&text);
private:
voiddisplayMessage(constQString&message);
QStrings_text;
QStringrecieve_text;
Ui::MainWidget*mainUi;
};
#endif//DOCUMENT_H

Document.cpp內容：

#include"document.h"
voidDocument::setSendTextText(constQString&text)
{
s_text=text;
emitsendText(s_text);
}
voidDocument::displayMessage(constQString&message)
{
mainUi->editor->appendPlainText(message);
}
/*!
ThisslotisinvokedfromtheHTMLclientsideandthetextdisplayedontheserverside.
*/
voidDocument::receiveText(constQString&r_text)
{
displayMessage(QObject::tr("Receivedmessage:%1").arg(r_text));
}
voidDocument::setUi(Ui::MainWidget*ui)
{
mainUi=ui;

}

用QT Designer設計主介面，並實現主介面MainWidget類，內容如下：

mainwidget.h內容：

#ifndefMAINWIDGET_H
#defineMAINWIDGET_H
#include"document.h"
#include<QWidget>
#include<QString>
namespaceUi{
classMainWidget;
}
classMainWidget:publicQWidget
{
Q_OBJECT
public:
explicitMainWidget(QWidget*parent=0);
~MainWidget();
//publicQ_SLOTS:
//voidsetEnabled(bool);
privateslots:
voidon_pushButton_clicked();
private:
boolisModified()const;
Ui::MainWidget*ui;
Documentm_content;
};
#endif//MAINWIDGET_H

mainwidget.cpp內容：

#include"mainwidget.h"
#include"ui_mainwidget.h"
#include"previewpage.h"
#include"document.h"
#include<QFile>
#include<QWebChannel>
MainWidget::MainWidget(QWidget*parent):
QWidget(parent),
ui(newUi::MainWidget)
{
ui->setupUi(this);
PreviewPage*page=newPreviewPage(this);
ui->preview->setPage(page);
m_content.setUi(ui);
QWebChannel*channel=newQWebChannel(this);
channel->registerObject(QStringLiteral("content"),&m_content);
page->setWebChannel(channel);
ui->preview->setUrl(QUrl("qrc:/index.html"));
ui->editor->setPlainText("hello...\n");
}
MainWidget::~MainWidget()
{
deleteui;
}
boolMainWidget::isModified()const
{
returnui->editor->document()->isModified();
}
voidMainWidget::on_pushButton_clicked()
{
m_content.setSendTextText(ui->lineEdit->text());
}

再定義一個PreviewPage類用於載入HTML頁面，在主介面MainWidget類初始化的時候，將他主介面中的WebEngineView初始化為該例項物件，主要初始化程式碼如下：

PreviewPage*page=newPreviewPage(this);  //建立例項物件

ui->preview->setPage(page);                 //將物件設定到主介面

ui->preview->setUrl(QUrl("qrc:/index.html"));                               //設定載入的HTML頁面

previewpage.h內容：

#ifndefPREVIEWPAGE_H
#definePREVIEWPAGE_H
#include<QWebEnginePage>
classPreviewPage:publicQWebEnginePage
{
Q_OBJECT
public:
explicitPreviewPage(QObject*parent=nullptr):QWebEnginePage(parent){}
protected:
boolacceptNavigationRequest(constQUrl&url,NavigationTypetype,boolisMainFrame);
};
#endif//PREVIEWPAGE_H

previewpage.cpp內容：

#include"previewpage.h"

#include<QDesktopServices>

boolPreviewPage::acceptNavigationRequest(constQUrl&url,

QWebEnginePage::NavigationType/*type*/,

bool/*isMainFrame*/)

{

//Onlyallowqrc:/index.html.

if(url.scheme()==QString("qrc"))

returntrue;

QDesktopServices::openUrl(url);

returnfalse;

}

使用的web頁面index.html內容如下：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<scripttype="text/javascript"src="./qwebchannel.js"></script>

<scripttype="text/javascript">

//BEGINSETUP

functionoutput(message)

{

varoutput=document.getElementById("output");

output.innerHTML=output.innerHTML+message+"\n";

}

window.onload=function(){

output("settingupQWebChannel.");

newQWebChannel(qt.webChannelTransport,function(channel){

//makedialogobjectaccessibleglobally

varcontent=channel.objects.content;

document.getElementById("send").onclick=function(){

varinput=document.getElementById("input");

vartext=input.value;

if(!text){

return;

}

output("Sentmessage:"+text);

input.value="";

content.receiveText(text);

}

content.sendText.connect(function(message){

output("Receivedmessage:"+message);

});

content.receiveText("Clientconnected,readytosend/receivemessages!");

output("ConnectedtoWebChannel,readytosend/receivemessages!");

});

}

//ENDSETUP

</script>

<styletype="text/css">

html{

height:100%;

width:100%;

}

#input{

width:400px;

margin:010px00;

}

#send{

width:90px;

margin:0;

}

#output{

width:500px;

height:300px;

}

</style>

</head>

<body>

<textareaid="output"></textarea><br/>

<inputid="input"/><inputtype="submit"id="send"value="Send"onclick="javascript:click();"/>

</body>

</html>

主程式main.cpp的內容如下：

#include"document.h"

#include"mainwidget.h"

#include<QApplication>

intmain(intargc,char*argv[])

{

QApplicationa(argc,argv);

MainWidgetw;

w.show();

returna.exec();

}

相關推薦

實現QT與HTML頁面通訊

1.  前言 最近，C++和WEB本地混合應用開發模式逐漸流行起來，個人也認為標記語言描述的介面是介面開發的一個發展趨勢。WPF、Java FX，當然也少不了Html。基於Html的介面在開發效率，可移植性上都十分有優勢，所以也被很多程式採用 隨著HTML5技術風生水起，Q

Qt 與 Html 通訊 之 QWebChannel

required QWebChannel文件 Header #include qmake: QT += webchannel Since: Qt 5.4 Inherits:

Spring Boot+Socket實現與html頁面的長連線，客戶端給伺服器端發訊息，伺服器給客戶端輪詢傳送訊息，附案例原始碼

功能介紹 客戶端給所有線上使用者傳送訊息 客戶端給指定線上使用者傳送訊息 伺服器給客戶端傳送訊息(輪詢方式) 注意：socket只是實現一些簡單的功能，具體的還需根據自身情況，程式碼稍微改造下 專案搭建 專案結構圖   pom.xml <?xml version="1.0" encod

#使用JDBC訪問資料庫，實現web與資料庫的通訊

//驅動程式名 String driverName = "com.mysql.jdbc.Driver"; //資料庫使用者名稱 String userName = "root"; //密碼 String userPasswd = "1

Spring+Websocket實現伺服器與Andoird端通訊

本部落格伺服器端內容參考於部落格：http://www.cnblogs.com/3dianpomian/p/5902084.html。 寫這篇部落格的原因是在網上查閱了很多資料，關於websocket的介紹和程式碼很多，但是很少有統一給出伺服器端和Andori

Android混合開發之Activity類與html頁面之間的相互跳轉(並解決黑屏問題)

在底部有本程式原始碼下載 本程式流程：程式啟動-->testActivity--->phonegap2框架類--->index.html--->testActivity，主要實現activity與html頁面的相互跳轉，並實現 傳遞引數的功能。 程式

使用/proc實現核心與使用者空間通訊

1. 前言 Linux核心空間與使用者空間的通訊可通過"/proc"目錄的檔案讀寫來實現，如果只是控制核心中的引數而不是傳輸較多資料的話，用“/proc”是很合適的。另外一種核心與使用者空間通訊方式方式是使用核心裝置的讀寫或IOCTL來實現，以後再介紹。 2. /

實現C++與Python的通訊

########## 以下所有文字均為答主手敲，轉載請註明出處和作者 ########## ## 更新：關於ctypes，見拙作 聊聊Python ctypes 模組 - 蛇之魅惑 - 知乎專欄 屬於混合程式設計的問題。較全面的介紹一下，不僅限於題主提出的問題。 以下討論中，Python指它的標準實現，即C

QT原始碼閱讀——QT與HTML互動程式設計

QT中通過QWebKit元件處理HTML，其中最重要的就是QWebView了~~~ 通過例子formextractor我們可以窺之一二： /*******************************************************************

Linux C UDP Socket實現客戶與伺服器簡單通訊

在linux平臺下用c語言udp協議實現客戶與伺服器的簡單通訊與封裝的實現 一、伺服器端 1、新建CreateServer.c和CreateServer.h檔案，伺服器的建立程式碼在此實現,程式中封裝了建立TcpSocket和UdpSocket伺服器的方法，

JSP頁面與html頁面在ie下顯示的樣式不一致的問題

今天前端將樣式與html給我檔案我轉化為jsp之後在我的電腦上使用IE11的IE9和其他瀏覽器都沒有問題，但是在發給其他人檢查的時候卻發現在win7電腦的IE9上出現樣式錯亂的問題，前端除錯無果的情況下

Java Lucene (9)：HTMLParser與html頁面解析

java lucene 技術(9):HTMLParser與html頁面解析HTMLParser 是一個開源的Java庫，它提供了介面，支援線性和巢狀HTML文字。在實際的專案中只需要將htmlparser.jar 匯入classpath中，就可以使用HTMLParser提供的

odoo中運用ir.actions.client實現自定義HTML頁面開發

一、背景 odoo的頁面展示包含多種型別，由於odoo本身的渲染機制比較複雜，速度也比較慢，所以想開發普通的html頁面，隨心所欲。 二、開發過程 利用ir.actions.client 型別的動作

Tiny6410與RFID讀卡器通訊，並實現LED模擬控制和QT顯示(階段總結)

本裝置現階段實現的基本功能如下：（1）RFID讀卡器接收到便籤資訊並通過串列埠傳送給6410開發板，6410根據《XSS協議》對資料進行封裝，其作為tcp client通過socket 與伺服器進行通訊，這類6410只是將串列埠資料轉發給網口，只是一個單向的通訊過程。（2

使用QWebView與所載入的HTML頁面進行通訊

#include <QWebView> class CWebInterface: public QWebView { Q_OBJECT public: CWebInterface(QWidget* p=NULL); signals: v

HTML頁面靜態化實現

java靜態化文件位置註意：實體類定義：public class News { private String title; private String pubTime; private String category; private String newsContent; public

html中提交表單並實現不跳轉頁面處理返回值

html value put 提示 pan sdn type detail all <html> <head> <script type="text/javascript" src="h

【Arduino】使用C#實現Arduino與電腦進行串行通訊

可視化 action 指示 追加 停止 format reads 接受 按鈕 在給Arduino編程的時候，因為沒有調試工具，經常要通過使用串口通訊的方式調用Serial.print和Serial.println輸出Arduino運行過程中的相關信息，然後在電腦上用Ardu

關於ssm，前臺html頁面jquery的success回撥函式實現跳轉重新整理問題

$(function(){ $.ajax({ type:“post”, url:"…/…/b/k.action", dataType: “json”, success:function(data){ $(data).each(function(k,v){ $("tbody").a

四、Netty實現webSocket，實現伺服器與瀏覽器（HTML）線上聊天功能

        由於http協議有一個缺陷：通訊只能由客戶端發起。如果伺服器有連續的狀態變化，客戶端要獲知只能使用"輪詢"：每隔一段時候，就發出一個詢問，瞭解伺服器有沒有新的資訊。輪詢的效率低，非常浪費資源（因為必須不停連線，或者 HTTP 連線始終開啟）