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

Posted 2023-02-16

【中文标题】如何在 QWebEngineView 中将值从 QML 传递到 JavaScript

【英文标题】：How to pass value from QML to JavaScript in QWebEngineView

【发布时间】：2017-05-09 10:27:26

【问题描述】：

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

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

现在我在 QML 中创建了一个WebEngineView，在这里我正在加载一个运行良好的本地 html 文件。

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

现在我想在加载的 HTML 文件的 javascript 代码中访问 dataManager 值。提前致谢。

【参考方案1】：

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 代码

<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>

【讨论】：

你是摇滚明星！！！！！！您的解决方案就像一个魅力！非常感谢您与我们所有人分享这个！