默认情况下，
我想从WebView中运行的HTML页面访问QtObject-调用方法、读/写属性等。
据我所知，我需要在QML和HTML端之间建立WebSockets连接，然后将其用作WebChannel的传输。
不要混淆WebView和WebEngineView-我知道如何使用WebEngineView，但我需要使用WebView。
所以，这就是我所拥有的。
QML侧
QtObject {
id: someObject
WebChannel.id: "backend"
property string someProperty: “property value"
}
WebSocketServer {
listen: true
port: 55222
onClientConnected: {
console.log(webSocket.status);
//webSocket.onTextMessageReceived.connect(function(message) {
// console.log(qsTr("Server received message: %1").arg(message));
//});
}
}
WebView {
url: "index.html"
//webChannel: channel // invalid property name "webChannel"
//experimental.webChannel.registeredObjects: [someObject] // invalid property name "experimental"
}
WebChannel {
id: channel
registeredObjects: [someObject]
}
HTML端
window.onload = function()
{
// here will be QtObject from QML side
var backend;
var socket = new WebSocket("ws://localhost:55222");
socket.onopen = function()
{
//socket.send("some message");
new QWebChannel(socket, function(channel) {
backend = channel.objects.backend;
});
};
}
function alertProperty()
{
alert(backend.someProperty);
}
简单的消息交换工作正常(socket.send()(，所以传输是可以的，但我如何将WebChannel分配给WebView？对于WebEngineView，它很简单，有一个webChannel属性(甚至不需要使用WebSockets(，但WebView中没有类似的东西。我的意思是，必须告诉WebView WebChannel包含我的QtObject，这样JS才能看到它？
如果WebView不支持WebChannel(？(，那么如何使用外部浏览器？这个例子表明使用C++是可能的，但我想使用QML。
我使用问题5.11.1。
WebView不支持WebChannel。因此，解决方案是使用WebSocketServer和QWebChannelAbstractTransport，如下所示：
main.cpp
#include <QGuiApplication>
#include <QJsonDocument>
#include <QQmlApplicationEngine>
#include <QWebChannelAbstractTransport>
#include <QtWebView>
class WebSocketTransport : public QWebChannelAbstractTransport{
Q_OBJECT
public:
using QWebChannelAbstractTransport::QWebChannelAbstractTransport;
Q_INVOKABLE void sendMessage(const QJsonObject &message) override{
QJsonDocument doc(message);
emit messageChanged(QString::fromUtf8(doc.toJson(QJsonDocument::Compact)));
}
Q_INVOKABLE void textMessageReceive(const QString &messageData){
QJsonParseError error;
QJsonDocument message = QJsonDocument::fromJson(messageData.toUtf8(), &error);
if (error.error) {
qWarning() << "Failed to parse text message as JSON object:" << messageData
<< "Error is:" << error.errorString();
return;
} else if (!message.isObject()) {
qWarning() << "Received JSON message that is not an object: " << messageData;
return;
}
emit messageReceived(message.object(), this);
}
signals:
void messageChanged(const QString & message);
};
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
qmlRegisterType<WebSocketTransport>("com.eyllanesc.org", 1, 0, "WebSocketTransport");
QtWebView::initialize();
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
#include "main.moc"
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtWebSockets 1.1
import QtWebView 1.1
import QtWebChannel 1.0
import com.eyllanesc.org 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
WebView {
url: "qrc:/index.html"
anchors.fill: parent
}
QtObject {
id: someObject
property string someProperty: "prop"
WebChannel.id: "core"
function receiveText(text){
console.log("receiveText: ", text)
}
signal sendText(string text)
}
WebSocketTransport{
id: transport
}
WebSocketServer {
listen: true
port: 12345
onClientConnected: {
if(webSocket.status === WebSocket.Open){
channel.connectTo(transport)
webSocket.onTextMessageReceived.connect(transport.textMessageReceive)
transport.onMessageChanged.connect(webSocket.sendTextMessage)
}
}
}
WebChannel {
id: channel
registeredObjects: [someObject]
}
// testing
Timer{
interval: 500
running: true
repeat: true
onTriggered: someObject.sendText(Qt.formatTime(new Date(), "hh:mm:ss") + " from QML")
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript">
//BEGIN SETUP
function output(message) {
var output = document.getElementById("output");
output.innerHTML = output.innerHTML + message + "n";
}
window.onload = function() {
if (location.search != "")
var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9-:/.]+)/.exec(location.search)[1]);
else
var baseUrl = "ws://localhost:12345";
output("Connecting to WebSocket server at " + baseUrl + ".");
var socket = new WebSocket(baseUrl);
socket.onclose = function() {
console.error("web channel closed");
};
socket.onerror = function(error) {
console.error("web channel error: " + error);
};
socket.onopen = function() {
output("WebSocket connected, setting up QWebChannel.");
new QWebChannel(socket, function(channel) {
// make core object accessible globally
window.core = channel.objects.core;
input.innerHTML = core.someProperty;
document.getElementById("send").onclick = function() {
var input = document.getElementById("input");
var text = input.value;
if (!text) {
return;
}
output("Sent message: " + text );
input.value = "";
core.receiveText(text + " From HTML");
}
core.sendText.connect(function(message) {
output("Received message-" + core.someProperty + " : " + message);
});
core.receiveText("Client connected, ready to send/receive messages!");
output("Connected to WebChannel, ready to send/receive messages!");
});
}
}
//END SETUP
</script>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
#input {
width: 400px;
margin: 0 10px 0 0;
}
#send {
width: 90px;
margin: 0;
}
#output {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<textarea id="output"></textarea><br />
<input id="input" /><input type="submit" id="send" value="Send" onclick="javascript:click();" />
</body>
</html>
完整的示例可以在以下链接中找到