HTML and JS inside QML WebView pass variables

[alsi1400]

Like the title says I have a QML WebView and I set it's url to a local HTML file from a folder outside the qrc:/ (resources). HTML file is calling a JS and a CSS file from the same folder. All work very well.
The problem is that I want to pass JS variables to QML or to QT main (C++). I know it is possible to exchange messages from QML to C++ and vice verse but I want to pass JS variables from QML WebView to QML or to QT.
Also I know that you can pass variables from JS to QML if you import in QML the JS file (import "myjs.JS" as D) and then you can access the variables. But the thing is that I copied the HTML, CSS, JS file from qrc:/ to another folder then I set the WebView url to that HTML file from folder. If I am to access with import I will get the default variables not the current ones. The reason why I copied the files to another folder is that I work on phone and I can't access or set the url to HTML file inside qrc:/ or asset:/

The structure of my files is:
1 QT main.cpp
1 QML file
1 HTML file
1 CSS file
1 JS file

[wysota]

Have a look at QWebChannel (avaialble since Qt 5.4). You can expose a number of objects to your webpage and expose the same objects to your QML environment.

[alsi1400]

Your page seems interesting. I didn't studied all.

What I did, it was to follow the steps from: http://www.kdab.com/qt-webchannel-br...-gap-cqml-web/

import QtWebChannel 1.0
 
import QtWebKit 3.0
import QtWebKit.experimental 1.0
 
//Now, let’s create an object that we want to publish to the HTML/JavaScript clients:
 
QtObject {
    id: myObject
 
    // the identifier under which this object
    // will be known on the JavaScript side
    WebChannel.id: "foo"
 
    // signals, methods and properties are
    // accessible to JavaScript code
    signal someSignal(string message);
 
    function someMethod(message) {
        console.log(message);
        someSignal(message);
        return "foobar";
    }
 
    property string hello: "world"
}
 
//Publishing the object to the HTML clients in your WebView is as simple as
 
WebView {
    experimental.webChannel.registeredObjects: [myObject]
}

import QtWebChannel 1.0
 
import QtWebKit 3.0
import QtWebKit.experimental 1.0

//Now, let’s create an object that we want to publish to the HTML/JavaScript clients:
	
QtObject {
    id: myObject
 
    // the identifier under which this object
    // will be known on the JavaScript side
    WebChannel.id: "foo"
 
    // signals, methods and properties are
    // accessible to JavaScript code
    signal someSignal(string message);
 
    function someMethod(message) {
        console.log(message);
        someSignal(message);
        return "foobar";
    }
 
    property string hello: "world"
}

//Publishing the object to the HTML clients in your WebView is as simple as
	
WebView {
    experimental.webChannel.registeredObjects: [myObject]
}

To copy to clipboard, switch view to plain text mode 

But I don't have the module "WebKit" build for my phone version so the example above doesn't work. I do have the "WebChannel" module though, and the "WebView" module has fewer features than the original: for example I can't set a "html: " attribute. I wanted to set the "html: " from QML to the HTML file contains, then put the content from my JS file inside QML and then I could access the variables.

I will study your page and hope I get things done. Thank you again.

[wysota]

If you don't have a WebKit module then how are you instantiating WebView?

[alsi1400]

I can't instantiate WebView in Main.cpp or elsewhere in C++, only in QML with "import QtWebView 1.0" and before that in .pro file: "QT += webview".

WebView {
   id: webView
   objectName: "webView"
   anchors.fill: parent
   url: "http://www.yahoo.com"
   //html: doesn't work
}

WebView {
   id: webView
   objectName: "webView"
   anchors.fill: parent
   url: "http://www.yahoo.com"
   //html: doesn't work
}

To copy to clipboard, switch view to plain text mode 

On \Qt5.4.0\5.4\android_armv7\include I have these "Web" folders: QtWebChannel, QtWebSockets, QtWebView. I mentioned only the "Web" folders, because I have more than that.

Folders like QtWebKit or QtWebKitWidgets I have on \Qt5.4.0\5.4\mingw491_32 or \Qt5.4.0\5.4\Src, so I can use them only in Desktop version.

EDIT1: I don't know yet how to compile QtWebKit and QtWebKitWidgets from \Qt5.4.0\5.4\Src to \Qt5.4.0\5.4\android_armv7 with android compiler.

[wysota]

Where did you get that "webview" module from? It's not even listed on the official list of modules.

[alsi1400]

I downloaded the latest Qt for Android offline installer on Windows 32 bit, and then I checked "build examples". The project is in "Qt5.4.0\Examples\QtWebView\1.0\webview\webvie w" last .pro file from hierarchy.
If WebView have been build then there can be a possibility to build the WebKit and WebKitWidgets too for Android.

[wysota]

I think what you downloaded makes use of Android's native web view component where Qt only acts as a proxy so it is likely you won't be able to use the same features as ones offered by QtWebKit. However there is a pure javascript implementation of QWebChannel which you can easily use with Android's version of WebView.