QT5利用chromium內核與HTML頁面交互


在QT5.4之前,做QT開發瀏覽器只能選擇QWebkit,但是有過使用的都會發現,這個webkit不是出奇的慢,簡直是慢的令人發指,Release模式下還行,debug下你就無語了,但是webkit畢竟已經集成在QT中很多年了,各種接口都相當的成熟了,與HTML交互更是封裝得相當容易上手,QNetworkAccessManager,QProxy都對外提供了對應的接口讓開發者實現自定義。但是最終還是被淘汰掉,與chromium內核相比起來還是要遜色不少,從QT5.4開始官方已經集成chromium,並且會逐漸淘汰掉webkit,最近嘗試了一下QT的chromium組件,在QT里面叫QWebEngine,剛開始用除了覺得它快以外,沒有覺得其他的優點,例如:1、不支持自定義QNetworkAccessManager 2、無法獲取Cookie等等,官方提供的例子也是看得雲里霧里的,然后再就是與HTML的交互,HTML無法主動調用chromium定義的SLOT或者Method,只能從QWebEngine發起對HTML的調用,希望更多的接口在后面的版本中能夠逐漸開放。

下面來講一下從QWebEngine調用頁面腳本的方法,這里以某寶首頁為例:

web=new QWebEngineView();
ui->Main->insertWidget(0,web);//這里是添加到一個StackWidget
ui->Main->setCurrentIndex(0);
connect(web,&QWebEngineView::loadFinished,[=](int){
         web->page()->runJavaScript("這里是JS腳本");
});
web->load(QUrl("http://www.taobao.com"));

然后執行的JS腳本如下:

KISSY.all("<div id='prompt_msk' style='height:100%;width:100%;background:#000000;position:fixed;top:0px;left:0px;z-index:9999998;opacity:0.3'></div>").appendTo("body");

KISSY.all("<div id='prompt_dlg' style='height:150px;width:400px;background:#ffffff;position:fixed;top:100px;left:50%;z-index:9999999;border:3px solid #454545'><div style='background:#888888;border-bottom:1px solid #454545;padding-left:5px;height:30px;line-height:30px;color:#ffffff;'>訂單信息提取提示</div><div style='padding:10px;line-height:23px;' id='prompt_dlg_cnt'>正在解析訂單數據,請稍等...</div></div>").appendTo("body");

KISSY.all("#prompt_dlg").css({left:(KISSY.all(window).width()-KISSY.all("#prompt_dlg").outerWidth())/2});

由於淘寶用的自己的KISSY框架,所以要先對KISSY框架有一定的了解!下面看一下執行之后的結果

 

下面我們再來看下runJavaScript方法有個回調函數,QWebEngineCallback(const QVariant &),這里我們常識獲取一下某個節點的值(這里獲取登陸賬戶的昵稱為例)並且返回給QT利用debug輸出
通過瀏覽器F12可以發現,昵稱在一個a標簽class為login-info-nick的節點里面,KISSY獲取的代碼為:

KISSY.all('a.login-info-nick').text();

在傳值給回調方法JS中不需要return即可,開始我以為要return返回一直是QVariant(Invalid);后來發現不需要return則正常了,QT回調代碼:

web->page()->runJavaScript("KISSY.all('a.login-info-nick').text();",[=](const QVariant &v){
                qDebug()<<v;
            });

輸出結果為:

這里成功接收到JS的結果!

 

利用這種方法可以在任意的頁面執行自己所想要的JS數據請求,同時你還可以自己注入jQuery(官方有例子)
不過最好是利用目標站點自帶的JS框架,難免多個框架有沖突,我就把jQuery注入到淘寶網站進行AJAX數據請求,發現怎么都沒辦法返回請求的數據,相反,我在一般的HTTP網站請求則可以返回數據,異步的也可以返回,但是在淘寶就是不行,換做淘寶自己的KISSY框架請求,則可以正常獲取到數據!不知道是不是https的限制,一種方法不行就換另一種對吧,到目前為止我已經成功的獲取到登陸賬戶的訂單數據跟物流數據了,數據是JSON格式,但是:QWebEngineCallback對返回數據的大小有限制,我在官方文檔里面沒找到有說限制大小的地方,但是親測數據是有大小限制的,我請求的數據大概在40KB,回調直接跳過也不報錯,當我把數據清理再回調則發現可以正常返回!所以務必交互數據最精簡!

到目前還沒發現能夠主動從HTML調用QWebEngine的接口,有了解的同學請賜教,謝謝!
我不是做C++的,個人愛好,寫得業余,各位見笑了!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM