Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to call JavaScript methods from HTML content from QML WebView component

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

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 3 Posters 11.0k 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.
  • S Offline
    S Offline
    shav
    wrote on 27 Dec 2012, 13:48 last edited by
    #1

    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
    0
    • S Offline
      S Offline
      shav
      wrote on 27 Dec 2012, 15:51 last edited by
      #2

      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
      0
      • 1 Offline
        1 Offline
        1roo
        wrote on 27 Dec 2012, 19:34 last edited by
        #3

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

        1 Reply Last reply
        0
        • C Offline
          C Offline
          chrisadams
          wrote on 27 Dec 2012, 23:56 last edited by
          #4

          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
          0

          1/4

          27 Dec 2012, 13:48

          • Login

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