C++ - Methode aus Webansichten aufrufen JavaScript

In qt4 qml dem qtwebkit 1.0 hat die Komponente webview eine Eigenschaft javaScriptWindowObjects. Ich habe es verwendet, um JavaScriptWindowObjects zum Kontext meiner Webseiten Javascript hinzuzufügen, um C++ Funktionen aufzurufen. wie soC++ - Methode aus Webansichten aufrufen 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); 
     } 
    } 
}

, so kann ich es von den Web-Seiten JavaScript aufrufen wie so

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

aber in QT5 qml QtWebKit 3.0 gibt es nicht so etwas wie javaScriptWindowObjects

Wie kann ich das erreichen in qt5 qml?

Quelle

2013-01-15 dustin.b

Gerade für die Aufzeichnung dieses erhalten getan:

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>

Quelle

2013-01-16 18:24:30

Bindung Diese ist faszinierend, b Aber ich habe festgestellt, dass beim Einschalten des Experimentalmodus trotz der zusätzlichen Funktionalität einige seltsame Dinge mit den Seitensteuerungen passiert sind. Die Kontrollkästchen und Optionsfelder wurden verwackelt, die Bildlaufleisten verschwanden (wenn ich sie mit DIVs anschaltete) und das SELECT-Element funktionierte nicht mehr. Es ist definitiv eine Tech-Vorschau nur in Qt 5.5 - nicht bereit für die Primetime. – Volomike

@Volomike Ich habe nicht viel Zeit für Qml und vor allem in diesem Thema seit der Veröffentlichung dieser Anwendung im März 2013 investiert. Ich frage mich, Sie betrachten dies als eine Vorschau. Zu der Zeit des Schreibens war es. Heute würde ich vermuten, dass es dort eine stärkere Implementierung gibt, die nicht "experimental" vorangestellt ist. Leider habe ich jetzt keine Zeit, dies weiter zu untersuchen, aber diese Antwort scheint veraltet zu sein und muss sowieso "refactoring" werden. –

Qt 5.6 ist Beta ab 2015 Nov 20, aber sie enthalten QtWebView (nicht mit QWebView zu verwechseln) darin mit der Tech-Vorschau von Minibrowser ebenso. Ich habe Qt 5.6 Beta noch nicht ausprobiert. In der Zwischenzeit gibt es eine lebhafte Diskussion mit Entwicklern, die sich über die Richtung der Webkomponenten in Qt nach 5.5 aufregen: http://forum.qt.io/topic/55504/anyone-knows-the-future-of-qt-webkit – Volomike

Qt QML 5.8.0 & JavaScript

QML-Code

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

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

Quelle

2017-05-10 06:07:08 SourabhKus

C++ - Methode aus Webansichten aufrufen JavaScript

Antwort

Verwandte Themen