如何在QWebEngineView中将值从QML传递给JavaScript

问题描述

DataManager 是一个类，我可以通过以下代码（Qt版本5.8.0）在QML中访问它。

DataManager is a class and I can access this in QML by below code (Qt version 5.8.0).

DataManager *d = new DataManager;
QQuickView *viewver = new QQuickView;
viewver->rootContext()->setContextProperty("dataManager", d);

现在在QML中我创建了一个 WebEngineView 和这里我正在加载运行正常的本地HTML文件。

Now in QML I created a WebEngineView and here I am loading a local HTML file which is running fine.

WebEngineView{
    id : webEnginView
    anchors.fill: parent
    url : dataManager.htmlURL();
}

现在我要访问 dataManager 加载的HTML文件的JavaScript代码中的值。在此先感谢。

Now I want to access dataManager value in JavaScript code of loaded HTML file. Thanks in advance.

推荐答案

QML代码

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

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>

这篇关于如何在QWebEngineView中将值从QML传递给JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！