Back to Qt.io
Contact Us Blog Download Qt

웹엔진 콘텐츠 조작 예제

웹 콘텐츠를 로드하고 조작하는 방법을 보여줍니다.

콘텐츠 조작은 Qt WebEngine 위젯과 함께 JQuery를 사용하여 특수 효과 및 콘텐츠 조작이 가능한 웹 브라우저를 만드는 방법을 보여줍니다.

애플리케이션에서 QWebEnginePage::runJavaScript()를 호출하여 jQuery 자바스크립트 코드를 실행합니다. 브라우저 자체를 구축하기 위해 중앙 위젯으로 QWebEngineView 을 사용하여 QMainWindow 을 구현합니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

메인윈도우 클래스 정의

MainWindow 클래스는 QMainWindow 을 상속합니다. 이 클래스는 애플리케이션과 웹 콘텐츠 모두에서 작업을 수행하기 위한 여러 슬롯을 구현합니다:

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

또한 jQuery를 포함하는 QString, 웹 콘텐츠를 표시하는 QWebEngineView, 주소 표시줄 역할을 하는 QLineEdit 을 선언합니다.

MainWindow 클래스 구현

생성자를 구현하는 것으로 시작합니다. 생성자의 첫 번째 부분에서는 progress 값을 0으로 설정합니다. 이 값은 나중에 코드에서 웹 페이지 로딩을 시각화하는 데 사용됩니다:

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

다음으로 QFile 을 사용하여 파일 콘텐츠를 읽어 jQuery 라이브러리를 로드합니다. jQuery 라이브러리는 HTML을 조작하기 위한 다양한 기능을 제공하는 자바스크립트 라이브러리입니다:

    QFile file;
    file.setFileName(":/jquery.min.js");
    file.open(QIODevice::ReadOnly);
    jQuery = file.readAll();
    jQuery.append("\nvar qt = { 'jQuery': jQuery.noConflict(true) };");
    file.close();

생성자의 두 번째 부분에서는 QWebEngineView 을 생성하고 슬롯을 뷰의 신호에 연결합니다:

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

또한 브라우저의 주소 표시줄로 QLineEdit 을 만듭니다. 그런 다음 브라우저의 사용 가능한 영역을 항상 채우도록 QSizePolicy 세로로 설정합니다. QWebEngineView::pageAction ()의 일련의 탐색 동작과 함께 QToolBar 에 QLineEdit 을 추가합니다:

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

생성자의 세 번째 부분은 QMenu 위젯 두 개를 구현하고 일련의 동작을 할당합니다:

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

마지막 줄은 QWebEngineView 을 QMainWindow 의 중앙 위젯으로 설정합니다:

    setCentralWidget(view);
}

페이지가 로드되면 QWebEngineView 의 loadFinished() 신호에 의해 adjustLocation() 가 트리거되어 주소 표시줄이 업데이트됩니다:

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

changeLocation() 에서 QUrl 객체를 생성한 다음 이를 사용하여 QWebEngineView 에 페이지를 로드합니다. 새 웹 페이지 로드가 완료되면 adjustLocation() 이 다시 한 번 실행되어 주소 표시줄이 업데이트됩니다:

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

adjustTitle() 메서드는 창 제목을 설정하고 로딩 진행률을 표시합니다:

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

이 슬롯은 QWebEngineView 의 titleChanged() 신호에 의해 트리거됩니다.

웹 페이지가 로드되면 finishLoading() 메서드는 QWebEngineView 의 loadFinished() 신호에 의해 트리거됩니다. 그런 다음 이 메서드는 제목 표시줄의 진행률을 업데이트하고 runJavaScript() 를 호출하여 현재 웹 페이지에 대해 jQuery 라이브러리를 평가합니다:

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

    rotateImages(rotateAction->isChecked());
}

즉, 자바스크립트는 QWebEngineView 에 로드된 콘텐츠의 일부로 볼 수 있으므로 새 페이지가 로드될 때마다 로드해야 합니다. jQuery 라이브러리가 로드되면 브라우저에서 다양한 jQuery 함수를 실행할 수 있습니다.

그런 다음 rotateImages() 함수를 명시적으로 호출하여 새로 로드된 페이지의 이미지가 토글 동작의 상태를 준수하는지 확인합니다.

첫 번째 jQuery 기반 함수인 highlightAllLinks() 는 현재 웹페이지의 모든 링크를 강조 표시하도록 설계되었습니다. 자바스크립트 코드는 하이퍼링크의 태그인 a라는 이름의 웹 요소를 찾습니다. 이러한 각 요소의 배경색은 CSS를 사용하여 노란색으로 설정됩니다:

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

rotateImages() 함수는 현재 웹 페이지의 이미지를 회전합니다. 이 자바스크립트 코드는 CSS 트랜스폼에 의존합니다. 모든 이미지 요소를 조회하고 이미지를 180도 회전한 다음 다시 회전합니다:

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

나머지 메서드는 현재 웹 페이지에서 다른 요소를 제거합니다. removeGifImages() 은 웹 페이지의 모든 요소의 src 속성을 조회하여 페이지의 모든 GIF 이미지를 제거합니다. gif 파일을 소스로 사용하는 모든 요소가 제거됩니다:

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

removeInlineFrames() 메서드는 모든 iframe 또는 인라인 요소를 제거합니다:

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

removeObjectElements() 메서드는 모든 객체 요소를 제거합니다:

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

removeEmbeddedElements() 메서드는 페이지에 임베드된 플러그인 등 임베드 태그를 사용하는 모든 요소를 제거합니다:

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

예제 프로젝트 @ code.qt.io

© 2025 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.