How to call qml function from html side



  • Hi,
    I want to invoke form HTML a someFoo("someStr") function wich is located in QML as follows:

    QML

    import QtQuick 2.5
    import QtQuick.Window 2.2
    import QtWebEngine 1.0
    import QtWebChannel 1.0
    
    Window {
    visible: true
    width: 640
    height: 480
    
    QtObject {
        id: myQmlObj
    
        WebChannel.id: "myQmlObj";
    
        function someFoo(msg) {
            console.log(msg);
        }
    }
    
    WebEngineView {
        id: view
        anchors.fill: parent
        url: "myHtml.html"
    
        WebChannel {
           id: webChannel
           registeredObjects: [myQmlObj]
        }
    }
    }
    

    HTML

    <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script type="text/javascript">
        new QWebChannel(qt.webChannelTransport, function (channel) {
            var myQmlObj = channel.objects.myQmlObj;
            myQmlObj.someFoo("blabla");
        });
    </script>
    

    .pro file includes

    QT += core gui network webenginewidgets webchannel
    

    but when I try it I get the following error:

    js: Uncaught ReferenceError: qt is not defined

    Does anybody have an idea what I am doing wrong ? I am using Qt 5.9



  • Hard to say, as you don't provide all the code. I have used webchannel with Qt 5.9 so know it works. Your code looks right
    Do you have a "import QtWebChannel" in your QML. How about moving the WebChangel declaration out of your WebEngineView
    and/or declaring it like this:

    WebChannel {
    id:wc
    registeredObjects: [mapController]
    }

    WebEngineView {
    ...
    webChannel: wc
    }



  • @bartalke
    One more thing , since our problem seems to be on the html side. Try removing the qrc: from the javascript.
    src="qwebchannel.js"


Log in to reply
 

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