Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QtWebEngine
  4. QtWebEngine and JS Integration

QtWebEngine and JS Integration

Scheduled Pinned Locked Moved Unsolved QtWebEngine
7 Posts 2 Posters 708 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    emircanacardev
    wrote on last edited by
    #1

    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.

    JKSHJ 1 Reply Last reply
    0
    • E 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.

      JKSHJ Offline
      JKSHJ Offline
      JKSH
      Moderators
      wrote on last edited by
      #2

      @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:

      1. Pass your file to WebEngineScript.sourceUrl (see https://doc.qt.io/qt-6/qml-qtwebengine-webenginescript.html#sourceUrl-prop )
      2. Add the script to a WebEngineScriptCollection (see https://doc.qt.io/qt-6/qml-qtwebengine-webenginescriptcollection.html )
      3. 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.

      Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

      1 Reply Last reply
      1
      • E Offline
        E Offline
        emircanacardev
        wrote on last edited by emircanacardev
        #3

        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"
            }
        }
        
        
        1 Reply Last reply
        0
        • JKSHJ Offline
          JKSHJ Offline
          JKSH
          Moderators
          wrote on last edited by JKSH
          #4

          @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)
          }
          

          Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

          1 Reply Last reply
          0
          • E Offline
            E Offline
            emircanacardev
            wrote on last edited by
            #5

            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.

            JKSHJ 1 Reply Last reply
            0
            • E Offline
              E Offline
              emircanacardev
              wrote on last edited by
              #6

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

              1 Reply Last reply
              0
              • E 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.

                JKSHJ Offline
                JKSHJ Offline
                JKSH
                Moderators
                wrote on last edited by
                #7

                @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)
                    }
                }
                

                Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved