从webviews Javascript调用c++方法

在qt4 qml的qtwebkit 1.0组件webview有一个属性javaScriptWindowObjects。我用它来添加javaScriptWindowObjects到我的网页javascript的上下文调用c++函数。Like so

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

所以我可以从网页javascript中调用它，像这样

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

但是在qt5 qml qtwebkit 3.0中没有javaScriptWindowObjects这样的东西

如何在qt5qml中实现?

只是为了记录一下:

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>

Qt 5.8.0 QML &JavaScript绑定

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>

相关内容

最新更新

热门标签：