Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    How to call JavaScript methods from HTML content from QML WebView component

    QML and Qt Quick
    3
    4
    10538
    Loading More Posts
    • 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.
    • S
      shav last edited by

      Hi guys!

      I need help with QML Web View component. I want to call some JavaScript methods from HTML page which I load to WebView from internet. This is my QML code:
      @
      import QtQuick 2.0
      import QtWebKit 3.0

      Rectangle {
      id: rootObject
      objectName: "rootObject"
      width: 360
      height: 360

      WebView {
          id: testWebViewJs
          anchors.fill: parent
          url: "http://google.com"
          onUrlChanged: {
              console.log(testWebViewJs.url);
              testWebViewJs.evaluateJavaScript("alert(\"messages\");");
          }
      }
      

      }
      @

      The code is work but when I try call
      @
      testWebViewJs.evaluateJavaScript("alert("messages");");
      @

      I received error like this:
      @
      TypeError: Object QQuickWebView(0x104430550) has no method 'evaluateJavaScript'
      @

      What I do wrong? When I write this code QtCreator was shown to me 'evaluateJavaScript' in context menu with autocomplete, so this methods exists. Can you tell me how I can call some JS methods from HTML page?

      Thanks for the any help!

      Mac OS and iOS Developer

      1 Reply Last reply Reply Quote 0
      • S
        shav last edited by

        Also I found another problem with QML Web View in QML 2 with Qt5. The problem is:
        @
        Cannot assign to non-existent property "settings"
        settings.javascriptEnabled: true
        ^
        @

        The QML code of WebView component looks like:
        @
        WebView {
        id: testWebViewJs
        anchors.fill: parent
        url: "http://google.com"
        html: ""
        onUrlChanged: {
        console.log(testWebViewJs.url);
        testWebViewJs.evaluateJavaScript("alert("messages");");
        }
        settings.javascriptCanAccessClipboard: true
        settings.javaEnabled: true
        settings.javascriptCanOpenWindows: true
        settings.javascriptEnabled: true
        }
        @

        Maybe in current version of Qt 5 WebView component have some bugs with provisions for methods and property or I forgot import some libs.

        P.S. In my .pro file I added a modules:
        @
        QT += qml quick webkit webkitwidgets
        @

        Mac OS and iOS Developer

        1 Reply Last reply Reply Quote 0
        • 1
          1roo last edited by

          I'd like to see how to do it too.

          1 Reply Last reply Reply Quote 0
          • C
            chrisadams last edited by

            The API of the WebView type in QtWebKit 3.0 is completely different to the previous version.
            See http://doc-snapshot.qt-project.org/5.0/qtwebkit/qtwebkit-index.html for information, and see http://doc-snapshot.qt-project.org/5.0/qtwebkitexamples/qtwebkitexamples-index.html for examples using the WebView type.

            From what I can see, the new API is simpler, but possibly allows less introspection and binding capability, than the previous version. It could be that inspecting the DOM or calling JS functions directly on a WebView is not possible with the new API. You can, of course, use QWebElement and friends, but you might have to write some custom wrappers to expose its functionality to QML. I don't really know the WebKit code at all, so I can't really say for sure, to be honest.

            Cheers,
            Chris.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post