本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!