如何將QML中的值傳遞給QWebEngineView中的JavaScript

Question

DataManager是一個類，我可以通過下面的代碼（Qt版本5.8.0）在QML中訪問它。

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值。提前致謝。

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