Add data to a web page with JavaScript, WebKit, and Qt

From Nokia Developer 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
Code Example
Source file: Media:qwet.zip
Tested with
Devices(s): Nokia N97, N900
Platform(s): Qt
Keywords: Qt, web, WebKit, HTML, QWebView, JavaScript
Created: taaidant (18 Sep 2009)
Last edited: lpvalente (18 May 2014)



This snippet demonstrates how you can add data to a web page with Qt via WebKit. We will use the article Gather data from web page with JavaScript, WebKit, and Qt as base for this snippet.



Every time you see
/* ... */
there's code omitted from the source file for the sake of emphasising the code added to this snippet compared to the snippet this is based on.


This code will be injected from Qt to the web page and it'll add user input to the web page as a new paragraph.

* Adds text p element with text content
* after p element with id paragraph.

Qt_QWET_add = function(string) {
var p = document.getElementById("paragraph");
var s = p.nextSibling;
while(s.name != "" &&
s.name == "p") {
s = s.nextSibling;
var n = document.createElement("p");
var parent = s.parentNode;
parent.insertBefore(n, s);

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


The only things added to the header file in comparison to Gather data from web page with JavaScript, WebKit, and Qt are:

  • QLineEdit _text - for text input
  • QString _addJS - for injected JavaScript
  • addButtonClicked slot
  • escapeCharacters - helper method which escapes user input so that it can be used in generated JavaScript.
class QWET : public QMainWindow
/* ... */
private slots:
/* ... */
void addButtonClicked();
/* ... */
QPointer<QLineEdit> _text;
QString _addJS;
/* ... */
QString escapeCharacters(const QString& string);
#endif // QWET_H


Things which have changed compared to Gather data from web page with JavaScript, WebKit, and Qt:

  • addition of another button to click to add data from Qt
  • creation of QHBoxLayout to add the input widgets in
  • the addButtonClickedSlot slot implementation
  • escapeCharacters implementation
/* ... */
void QWET::setupUI()
/* ... */
/** Create a text input. */
_text = new QLineEdit(this);
/** Add the add text button. */
QPushButton* addButton = new QPushButton("Add text.");
connect(addButton, SIGNAL(clicked()),
this, SLOT(addButtonClicked()));
* Add the input widgets to own layout and add it to
* main layout.

QHBoxLayout* input = new QHBoxLayout(this);
* This slot adds a p element with content to the web page.

void QWET::addButtonClicked()
/** First time the add button is clicked, _addJS will be empty. */
if(this->_addJS.isEmpty()) {
/** Read the java script to be executed to a string. */
this->_addJS = this->readFileToQString(QString(":/js/add-data.js"));
else {
/** Second time we can reuse the same function again. */
this->_addJS = QString("Qt_QWET_add(\"%1\");");
/** We'll have to escape the characters from the user input
* so that we won't break the JavaScript we are generating. */

QString string = this->escapeCharacters(this->_text->text());
QString js = this->_addJS.arg(string);
/** Run the java script on the web page. */
/* ... */
* Escapes the string from things which
* aren't wanted to the JavaScript.

QString QWET::escapeCharacters(const QString& string)
QString rValue = QString(string);
/** Assign \\ to backSlash */
QString backSlash = QString(QChar(0x5c)).append(QChar(0x5c));
/** Replace \ with \\ */
rValue = rValue.replace('\\', backSlash);
/** Assing \" to quote. */
QString quote = QString(QChar(0x5c)).append(QChar(0x22));
/** Replace " with \" */
rValue = rValue.replace('"', quote);
return rValue;


You've now created this:

QWET N900.png

Complementary material

See also

This page was last modified on 18 May 2014, at 22:12.
152 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.