Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

Exemple de manipulation de contenu par le WebEngine

Démontre comment charger et manipuler du contenu web.

Page web avec mots-clés surlignés

Content Manipulation montre comment utiliser JQuery avec Qt WebEngine Widgets pour créer un navigateur web avec des effets spéciaux et des manipulations de contenu.

Dans l'application, nous appelons QWebEnginePage::runJavaScript() pour exécuter le code JavaScript de JQuery. Nous implémentons un QMainWindow avec un QWebEngineView comme widget central pour construire le navigateur lui-même.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Définition de la classe MainWindow

La classe MainWindow hérite de QMainWindow. Elle implémente un certain nombre de slots pour effectuer des actions à la fois sur l'application et sur le contenu web :

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(const QUrl& url);

protected slots:

    void adjustLocation();
    void changeLocation();
    void adjustTitle();
    void setProgress(int p);
    void finishLoading(bool);

    void viewSource();

    void highlightAllLinks();
    void rotateImages(bool invert);
    void removeGifImages();
    void removeInlineFrames();
    void removeObjectElements();
    void removeEmbeddedElements();

private:
    QString jQuery;
    QWebEngineView *view;
    QLineEdit *locationEdit;
    QAction *rotateAction;
    int progress;
};

Nous déclarons également un QString qui contient jQuery, un QWebEngineView qui affiche le contenu web et un QLineEdit qui fait office de barre d'adresse.

Mise en œuvre de la classe MainWindow

Nous commençons par implémenter le constructeur. La première partie du constructeur fixe la valeur de progress à 0. Cette valeur sera utilisée plus tard dans le code pour visualiser le chargement d'une page web :

MainWindow::MainWindow(const QUrl& url)
{
    setAttribute(Qt::WA_DeleteOnClose, true);
    progress = 0;

Ensuite, la bibliothèque jQuery est chargée en utilisant un QFile et en lisant le contenu du fichier. La bibliothèque jQuery est une bibliothèque JavaScript qui fournit différentes fonctions pour manipuler le HTML :

    QFile file ; file.setFileName(":/jquery.min.js") ; if (!file.open(QIODevice::ReadOnly)) {        qFatal("Failed to read jQuery file %s: %s", qPrintable(file.fileName()),
               qPrintable(file.errorString()));
    } jQuery = file.readAll() ; jQuery.append("\nvar qt = { 'jQuery' : jQuery.noConflict(true) } ;") ; file.close() ;

La deuxième partie du constructeur crée un QWebEngineView et connecte les slots aux signaux de la vue :

    view = new QWebEngineView(this);
    view->load(url);
    connect(view, &QWebEngineView::loadFinished, this, &MainWindow::adjustLocation);
    connect(view, &QWebEngineView::titleChanged, this, &MainWindow::adjustTitle);
    connect(view, &QWebEngineView::loadProgress, this, &MainWindow::setProgress);
    connect(view, &QWebEngineView::loadFinished, this, &MainWindow::finishLoading);

De plus, nous créons un QLineEdit comme barre d'adresse du navigateur. Nous définissons ensuite la verticale QSizePolicy de manière à ce qu'elle remplisse en permanence la zone disponible dans le navigateur. Nous ajoutons le site QLineEdit à un site QToolBar, ainsi qu'un ensemble d'actions de navigation provenant de QWebEngineView::pageAction() :

    locationEdit = new QLineEdit(this);
    locationEdit->setSizePolicy(QSizePolicy::Expanding, locationEdit->sizePolicy().verticalPolicy());
    connect(locationEdit, &QLineEdit::returnPressed, this, &MainWindow::changeLocation);

    QToolBar *toolBar = addToolBar(tr("Navigation"));
    toolBar->addAction(view->pageAction(QWebEnginePage::Back));
    toolBar->addAction(view->pageAction(QWebEnginePage::Forward));
    toolBar->addAction(view->pageAction(QWebEnginePage::Reload));
    toolBar->addAction(view->pageAction(QWebEnginePage::Stop));
    toolBar->addWidget(locationEdit);

La troisième partie du constructeur implémente deux widgets QMenu et leur attribue un ensemble d'actions :

    QMenu *viewMenu = menuBar()->addMenu(tr("&View"));
    QAction *viewSourceAction = new QAction(tr("Page Source"), this);
    connect(viewSourceAction, &QAction::triggered, this, &MainWindow::viewSource);
    viewMenu->addAction(viewSourceAction);

    QMenu *effectMenu = menuBar()->addMenu(tr("&Effect"));
    effectMenu->addAction(tr("Highlight all links"), this, &MainWindow::highlightAllLinks);

    rotateAction = new QAction(this);
    rotateAction->setIcon(style()->standardIcon(QStyle::SP_FileDialogDetailedView));
    rotateAction->setCheckable(true);
    rotateAction->setText(tr("Turn images upside down"));
    connect(rotateAction, &QAction::toggled, this, &MainWindow::rotateImages);
    effectMenu->addAction(rotateAction);

    QMenu *toolsMenu = menuBar()->addMenu(tr("&Tools"));
    toolsMenu->addAction(tr("Remove GIF images"), this, &MainWindow::removeGifImages);
    toolsMenu->addAction(tr("Remove all inline frames"), this, &MainWindow::removeInlineFrames);
    toolsMenu->addAction(tr("Remove all object elements"), this, &MainWindow::removeObjectElements);
    toolsMenu->addAction(tr("Remove all embedded elements"), this, &MainWindow::removeEmbeddedElements);

La dernière ligne définit le QWebEngineView comme le widget central du QMainWindow:

    setCentralWidget(view);
}

