CS001496 - Gather data from web page with JavaScript, WebKit, and Qt
Overview
This snippet demonstrates how you can gather data from a web page to Qt via WebKit. We will use the article as base for this snippet.
Preconditions
- Read
Code
html/view.html
We'll add two JavaScript includes in the head tag.
WebKit example Welcome
Hello World!
js/jquery.js
This js file is a reference to a JavaScript library called . You can obtain it here:
jQuery enables you to be more productive when writing JavaScript.
js/script.js
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: http://www.jquery.com * * $("#paragraph") documented here: http://docs.jquery.com/Selectors/id#id * .after documented here: http://docs.jquery.com/Manipulation/after * .val documented here: http://docs.jquery.com/Val */button_click = function(event) { $("#paragraph").after("" + $("#text").val() + "
");} /** * This is run after the the web page has been rendered. * $(document).ready documented here: * http://docs.jquery.com/Tutorials:Introducing_$(document).ready() */$(document).ready(function(){ /* * Hides all the h1 elements. * Element selector: http://docs.jquery.com/Selectors/element#element * hide function: http://docs.jquery.com/Hide */ $("h1").hide(); /* * Hides all the p elements. */ $("p").hide(); /* * Hides element with form id. */ $("#form").hide(); /* * Shows all the h1 elements with animation. * show function: http://docs.jquery.com/Show */ $("h1").show('slow'); /* * Shows all the p elements with animation. */ $("p").show('slow'); /* * Shows the element with form as id with animation. */ $("#form").show('slow'); /* * Adds button_click as click event handler * for element with button as id. * click function: http://docs.jquery.com/Events/click */ $("#button").click(button_click);});src/gather-data.js
/** * 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++) { a.push(e[i].textContent); } return a;};Qt_QWET_gather();Add these files to the resources file and include the resource file in your project file as explained in .
The following code demonstrates how to read data from the web page via JavaScript executed from Qt.
src/qwet.h
The only things added to the header file in comparison to 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#include #include #include #include #include #include #include #include #include #include #include #include #include class QWET : public QMainWindow{ Q_OBJECT public: QWET(QWidget *parent = 0); ~QWET(); private slots: void gatherButtonClicked();private: QPointer _webView; QPointer _layout; QPointer _pList; QString _gatherJS; void setupUI(); QString readFileToQString(const QString& fileName) const; void updatePList(QListWidget* widget, const QList & values);}; #endif // QWET_H src/qwet.cpp
#include "qwet.h" QWET::QWET(QWidget *parent) : QMainWindow(parent) { setupUI();} QWET::~QWET() { } void QWET::setupUI() { /** * Create the central widget * and set it. */ QFrame* cW = new QFrame(this); setCentralWidget(cW); /** * Set the layout to central widget. */ _layout = new QVBoxLayout(this); cW->setLayout(_layout); _layout->setMargin(0); _layout->setSpacing(0); /** * 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); _webView->load(QUrl("qrc:///html/view.html")); _webView->show(); /** Add it to layout */ _layout->addWidget(_webView); /** We'll gather the results to list widget. */ _pList = new QListWidget(this); _layout->addWidget(_pList); /** Add the gather text button */ QPushButton* gatherButton = new QPushButton("Gather text.", this); connect(gatherButton, SIGNAL(clicked()), this, SLOT(gatherButtonClicked())); _layout->addWidget(gatherButton);} /** * 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. */ QListlist = variant.toList(); /** Update the entries in the list widget.*/ this->updatePList(this->_pList.data(), list); }} /** * This function updates list widgets entries */void QWET::updatePList(QListWidget* widget, const QList & values) { /** Check that the parameters are valid. */ if(widget != 0 && !values.isEmpty()) { /** Clear the entries. */ widget->clear(); /** Go through the values...*/ QListIterator i(values); while(i.hasNext()) { QVariant v = i.next(); /** ...and add them to widget. */ widget->addItem(v.toString()); } }} /** * Reads file to a string. */QString QWET::readFileToQString(const QString& fileName) const { QFile file(fileName); if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) return QString(); QTextStream in(&file); QString content = in.readAll(); file.close(); return content;} Postconditions
You've now created this:
See also