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>