How to pass value from QML to JavaScript in QWebEngineView
DataManager
is a class and I can access it in QML under the code below (Qt version 5.8.0).
DataManager *d = new DataManager;
QQuickView *viewver = new QQuickView;
viewver->rootContext()->setContextProperty("dataManager", d);
Now in QML I have created WebEngineView
and here I am uploading a local HTML file which works fine.
WebEngineView{
id : webEnginView
anchors.fill: parent
url : dataManager.htmlURL();
}
Now I want to access the value DataManager
in the JavaScript code of the loaded HTML file. Thanks in advance.
+3
source to share
1 answer
QML code
import QtQuick 2.0
import QtWebEngine 1.4
import QtWebChannel 1.0
Item{
id:root
height: 500
width: 500
// Create WebChannel
WebChannel{
id:webChannel
}
//Now, let’s create an object that we want to publish to the HTML/JavaScript clients:
QtObject {
id: myObject
objectName: "myObject"
// the identifier under which this object
// will be known on the JavaScript side
//WebChannel.id: "webChannel"
property var send: function (arg) {
sendTextMessage(arg);
}
// signals, methods and properties are
// accessible to JavaScript code
signal someSignal(string message);
function someMethod(message) {
console.log(message);
someSignal(message);
return dataManager.getGeoLat();
}
property string hello: "world";
}
Rectangle{
anchors.fill: parent
color: "black"
WebEngineView{
id : webEnginView
anchors.fill: parent
url : dataManager.htmlURL();
webChannel: webChannel
}
}
Component.onCompleted: {
webChannel.registerObject("foo", myObject);
//Expose C++ object
webChannel.registerObject("bar", dataManager);
}
}
Html code
<script type="text/javascript" src="qrc:/Map/qwebchannel.js"></script>
<script type="text/javascript">
new QWebChannel(qt.webChannelTransport, function(channel) {
// all published objects are available in channel.objects under
// the identifier set in their attached WebChannel.id property
var foo = channel.objects.foo;
var dManager = channel.objects.bar;
// access a property
alert(foo.hello);
// connect to a signal
foo.someSignal.connect(function(message) {
alert("Got signal: " + message);
});
// invoke a method, and receive the return value asynchronously
foo.someMethod("bar", function(ret) {
alert("Got return value: " + ret);
});
});
</script>
+5
source to share