從webviews中調用C++方法Javascript

在qt4 qml中，qtwebkit 1.0的組件webview有一個屬性javaScriptWindowObjects。我用它將javaScriptWindowObjects添加到我的網頁JavaScript的上下文中以調用C++函數。像這樣從webviews中調用C++方法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？

來源

2013-01-15 dustin.b

只是爲了完成這件事的記載：

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>

來源

2013-01-16 18:24:30

這令人着迷，b我發現，當打開實驗模式時，即使我獲得了額外的功能，頁面控件也會發生一些奇怪的事情。複選框和單選按鈕變得不可思議，滾動條消失（如果我用DIV打開它們），並且SELECT元素停止工作。這絕對是Qt 5.5中的一項技術預覽 - 沒有準備好用於黃金時段。 – Volomike

@Volomike自從這個應用程序的發佈於2013年3月發佈以來，我沒有多花時間在qml上，特別是在這個主題中。我想知道你認爲這是一個預覽。在撰寫本文時是這樣。今天我猜想有一個更強大的實施，沒有前綴「實驗」。不幸的是，我現在沒有時間來進一步調查，但這個答案似乎已經過時了，無論如何需要「重構」。 –

Qt 5.6截至2015年11月20日爲beta版本，但它們在Minibrowser的技術預覽版本中也包含QtWebView（不會與QWebView混淆）。我還沒有嘗試過Qt 5.6 beta。與此同時，與開發人員一起熱烈討論了5.5版本之後對Qt中的Web組件方向感到不滿：http://forum.qt.io/topic/55504/anyone-knows-the-future-of-qt-webkit – Volomike

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

來源

2017-05-10 06:07:08 SourabhKus

從webviews中調用C++方法Javascript

回答

相關問題