×

Discussion Board

Results 1 to 7 of 7
  1. #1
    Registered User
    Join Date
    Jan 2012
    Posts
    10

    Loading JS files inside a WebView?

    Hi,

    Say I have a WebView defined like so:

    Code:
    WebView {
      id: webView
      url: "http://www.developer.nokia.com"
      preferredWidth: 490
      preferredHeight: 400
      scale: 1
      smooth: false
    }
    Is there a way I can load/inject JavaScript files into it (say, add jQuery.js to the WebView)?

    Thanks for the help!

  2. #2
    Registered User
    Join Date
    Sep 2011
    Posts
    449

    Re: Loading JS files inside a WebView?

    Hi,

    You should be able to do it something like -

    import QtQuick 1.0
    import "jQuery.js" as JQ
    import QtWebKit 1.0

    Rectangle {

    ...........

    WebView {
    preferredWidth: 490
    preferredHeight: 400
    scale: 0.5
    smooth: false

    javaScriptWindowObjects: QtObject {
    WebView.windowObjectName: "JQ"
    }
    html: "<script>console.log(\"This is in WebKit!\"); window.JQ.init();</script>"

    function startupFunction() {
    console.log("This call is in QML!");
    JQ.<fn_name>({
    ...

    });
    console.log(JQ);
    }
    Component.onCompleted: startupFunction();
    }

    }

  3. #3
    Registered User
    Join Date
    Jan 2012
    Posts
    10

    Re: Loading JS files inside a WebView?

    Oh that's awesome! Thanks for the quick reply!

    It seems I'm encountering issues with it - I'm getting an error from jQuery:

    Code:
    [...]/jquery.js:4: ReferenceError: Can't find variable: window
    Any pointers?
    Also, what if I want to load multiple JavaScript files (ex: jquery.js, and then app.js)?
    Last edited by maxart; 2012-01-31 at 07:37.

  4. #4
    Nokia Developer Champion
    Join Date
    Jun 2008
    Location
    Noida,India
    Posts
    3,957

    Re: Loading JS files inside a WebView?

    How about changing the code to somewhat like here: http://doc.qt.nokia.com/4.7/qml-webv...owObjects-prop

  5. #5
    Registered User
    Join Date
    Jan 2012
    Posts
    10

    Re: Loading JS files inside a WebView?

    Quote Originally Posted by vineet.jain View Post
    How about changing the code to somewhat like here: http://doc.qt.nokia.com/4.7/qml-webv...owObjects-prop
    For some reason this isn't doing anything (no console log printed).
    Been trying to integrate that into FlickableWebView.qml (cf: http://developer.qt.nokia.com/doc/qt...ebbrowser.html )

  6. #6
    Registered User
    Join Date
    Jan 2012
    Posts
    10

    Re: Loading JS files inside a WebView?

    Could anybody help me using a WebView/FlickableWebView, and appending/loading multiple local JavaScript files to it?
    None of the proposed solutions have worked so far for me.

    Would really appreciate some help!

  7. #7
    Super Contributor
    Join Date
    Mar 2009
    Posts
    1,024

    Re: Loading JS files inside a WebView?

    Hi, you could use evaluateJavaScript to add JQuery.js file to your HTML.
    You need to run a JS which gets the HEAD eg: document.getElementsByTagName('head')
    and insert the <script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.7.1.min.js\">.

    Anyway this is a JS problem more than QML.

    WebView {
    id:mWebView
    ...
    onLoadFinished: mWebView.evaluateJavaScript("..........")

Similar Threads

  1. need to include files inside of sis
    By jcharth in forum Qt
    Replies: 1
    Last Post: 2010-11-17, 23:02
  2. Opening html files inside J2ME application
    By davidcmm in forum Mobile Java General
    Replies: 0
    Last Post: 2010-11-09, 02:18
  3. Problem loading sounds inside a thread
    By raffaelbechara in forum Symbian
    Replies: 6
    Last Post: 2009-02-04, 13:25
  4. where do installed files 'inside' a .sis go?
    By wormangel in forum Symbian
    Replies: 3
    Last Post: 2008-08-11, 10:49
  5. FileConnection for files inside jar
    By ben-efiz in forum Mobile Java General
    Replies: 1
    Last Post: 2008-03-13, 22:36

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •