Back to Qt.io
Contact Us Blog Download Qt
En esta página

Ejemplo de manipulación de contenidos en WebEngine

Demuestra cómo cargar y manipular contenido web.

Página web con palabras clave destacadas

Content Manipulation muestra cómo utilizar JQuery con Qt WebEngine Widgets para crear un navegador web con efectos especiales y manipulación de contenidos.

En la aplicación, llamamos a QWebEnginePage::runJavaScript() para ejecutar código JavaScript jQuery. Implementamos un QMainWindow con un QWebEngineView como widget central para construir el propio navegador.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creator, abra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Definición de la Clase MainWindow

La clase MainWindow hereda de QMainWindow. Implementa una serie de ranuras para realizar acciones tanto en la aplicación como en el contenido 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;
};

También declaramos un QString que contiene jQuery, un QWebEngineView que muestra el contenido web, y un QLineEdit que actúa como barra de direcciones.

Implementación de la clase MainWindow

Comenzamos implementando el constructor. La primera parte del constructor establece el valor de progress a 0. Este valor será utilizado más adelante en el código para visualizar la carga de una página web:

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

Luego, la librería jQuery es cargada usando un QFile y leyendo el contenido del archivo. La librería jQuery es una librería JavaScript que proporciona diferentes funciones para manipular 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 segunda parte del constructor crea un QWebEngineView y conecta las ranuras a las señales de la vista:

    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);

Además, creamos un QLineEdit como barra de direcciones del navegador. Luego configuramos el QSizePolicy vertical para que llene el área disponible en el navegador en todo momento. Añadimos el QLineEdit a un QToolBar junto con un conjunto de acciones de navegación 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 tercera parte del constructor implementa dos widgets QMenu y les asigna un conjunto de acciones:

    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 última línea establece el QWebEngineView como widget central en el QMainWindow:

    setCentralWidget(view);
}

Cuando se carga la página, adjustLocation() es activado por la señal loadFinished() en QWebEngineView para actualizar la barra de direcciones:

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

En changeLocation(), creamos un objeto QUrl, y luego lo utilizamos para cargar la página en QWebEngineView. Cuando la nueva página web haya terminado de cargarse, adjustLocation() se ejecutará una vez más para actualizar la barra de direcciones:

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

El método adjustTitle() establece el título de la ventana y muestra el progreso de la carga:

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();
}

Esta ranura es activada por la señal titleChanged() en QWebEngineView.

Cuando una página web se ha cargado, el método finishLoading() es activado por la señal loadFinished() en QWebEngineView. A continuación, el método actualiza el progreso en la barra de título y llama a runJavaScript() para evaluar la biblioteca jQuery en la página web actual:

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

    rotateImages(rotateAction->isChecked());
}

Esto significa que el JavaScript puede verse como una parte del contenido cargado en QWebEngineView, y por lo tanto necesita cargarse cada vez que se carga una nueva página. Una vez cargada la biblioteca jQuery, podemos empezar a ejecutar las distintas funciones jQuery en el navegador.

A continuación, se llama explícitamente a la función rotateImages() para asegurarse de que las imágenes de la página recién cargada respetan el estado de la acción toggle.

La primera función basada en jQuery, highlightAllLinks(), está diseñada para resaltar todos los enlaces de la página web actual. El código JavaScript busca los elementos web llamados a, que es la etiqueta de un hipervínculo. Para cada uno de estos elementos, el color de fondo se establece en amarillo mediante CSS:

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

La función rotateImages() gira las imágenes de la página web actual. Este código JavaScript se basa en las transformaciones CSS. Busca todos los elementos img y gira las imágenes 180 grados y viceversa:

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);
}

Los métodos restantes eliminan diferentes elementos de la página web actual. removeGifImages() elimina todas las imágenes GIF de la página buscando el atributo src de todos los elementos de la página web. Se elimina cualquier elemento que tenga un archivo gif como fuente:

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

El método removeInlineFrames() elimina todos los elementos iframe o inline:

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

El método removeObjectElements() elimina todos los elementos objeto:

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

El método removeEmbeddedElements() elimina cualquier elemento que utilice la etiqueta embed, como los plugins incrustados en la página:

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

Proyecto de ejemplo @ 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.