本文共 5913 字，大约阅读时间需要 19 分钟。

这个例子展示了如何使用Qt WebEngine Widgets创建一个web浏览器，并且如何使用JQuery去修改web浏览器中的内容。

调用QWebEnginePage::runJavaScript()执行jQuery的JavaScript代码，通过继承QMainWindow及使用QWebEngineView在QMainWindow的中心区域构建一个浏览器。

MainWindow Class Definition

使用QString读取jQuery，QWebEngineView展示web内容，QLineEdit为链接地址输入框。

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

MainWindow Class Implementation

在MainWindow的构造函数中将progress的值设置为0，这个值将保存加载网页的进度。

MainWindow::MainWindow(const QUrl& url)  {      progress = 0;

使用QFile读取jquery.min.js，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();

这里补充给知识点，jQuery.noConflict()，许多JS框架类都旋转使用$符号作为函数或变量名。当jQuery.noConflict()当参数为true时，执行noConflict会将$和jQuery对象控制权转移交给第一个产生他们的库。

构造函数第二个部分就是创建了QWebEngineView，并且关联了相关槽函数。

view = new QWebEngineView(this);view->load(url);connect(view, SIGNAL(loadFinished(bool)), SLOT(adjustLocation()));connect(view, SIGNAL(titleChanged(QString)), SLOT(adjustTitle()));connect(view, SIGNAL(loadProgress(int)), SLOT(setProgress(int)));connect(view, SIGNAL(loadFinished(bool)), SLOT(finishLoading(bool)));

再QToolBar上添加一个QLineEdit作为地址栏，并且QToolBar上的其他导航按钮关联了QWebEngineView::pageAction()相关的操作。

locationEdit = new QLineEdit(this);locationEdit->setSizePolicy(QSizePolicy::Expanding, locationEdit->sizePolicy().verticalPolicy());connect(locationEdit, SIGNAL(returnPressed()), SLOT(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 *viewMenu = menuBar()->addMenu(tr("&View"));QAction* viewSourceAction = new QAction("Page Source", this);connect(viewSourceAction, SIGNAL(triggered()), SLOT(viewSource()));viewMenu->addAction(viewSourceAction);QMenu *effectMenu = menuBar()->addMenu(tr("&Effect"));effectMenu->addAction("Highlight all links", this, SLOT(highlightAllLinks()));rotateAction = new QAction(this);rotateAction->setIcon(style()->standardIcon(QStyle::SP_FileDialogDetailedView));rotateAction->setCheckable(true);rotateAction->setText(tr("Turn images upside down"));connect(rotateAction, SIGNAL(toggled(bool)), this, SLOT(rotateImages(bool)));effectMenu->addAction(rotateAction);QMenu *toolsMenu = menuBar()->addMenu(tr("&Tools"));toolsMenu->addAction(tr("Remove GIF images"), this, SLOT(removeGifImages()));toolsMenu->addAction(tr("Remove all inline frames"), this, SLOT(removeInlineFrames()));toolsMenu->addAction(tr("Remove all object elements"), this, SLOT(removeObjectElements()));toolsMenu->addAction(tr("Remove all embedded elements"), this, SLOT(removeEmbeddedElements()));

最后是将QWebEngineView设置到了QMainWindow的中心：

setCentralWidget(view);}

当网页加载完成QWebEngineView的loadFinished()信号将会发出，触发adjustLoation函数。设置地址栏：

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

adjustTile()设置窗口的标题及展示目前加载的进度，当QWebEngineView中titleChanged()被触发adjustTitle()槽函数就会被响应。

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

当web page加载完成finishLoading()方法将会被触发，这里是通过QWebEngineView的locadFinished()信号进行触发的。此方法更新title中的进度，以及调用runJavaScript()。这个函数使用jQuery库修改当前的web page

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

highlightAllLinks()，JS代码去找web超链接(a)上的元素，然后使用css将背景改为yellow。

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

rotateInmages()旋转images为180度，这里是用JS修改css。

void MainWindow::rotateImages(bool invert){    QString code;    if (invert)        code = "qt.jQuery('img').each( function () { qt.jQuery(this).css('-webkit-transition', '-webkit-transform 2s'); qt.jQuery(this).css('-webkit-transform', 'rotate(180deg)') } ); undefined";    else        code = "qt.jQuery('img').each( function () { qt.jQuery(this).css('-webkit-transition', '-webkit-transform 2s'); qt.jQuery(this).css('-webkit-transform', 'rotate(0deg)') } ); undefined";    view->page()->runJavaScript(code);}

下面是移除所有gif图片：

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

移除所有iframes标签

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

移除所有object元素：

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

移除所有embed元素：

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

转载地址：https://it1995.blog.csdn.net/article/details/105950825 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！