1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
/****************************************************************************
**
** 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 }
*/
|
