Gọi phương thức C++ từ webviews Javascript

Trong qt4 qml qtwebkit 1.0, webview thành phần có thuộc tính javaScriptWindowObjects. Tôi đã sử dụng nó để thêm javaScriptWindowObjects vào ngữ cảnh của các trang web của tôi javascript để gọi hàm C++. như vậyGọi phương thức C++ từ webviews 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); 
     } 
    } 
}

vì vậy tôi có thể gọi nó từ các trang web javascript như vậy

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

nhưng trong qt5 QML qtwebkit 3.0 không có những điều như vậy như javaScriptWindowObjects

làm thế nào tôi có thể đạt được điều đó trong qt5 qml?

Nguồn

2013-01-15 dustin.b

Chỉ cần cho các hồ sơ để thực hiện điều này:

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>

Nguồn

2013-01-16 18:24:30

này là hấp dẫn, b Tôi thấy rằng khi bật chế độ Thử nghiệm, mặc dù tôi có chức năng bổ sung, một số điều kỳ lạ đã xảy ra với các điều khiển trang. Các hộp kiểm tra và các nút radio đã trở nên vô dụng, thanh cuộn biến mất (nếu tôi bật chúng bằng DIV), và phần tử SELECT ngừng hoạt động. Nó chắc chắn là một bản xem trước công nghệ chỉ trong Qt 5.5 - chưa sẵn sàng cho giờ vàng. – Volomike

@Volomike tôi đã không đầu tư nhiều thời gian cho qml gần đây và đặc biệt là trong chủ đề này kể từ khi phát hành ứng dụng này đã trở lại vào tháng 3 năm 2013. Tôi tự hỏi bạn xem xét việc xem trước này. tại thời điểm viết nó. Hôm nay tôi sẽ đoán có một thực hiện mạnh mẽ hơn không có tiền tố "thử nghiệm". Thật không may là tôi không có thời gian ngay bây giờ để điều tra thêm, nhưng câu trả lời này dường như đã lỗi thời và cần phải "tái cấu trúc". –

Qt 5.6 là phiên bản beta vào ngày 20 tháng 11 năm 2015, nhưng chúng bao gồm QtWebView (không bị nhầm lẫn với QWebView) trong đó với bản xem trước công nghệ của Minibrowser. Tôi chưa thử Qt 5.6 beta. Trong khi đó, có một cuộc thảo luận sôi nổi xảy ra với các nhà phát triển khó chịu về hướng thành phần web trong Qt sau 5.5 tại đây: http://forum.qt.io/topic/55504/anyone-knows-the-future-of-qt-webkit – Volomike

Qt 5.8.0 ràng buộc QML & Javascript

QML đang

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

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

Nguồn

2017-05-10 06:07:08 SourabhKus

Gọi phương thức C++ từ webviews Javascript

Trả lời

Các vấn đề liên quan