Вызвать метод С++ из веб-просмотров Javascript

В qt4 qml qtwebkit 1.0 компонент webview имеет свойство javaScriptWindowObjects. Я использовал его, чтобы добавить javaScriptWindowObjects в контекст моих веб-страниц javascript для вызова функций С++. вот так

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

как я могу добиться этого в qt5 qml?


webview qml qtwebkit qt5
person dustin.b    schedule 15.01.2013    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Просто для записи, чтобы сделать это:

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>
person dustin.b    schedule 16.01.2013
comment
Это увлекательно, но я обнаружил, что при включении экспериментального режима, несмотря на то, что я получил дополнительные функции, с элементами управления страницы происходили некоторые странные вещи. Флажки и переключатели стали шаткими, полосы прокрутки исчезли (если я включил их с помощью DIV), а элемент SELECT перестал работать. Это определенно технический предварительный просмотр только в Qt 5.5 - не готовый к выпуску в прайм-тайм. - person Volomike; 20.11.2015
comment
@Volomike В последнее время я не тратил много времени на qml и особенно на эту тему, поскольку выпуск этого приложения был еще в марте 2013 года. Мне интересно, вы считаете это предварительным просмотром. на момент написания было. Сегодня я бы предположил, что есть более сильная реализация, не имеющая префикса экспериментальной. К сожалению, сейчас у меня нет времени, чтобы исследовать это дальше, но этот ответ кажется устаревшим и в любом случае нуждается в рефакторинге. - person dustin.b; 20.11.2015
comment
Qt 5.6 является бета-версией по состоянию на 20 ноября 2015 года, но они включают в себя QtWebView (не путать с QWebView) вместе с техническим предварительным просмотром Minibrowser. Я еще не пробовал бета-версию Qt 5.6. Между тем, идет оживленная дискуссия с разработчиками, недовольными направлением веб-компонентов в Qt после 5.5, здесь: forum.qt.io/topic/55504/anyone-knows-the-future-of-qt-webkit - person Volomike; 20.11.2015
comment
@Volomike Спасибо, я, вероятно, прочитаю его полностью, когда вернусь домой с работы ... первые несколько постов не такие обнадеживающие: / я думал, что спустя почти 3 года вебкит был полностью заменен веб-движком, что звучит ужасно грустно :( - person dustin.b; 20.11.2015
comment
Возможно, есть и другие варианты, если это нужно для OSX или iOS. Например, MacGap1 (доступен на Github) и, возможно, способ приклеить его к Qt/C++ (или Qt/любому языку). Или выполните работу в собственном XCode против библиотеки webkit, а затем вызовите ваши Qt dynlibs. - person Volomike; 20.11.2015
comment
Можно ли это сделать с новым WebEngineView? Я пытался, но потерпел неудачу с Cannot assign to non-existent property "preferences". Я использую Qt 5.7.0 в Windows. - person zhm; 17.11.2016

arrow_upward
0
arrow_downward

Привязка 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>
person SourabhKus    schedule 10.05.2017
comment
Но как насчет WebView (ОП спрашивал об этом)? - person retif; 12.07.2018