Important: Please read the Qt Code of Conduct -

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:

        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)


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

    test.js (where must be located??)

    function myFunction1() {

    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,


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


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


Log in to reply