Call Qml code (with a WebView item: QtWebView 1.0) from a local html (source of the WebView)



  • Hi,

    I have a Qt application where I create and display a QQuickView object, using a QML file as source.
    This QML has a 'WebView' item (QtWebView 1.0), which displays a local .html file.

    I need to access to html code from Qt code (Qt --> Qml --> Html) and viceversa (Html --> Qml --> Qt)

    My Qt code and Qml code are connected, but I have the problem in Qml <--> Html...

    Searching on the internet I have tried several options, but no suceess. The last one is with a .js file, as proxy (which should be called from Html, and should call to Qml)

    My codes now are like that:

    MyWebView.qml
    
        Rectangle {
        id: rectMyWebView
    
        width: 1000
        height: 800
    
        WebView {
            id: myWebView
    
            objectName: "webView"
    
            anchors.fill: parent
            url: "file:///d:\\test.html"
    
            function fromHtmlToQML1(text)
            {
                console.log("Text from html" + text)
            }
        }
    
        // Called from Qt code: OK!!
        function fromQtToQml(text)
        {
            console.log("Text from qt: " + text)
            runJavaScript("jsCall2", function(result) { console.log(result); });
        }
    
        // 2nd option
     
        function fromHtmlToQML2(text)
        {
            console.log("Text from html" + text)
        }
    }
    

    test.html:

    <!doctype html>
    <html>
        <head>
            <style type="text/css">
            ...
            ...
            </style> 
        </head>
    
        <body> 
            ...
    
            <script src="test.js" type="text/javascript"></script>
    
            <div class="mybutton"> <button onclick='myFunction1()'>Call Qt</button></div>
    
    	...
    
        </body>
    </html>
    

    test.js (where must be located??)

    function myFunction1() {
        myWebView.fromHtmlToQML1();
        myWebView.fromHtmlToQML2();
    }
    

    When I use the Html button, and error appears:

    "js: Uncaught ReferenceError: myFunction1 is not defined"

    Is it a problem of the location of test.js?

    Is it the way to call Qml from the Html (used as source of the WebView in the Qml)

    Thanks a lot in advance,

    Diego



  • I have successfully called to the .js function (problem of .js location), but from there I can not call the Qml code:
    ERROR: "js: Uncaught ReferenceError: myWebView is not defined"

    And I can call js from Qml:
    In .qml file:
    import 'test.js' as JS
    ...
    JS.myFunction1() // Works

    BUT still no idea about js --> Html (if possible, it is the post important goal)

    Thanks


  • Moderators

    @Diego-Donate I think you will need to use WebChannel.



  • Thanks, I will try using that.



  • Hi Diego,

    Could you access qml / c++ from html in QT Webview? I want to use this scenario when I click a html button / link in local html file,. I want to access mobile phone camera or other features.

    Could you share your experience html / qml integration when Qtwebview is involved at this story?

    Regards


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.