webview वेबदृश्य जावास्क्रिप्ट से सी++ विधि को खोलें




qml qtwebkit (2)

बस रिकॉर्ड के लिए यह किया पाने के लिए:

import QtQuick 2.0
import QtWebKit 3.0
import QtWebKit.experimental 1.0

Rectangle {

   width: 1024
   height: 768

   WebView{
       url: "http://localhost"
       anchors.fill: parent

       experimental.preferences.navigatorQtObjectEnabled: true
       experimental.onMessageReceived: {

           console.debug("get msg from javascript")
           experimental.postMessage("HELLO")
       }
   } // webview
} // rectanlge


<html>
<body>
<h1>It just works!</h1>

<p>Play with me...</p>

<button onclick="nativecall();">test</button>
<div id="out"></div>

<script type="text/javascript">
    function nativecall(){
        console.log("will try native call");
        var elem = document.getElementById("out").innerHTML="clicked";
        navigator.qt.postMessage('this is a js call');
    }

    function jsCall(message){
        var elem = document.getElementById("out").innerHTML="and the other way around " + message;
    }

    navigator.qt.onmessage = function(ev) {
        jsCall(ev.data);
    }
</script>

</body>
</html>

Qt4 qml में qtwebkit 1.0 घटक वेबदृश्य में एक संपत्ति javaScriptWindowObjects । मैंने इसे javascriptWindowObjects को मेरे वेबपेज जावास्क्रिप्ट को संदर्भित करने के लिए c ++ फ़ंक्शन कॉल करने के लिए उपयोग किया था। इस तरह

WebView{
    url: "http://test.com"
    anchors.fill: parent
    scale: 1.0

    javaScriptWindowObjects: QtObject {
        WebView.windowObjectName: "native"

        function foo(x, y) {
             console.log("This is a call from javascript");
             myCppHandler.fooNative(b,c);
         }
    }
}

इसलिए मैं इसे वेबपेज जावास्क्रिप्ट से ऐसा कॉल कर सकता हूं

<script type="text/javascript">
    native.foo(1,2)
</script>

लेकिन qt5 qml qtwebkit 3.0 में ऐसी कोई चीज नहीं है जैसे javascriptWindowObjects

मैं इसे QT5 qml में कैसे प्राप्त कर सकता हूं?


Qt 5.8.0 QML और जावास्क्रिप्ट बंधन

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);
}
}

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;

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