| /**************************************************************************** |
| ** |
| ** Copyright (C) 2016 The Qt Company Ltd. |
| ** Contact: https://www.qt.io/licensing/ |
| ** |
| ** This file is part of the documentation of the Qt Toolkit. |
| ** |
| ** $QT_BEGIN_LICENSE:FDL$ |
| ** Commercial License Usage |
| ** Licensees holding valid commercial Qt licenses may use this file in |
| ** accordance with the commercial license agreement provided with the |
| ** Software or, alternatively, in accordance with the terms contained in |
| ** a written agreement between you and The Qt Company. For licensing terms |
| ** and conditions see https://www.qt.io/terms-conditions. For further |
| ** information use the contact form at https://www.qt.io/contact-us. |
| ** |
| ** GNU Free Documentation License Usage |
| ** Alternatively, this file may be used under the terms of the GNU Free |
| ** Documentation License version 1.3 as published by the Free Software |
| ** Foundation and appearing in the file included in the packaging of |
| ** this file. Please review the following information to ensure |
| ** the GNU Free Documentation License version 1.3 requirements |
| ** will be met: https://www.gnu.org/licenses/fdl-1.3.html. |
| ** $QT_END_LICENSE$ |
| ** |
| ****************************************************************************/ |
| |
| /*! |
| \example webenginewidgets/contentmanipulation |
| \title WebEngine Content Manipulation Example |
| \ingroup webengine-widgetexamples |
| \brief Demonstrates how to load and manipulate web content. |
| |
| \image contentmanipulation-example.png |
| |
| \e{Content Manipulation} shows how to use JQuery with \l {Qt WebEngine Widgets} to |
| create a web browser with special effects and content manipulation. |
| |
| In the application, we call \l {QWebEnginePage::runJavaScript()} to |
| execute jQuery JavaScript code. We implement a QMainWindow with a QWebEngineView |
| as a central widget to build up the browser itself. |
| |
| \include examples-run.qdocinc |
| |
| \section1 MainWindow Class Definition |
| |
| The \c MainWindow class inherits QMainWindow. It implements a number of |
| slots to perform actions on both the application and on the web content: |
| |
| \quotefromfile webenginewidgets/contentmanipulation/mainwindow.h |
| \skipto class MainWindow : |
| \printuntil /^\}/ |
| |
| We also declare a QString that contains jQuery, a QWebEngineView |
| that displays the web content, and a QLineEdit that acts as the |
| address bar. |
| |
| \section1 MainWindow Class Implementation |
| |
| We start by implementing the constructor. The first part of the constructor sets the value of |
| \c progress to 0. This value will be used later in the code to visualize the loading of a |
| web page: |
| |
| \quotefromfile webenginewidgets/contentmanipulation/mainwindow.cpp |
| \skipto MainWindow::MainWindow |
| \printuntil progress |
| |
| Next, the jQuery library is loaded by using a QFile and reading the file |
| content. The jQuery library is a JavaScript library that provides different |
| functions for manipulating HTML: |
| |
| \printuntil file.close() |
| |
| The second part of the constructor creates a QWebEngineView and connects |
| slots to the view's signals: |
| |
| \printuntil MainWindow::finishLoading |
| |
| 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 |
| QWebEngineView::pageAction(): |
| |
| \printuntil addWidget(locationEdit) |
| |
| The third part of the constructor implements two QMenu widgets and assigns |
| a set of actions to them: |
| |
| \printuntil removeEmbeddedElements |
| |
| The last line sets the QWebEngineView as the central widget in the QMainWindow: |
| |
| \printuntil } |
| |
| When the page is loaded, \c adjustLocation() is triggered by the \c loadFinished() signal in |
| QWebEngineView to update the address bar: |
| |
| \skipto adjustLocation() |
| \printuntil } |
| |
| In \c 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, \c adjustLocation() will be |
| run once more to update the address bar: |
| |
| \printuntil } |
| |
| The \c adjustTitle() method sets the window title and displays the loading progress: |
| |
| \printuntil } |
| \printuntil } |
| |
| This slot is triggered by the \c titleChanged() signal in QWebEngineView. |
| |
| When a web page has loaded, the \c finishLoading() method is triggered by the |
| \c loadFinished() signal in QWebEngineView. The method then updates the |
| progress in the title bar and calls \c runJavaScript() |
| to evaluate the jQuery library against the current web page: |
| |
| \printuntil } |
| |
| This means that the JavaScript can be viewed as a |
| part of the content loaded into the 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. |
| |
| The \c 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, \c highlightAllLinks(), is designed to |
| highlight all links in the current webpage. The JavaScript code looks |
| for web elements named \e {a}, which is the tag for a hyperlink. |
| For each such element, the background color is set to be yellow by |
| using CSS: |
| |
| \printuntil } |
| \printuntil } |
| |
| The \c rotateImages() function rotates the images on the current |
| web page. This JavaScript code relies on CSS transforms. It |
| looks up all \e {img} elements and rotates the images 180 degrees |
| and then back again: |
| |
| \printuntil runJavaScript(code); |
| \printuntil } |
| |
| The remaining methods remove different elements from the current web |
| page. The \c removeGifImages() removes all GIF images on the page by looking up |
| the \e {src} attribute of all the elements on the web page. Any element with |
| a \e {gif} file as its source is removed: |
| |
| \printuntil } |
| |
| The \c removeInlineFrames() method removes all \e {iframe} or inline elements: |
| |
| \printuntil } |
| |
| The \c removeObjectElements() method removes all \e {object} elements: |
| |
| \printuntil } |
| |
| The \c removeEmbeddedElements() method removes any elements using the \e {embed} tag, such as |
| plugins embedded on the page: |
| |
| \printuntil } |
| */ |
| |