QtWebEngine and JS Integration

emircanacardev

main.qml

import "scripts.js" as Scripts

WebEngineView{.......} 
Button {
        id: playPauseButton
        text: "Pause"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {      
            playPauseButton.text = Scripts.playPause()
     
        }
    }

scripts.js

function playPause() {
    var video = document.querySelector('video')
    if (video.paused) {
        video.play()
        return "Pause"
    }
    else {
        video.pause()
        return "Play"
    }
}

I get "qrc:/scripts.js:2: ReferenceError: document is not defined".
How can I integrate js to qml?
My goal is seperate js and qml file

webView.runJavaScript("var video = document.querySelector('video');if (video.paused) { video.play(); } else { video.pause(); }; ")

This is working but i dont want to write js codes in qml file.

JKSH

@emircanacardev said in QtWebEngine and JS Integration:

i dont want to write js codes in qml file.

In that case, you can't import the *.js file into your QML document. The QML engine's JavaScript environment is separate from the web engine's JavaScript environment.

You could:

Pass your file to WebEngineScript.sourceUrl (see https://doc.qt.io/qt-6/qml-qtwebengine-webenginescript.html#sourceUrl-prop )
Add the script to a WebEngineScriptCollection (see https://doc.qt.io/qt-6/qml-qtwebengine-webenginescriptcollection.html )
Call the following:

webView.runJavaScript("playPause()", function(result) {
    playPauseButton.text = result
})

Another option is to use the Qt WebChannel module (see https://doc.qt.io/qt-6/qtwebchannel-index.html ) but this would involve writing much more code.

emircanacardev

Thanks for your time

WebEngineScript{
            id: scripts
            sourceUrl: "scripts.js"
            injectionPoint: WebEngineScript.DocumentCreation
        }

im not sure how to use WebEngineScripts cuz it is not working. What is the problem in this code?
url is correct it find scripts.js but :

webView.runJavaScript("playPause()", function(result) {
    playPauseButton.text = result
})

it cant find the function. (js: Uncaught ReferenceError: playPause is not defined)

scripts.js:

function playPause() {
    var video = document.querySelector('video')
    if (video.paused) {
        video.play()
        return "Pause"
    }
    else {
        video.pause()
        return "Play"
    }
}

JKSH

@emircanacardev You're welcome. You forgot to do step #2 in my previous post: Insert your script into the WebEngineView (see https://doc.qt.io/qt-6/qml-qtwebengine-webenginescriptcollection.html )

Example:

Component.onCompleted: {
    let script = WebEngine.script()
    script.sourceUrl = Qt.resolvedUrl("scripts.js")
    webView.userScripts.insert(script)
}

emircanacardev

Sorry i forgot to mention that i am using qt 5.15.2. WebEngineScriptCollection is not support the qt 5.x i think. Am i right.

Component.onCompleted: {
    let script = WebEngine.script()
    script.sourceUrl = Qt.resolvedUrl("scripts.js")
    webView.userScripts.insert(script)
}

i try this but still same.

emircanacardev

how can i use external js with webengine in qml? I didnt solve yet.

JKSH

@emircanacardev said in QtWebEngine and JS Integration:

WebEngineScriptCollection is not support the qt 5.x i think. Am i right.

Qt 5.15 didn't have WebEngineScriptCollection, but it still has a list of user scripts: https://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#userScripts-prop

// script.js
document.body.style.background = "#00aaaa"

// *.qml in Qt 5.15
WebEngineView {
    id: webView
    anchors.fill: parent
    url: "chrome://gpu"

    WebEngineScript {
        id: script
        sourceUrl: Qt.resolvedUrl("scripts.js")
    }
    Component.onCompleted: webView.userScripts.push(script)
}

// *.qml in Qt 6.7
WebEngineView {
    id: webView
    anchors.fill: parent
    url: "chrome://gpu"

    Component.onCompleted: {
        let script = WebEngine.script()
        script.sourceUrl = Qt.resolvedUrl("scripts.js")
        webView.userScripts.insert(script)
    }
}