WebEngine Content Manipulation Example#
Demonstrates how to load and manipulate web content.
Content Manipulation shows how to use JQuery with Qt WebEngine Widgets to create a web browser with special effects and content manipulation.
In the application, we call
QMainWindow with a
QWebEngineView as a central widget to build up the browser itself.
Running the Example#
To run the example from Qt Creator , open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.
MainWindow Class Definition#
MainWindow class inherits
QMainWindow . It implements a number of slots to perform actions on both the application and on the web content:
We also declare a
QString that contains jQuery, a
QWebEngineView that displays the web content, and a
QLineEdit that acts as the address bar.
MainWindow Class Implementation#
We start by implementing the constructor. The first part of the constructor sets the value of
progress to 0. This value will be used later in the code to visualize the loading of a web page:
Next, the jQuery library is loaded by using a
The second part of the constructor creates a
QWebEngineView and connects slots to the view’s signals:
Furthermore, we create a
QLineEdit as the browser’s address bar. We then set the vertical
QSizePolicy to fill the available area in the browser at all times. We add the
QLineEdit to a
QToolBar together with a set of navigation actions from
The third part of the constructor implements two
QMenu widgets and assigns a set of actions to them:
The last line sets the
QWebEngineView as the central widget in the
When the page is loaded,
adjustLocation() is triggered by the
loadFinished() signal in
QWebEngineView to update the address bar:
changeLocation(), we create a
QUrl object, and then use it to load the page into the
QWebEngineView . When the new web page has finished loading,
adjustLocation() will be run once more to update the address bar:
adjustTitle() method sets the window title and displays the loading progress:
This slot is triggered by the
titleChanged() signal in
When a web page has loaded, the
finishLoading() method is triggered by the
loadFinished() signal in
QWebEngineView . The method then updates the progress in the title bar and calls
QWebEngineView , and therefore needs to be loaded every time a new page is loaded. Once the jQuery library is loaded, we can start executing the different jQuery functions in the browser.
rotateImages() function is then called explicitly to make sure that the images of the newly loaded page respect the state of the toggle action.
The first jQuery-based function,
The remaining methods remove different elements from the current web page. The
removeGifImages() removes all GIF images on the page by looking up the src attribute of all the elements on the web page. Any element with a gif file as its source is removed:
removeInlineFrames() method removes all iframe or inline elements:
removeObjectElements() method removes all object elements:
removeEmbeddedElements() method removes any elements using the embed tag, such as plugins embedded on the page: