介紹了webkit到webengine的和webengine中js和C++互相呼叫的方法
阿新 • • 發佈：2018-12-23
pro檔案
檔案中需要加入”QT += core gui webenginewidgets”這句話，不然提示找不到檔案
QT += core gui
QT += core gui webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
TARGET = WebEngine
TEMPLATE = app
# The following define makes your compiler emit warnings if you use
# any feature of Qt which has main.cpp
#include "mainwindow.h"
#include <QApplication>
#include <QWebEngineView>
#include <QWebChannel>
#include "cwebconnct.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QWebEngineView view;
//view.setUrl(QUrl(QStringLiteral("http://html5test.com")));
view.setUrl(QUrl("file:///C:/Users/Documents/QT/WebEngine/html/test.html"));
view.resize(1024, 768);
view.show();
QWebChannel* webchannel= new QWebChannel(&view);
CWebConnct webconnet(NULL);
webchannel->registerObject(QStringLiteral("content"),&webconnet);
view.page()->setWebChannel(webchannel);
return a.exec();
}橋接類
#ifndef CWEBCONNCT_H
#define CWEBCONNCT_H
#include <QObject>
#include <QDebug>
class CWebConnct : public QObject
{
Q_OBJECT
public:
explicit CWebConnct(QObject *parent = nullptr);
signals:
void sendText(const QString &text);
public slots:
void receiveText(const QString &r_text);
};
#endif // CWEBCONNCT_H#include "cwebconnct.h"
CWebConnct::CWebConnct(QObject *parent) : QObject(parent)
{
}
void CWebConnct::receiveText(const QString &r_text)
{
qDebug()<<(QObject::tr("Received message: %1").arg(r_text));
emit sendText(r_text);//此處是非同步通訊 qDebug()<<(QObject::tr("Received message end"));
}測試的html檔案
需要在html中引用qwebchannel.js檔案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>彈窗</title>
<script type="text/javascript" src="./qwebchannel.js"></script>
<script type="text/javascript">
window.onload = function() { //所有的必須在裡面進行寫嗎？？？
var content;
new QWebChannel(qt.webChannelTransport, function(channel) {
// make dialog object accessible globally
content = channel.objects.content; //把物件賦值到JS中
document.getElementById("sendtest").onclick=function (){
content.receiveText("sss");
}
content.sendText.connect(function(message) { //連線QT中發出的訊號，裡面的message是引數;只需要在QT中呼叫此函式也就是sendText就可以呼叫JS函式
alert("Received message: " + message);
});
});
}
</script>
</head>
<body>
<button id="sendtest" >測試webchannel</button>
</html>