Lorsque la page est chargée, adjustLocation() est déclenché par le signal loadFinished() dans QWebEngineView pour mettre à jour la barre d'adresse :

void MainWindow::adjustLocation()
{
    locationEdit->setText(view->url().toString());
}

Dans changeLocation(), nous créons un objet QUrl, puis nous l'utilisons pour charger la page dans QWebEngineView. Lorsque le chargement de la nouvelle page web est terminé, adjustLocation() est exécuté une nouvelle fois pour mettre à jour la barre d'adresse :

void MainWindow::changeLocation()
{
    QUrl url = QUrl::fromUserInput(locationEdit->text());
    view->load(url);
    view->setFocus();
}

La méthode adjustTitle() définit le titre de la fenêtre et affiche la progression du chargement :

void MainWindow::adjustTitle()
{
    if (progress <= 0 || progress >= 100)
        setWindowTitle(view->title());
    else
        setWindowTitle(QStringLiteral("%1 (%2%)").arg(view->title()).arg(progress));
}

void MainWindow::setProgress(int p)
{
    progress = p;
    adjustTitle();
}

Ce slot est déclenché par le signal titleChanged() dans QWebEngineView.

Lorsqu'une page web est chargée, la méthode finishLoading() est déclenchée par le signal loadFinished() dans QWebEngineView. La méthode met alors à jour la progression dans la barre de titre et appelle runJavaScript() pour évaluer la bibliothèque jQuery par rapport à la page web actuelle :

void MainWindow::finishLoading(bool)
{
    progress = 100;
    adjustTitle();
    view->page()->runJavaScript(jQuery);

    rotateImages(rotateAction->isChecked());
}

Cela signifie que le JavaScript peut être considéré comme une partie du contenu chargé dans le site QWebEngineView et doit donc être chargé à chaque fois qu'une nouvelle page est chargée. Une fois la bibliothèque jQuery chargée, nous pouvons commencer à exécuter les différentes fonctions jQuery dans le navigateur.

La fonction rotateImages() est alors appelée explicitement pour s'assurer que les images de la page nouvellement chargée respectent l'état de l'action de basculement.

La première fonction jQuery, highlightAllLinks(), est conçue pour mettre en évidence tous les liens de la page web actuelle. Le code JavaScript recherche les éléments web nommés a, qui est la balise d'un lien hypertexte. Pour chacun de ces éléments, la couleur d'arrière-plan est fixée au jaune à l'aide de CSS :

void MainWindow::highlightAllLinks()
{
    QString code = QStringLiteral("qt.jQuery('a').each( function () { qt.jQuery(this).css('background-color', 'yellow') } )");
    view->page()->runJavaScript(code);
}

La fonction rotateImages() fait pivoter les images de la page web actuelle. Ce code JavaScript s'appuie sur les transformations CSS. Il recherche tous les éléments img et fait pivoter les images de 180 degrés, puis de nouveau :

void MainWindow::rotateImages(bool invert)
{
    QString code;

    if (invert)
        code = QStringLiteral("qt.jQuery('img').each( function () { qt.jQuery(this).css('transition', 'transform 2s'); qt.jQuery(this).css('transform', 'rotate(180deg)') } )");
    else
        code = QStringLiteral("qt.jQuery('img').each( function () { qt.jQuery(this).css('transition', 'transform 2s'); qt.jQuery(this).css('transform', 'rotate(0deg)') } )");
    view->page()->runJavaScript(code);
}

Les autres méthodes suppriment différents éléments de la page web actuelle. La méthode removeGifImages() supprime toutes les images GIF de la page en recherchant l'attribut src de tous les éléments de la page web. Tout élément dont la source est un fichier GIF est supprimé :

void MainWindow::removeGifImages()
{
    QString code = QStringLiteral("qt.jQuery('[src*=gif]').remove()");
    view->page()->runJavaScript(code);
}

La méthode removeInlineFrames() supprime tous les éléments iframe ou inline :

void MainWindow::removeInlineFrames()
{
    QString code = QStringLiteral("qt.jQuery('iframe').remove()");
    view->page()->runJavaScript(code);
}

La méthode removeObjectElements() supprime tous les éléments objets:

void MainWindow::removeObjectElements()
{
    QString code = QStringLiteral("qt.jQuery('object').remove()");
    view->page()->runJavaScript(code);
}

La méthode removeEmbeddedElements() supprime tous les éléments utilisant la balise embed, tels que les plugins intégrés à la page :

void MainWindow::removeEmbeddedElements()
{
    QString code = QStringLiteral("qt.jQuery('embed').remove()");
    view->page()->runJavaScript(code);
}

Exemple de projet @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.