Skip to content

Can't load multiple qml elements in the same page

Minimal example to replicate the problem:

<html>
<head>
    <title>Qml Online minimal example</title>
</head>
<body>
    <script type="text/javascript" src="https://qmlonline.kde.org/qtloader.js"></script>
    <script type="text/javascript" src="https://qmlonline.kde.org/qml.js"></script>

    <div id="qmlonline"></div>

    <script type='text/javascript'>
        const qml = new QmlOnline("qmlonline")
        qml.registerCall({
            qmlMessage: function(msg) {
                console.log(`qml message: ${msg}`)
            },
            qmlError: function(data) {
                console.log(`qml message: ${JSON.stringify(msg)}`)
            },
            posInit: function() {
                qml.setCode(`
                    import QtQuick 2.7
                    import QtQuick.Controls 2.3
                    Rectangle {
                        color: "#179AF3"
                        anchors.fill: parent
                        Text {
                            text: "KDE"
                            font.pixelSize: 80
                            font.bold: true
                            color: "#82CB38"
                            anchors.centerIn: parent
                            RotationAnimator on rotation {
                                running: true
                                loops: Animation.Infinite
                                from: 0
                                to: 360
                                duration: 1500
                            }
                        }
                    }
                `)
            },
        })
        qml.init()
    </script>

    <div id="qmlonline2"></div>

    <script type='text/javascript'>
        const qml2 = new QmlOnline("qmlonline2")
        qml2.registerCall({
            qmlMessage: function(msg) {
                console.log(`qml message: ${msg}`)
            },
            qmlError: function(data) {
                console.log(`qml message: ${JSON.stringify(msg)}`)
            },
            posInit: function() {
                qml2.setCode(`
                    import QtQuick 2.7
                    import QtQuick.Controls 2.3
                    Rectangle {
                        color: "#179AF3"
                        anchors.fill: parent
                        Text {
                            text: "KDE"
                            font.pixelSize: 80
                            font.bold: true
                            color: "#82CB38"
                            anchors.centerIn: parent
                            RotationAnimator on rotation {
                                running: true
                                loops: Animation.Infinite
                                from: 0
                                to: 360
                                duration: 1500
                            }
                        }
                    }
                `)
            },
        })
        qml2.init()
    </script>
</body>
</html>
Edited by patrick pereira