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

Diego Donate

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

Diego Donate

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

p3c0

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

Diego Donate

Thanks, I will try using that.

kerem

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