Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Gather data from web page with JavaScript, WebKit, and Qt

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

The article is believed to be still valid for the original topic scope.

Article Metadata
Tested with
Devices(s): Nokia N97, N900
Platform(s): Qt
Keywords: Qt, web, WebKit, HTML, QWebView, JavaScript
Created: taaidant (24 Nov 2009)
Last edited: lpvalente (23 Aug 2014)



This snippet demonstrates how you can gather data from a web page to Qt via WebKit. We will use the Display local web page with Qt WebKit article as base for this snippet.




We'll add two JavaScript includes in the head tag.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en">
<!-- You reference the resources with qrc:// -->
<!-- Stylesheet reference -->
<link rel="stylesheet" href="qrc:///css/view.css" />
<!-- jQuery include -->
<script type="text/javascript" src="qrc:///js/jquery.js" />
<!-- Our own script include -->
<script type="text/javascript" src="qrc:///js/script.js" />
<title>WebKit example</title>
<!-- Header -->
<h1 id="header">Welcome</h1>
<!-- Paragraph -->
<p id="paragraph">Hello World!</p>
<!-- Form -->
<form id="form" action="#">
<label for="text">Text</label>
<!-- Text input -->
<input id="text" type="text" />
<!-- Submit button -->
<input id="button" type="button" value="Submit!"/>


This js file is a reference to a JavaScript library called jQuery. You can obtain it here:

jQuery enables you to be more productive when writing JavaScript.


This file includes JavaScript which is used to create animations and dynamically add content to the site from the web page.

* Adds p element after the element which has paragraph as the id
* with the content from input element with text as the id.
* This is jQuery syntax:
* $("#paragraph") documented here:
* .after documented here:
* .val documented here:

button_click = function(event) {
$("#paragraph").after("<p>" + $("#text").val() + "</p>");
* This is run after the the web page has been rendered.
* $(document).ready documented here:

* Hides all the h1 elements.
* Element selector:
* hide function:

* Hides all the p elements.

* Hides element with form id.

* Shows all the h1 elements with animation.
* show function:

* Shows all the p elements with animation.

* Shows the element with form as id with animation.

* Adds button_click as click event handler
* for element with button as id.
* click function:



* Gathers all the text content from p elements
* to an array and returns it.

Qt_QWET_gather = function() {
a = [];
e = document.getElementsByTagName('p');
for(var i = 0; i < e.length; i++) {
return a;

Add these files to the resources file and include the resource file in your project file as explained in Using resources in Qt.

The following code demonstrates how to read data from the web page via JavaScript executed from Qt.


The only things added to the header file in comparison to Display local web page with Qt WebKit are includes, the gatherButtonClicked slot, helper methods, and a reference to QListWidget which is used to display the gathered data.

#ifndef QWET_H
#define QWET_H
#include <QtCore/QPointer>
#include <QtCore/QFile>
#include <QtCore/QTextStream>
#include <QtCore/QVariant>
#include <QtCore/QList>
#include <QtWebKit/QWebView>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebFrame>
#include <QtGui/QWidget>
#include <QtGui/QMainWindow>
#include <QtGui/QFrame>
#include <QtGui/QVBoxLayout>
#include <QtGui/QListWidget>
#include <QtGui/QPushButton>
class QWET : public QMainWindow
QWET(QWidget *parent = 0);
private slots:
void gatherButtonClicked();
QPointer<QWebView> _webView;
QPointer<QVBoxLayout> _layout;
QPointer<QListWidget> _pList;
QString _gatherJS;
void setupUI();
QString readFileToQString(const QString& fileName) const;
void updatePList(QListWidget* widget,
const QList<QVariant>& values);
#endif // QWET_H


#include "qwet.h"
QWET::QWET(QWidget *parent) : QMainWindow(parent)
void QWET::setupUI()
* Create the central widget
* and set it.

QFrame* cW = new QFrame(this);
* Set the layout to central widget.

_layout = new QVBoxLayout(this);
* Let's create the web view which
* will be used to display our page
* with which we will be communicating with.

_webView = new QWebView(this);
/** Add it to layout */
/** We'll gather the results to list widget. */
_pList = new QListWidget(this);
/** Add the gather text button */
QPushButton* gatherButton = new QPushButton("Gather text.", this);
connect(gatherButton, SIGNAL(clicked()),
this, SLOT(gatherButtonClicked()));
* This slot gathers the p text content from the html page
* and adds it to the the list widget.

void QWET::gatherButtonClicked()
* Read the java script to be executed to a string.

if(this->_gatherJS.isEmpty()) {
this->_gatherJS = this->readFileToQString(QString(":/js/gather-data.js"));
else {
this->_gatherJS = "Qt_QWET_gather();";
/** Run the java script on the page and get results. */
QVariant variant = this->_webView->page()->mainFrame()->evaluateJavaScript(this->_gatherJS);
/** We make sure that the results are there. */
if(!variant.isNull() &&
variant.type() == QVariant::List) {
/** Ask for the acual list we're expecting. */
QList<QVariant> list = variant.toList();
/** Update the entries in the list widget.*/
this->updatePList(this->, list);
* This function updates list widgets entries

void QWET::updatePList(QListWidget* widget, const QList<QVariant>& values)
/** Check that the parameters are valid. */
if(widget != 0 &&
!values.isEmpty()) {
/** Clear the entries. */
/** Go through the values...*/
QListIterator<QVariant> i(values);
while(i.hasNext()) {
QVariant v =;
/** ...and add them to widget. */
* Reads file to a string.

QString QWET::readFileToQString(const QString& fileName) const
QFile file(fileName);
if (! | QIODevice::Text))
return QString();
QTextStream in(&file);
QString content = in.readAll();
return content;


You've now created this:

QWETGD N900.pngQWETGD N97.png

See also

This page was last modified on 23 August 2014, at 20:25.
139 page views in the last 30 days.