這個(gè)例子展示了如何使用Qt?WebEngine?Widgets創(chuàng)建一個(gè)web瀏覽器，并且如何使用JQuery去修改web瀏覽器中的內(nèi)容。

調(diào)用QWebEnginePage::runJavaScript()執(zhí)行jQuery的JavaScript代碼，通過繼承QMainWindow及使用QWebEngineView在QMainWindow的中心區(qū)域構(gòu)建一個(gè)瀏覽器。

?

MainWindow?Class?Definition

使用QString讀取jQuery，QWebEngineView展示web內(nèi)容，QLineEdit為鏈接地址輸入框。

class MainWindow : public QMainWindow{Q_OBJECTpublic: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的構(gòu)造函數(shù)中將progress的值設(shè)置為0，這個(gè)值將保存加載網(wǎng)頁的進(jìn)度。

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

使用QFile讀取jquery.min.js，jQuery庫提供了操作HTML的函數(shù)

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

這里補(bǔ)充給知識(shí)點(diǎn)，jQuery.noConflict()，許多JS框架類都旋轉(zhuǎn)使用$符號(hào)作為函數(shù)或變量名。當(dāng)jQuery.noConflict()當(dāng)參數(shù)為true時(shí)，執(zhí)行noConflict會(huì)將$和jQuery對(duì)象控制權(quán)轉(zhuǎn)移交給第一個(gè)產(chǎn)生他們的庫。

構(gòu)造函數(shù)第二個(gè)部分就是創(chuàng)建了QWebEngineView，并且關(guān)聯(lián)了相關(guān)槽函數(shù)。

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上添加一個(gè)QLineEdit作為地址欄，并且QToolBar上的其他導(dǎo)航按鈕關(guān)聯(lián)了QWebEngineView::pageAction()相關(guān)的操作。

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設(shè)置到了QMainWindow的中心：

setCentralWidget(view); }

當(dāng)網(wǎng)頁加載完成QWebEngineView的loadFinished()信號(hào)將會(huì)發(fā)出，觸發(fā)adjustLoation函數(shù)。設(shè)置地址欄：

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

在changeLocation()這個(gè)函數(shù)中，創(chuàng)建了QUrl對(duì)象，隨后將此頁面加載到QWebEngineView中。當(dāng)新頁面完成加載，adjustLocation將會(huì)被調(diào)用異常跟新地址欄：

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

adjustTile()設(shè)置窗口的標(biāo)題及展示目前加載的進(jìn)度，當(dāng)QWebEngineView中titleChanged()被觸發(fā)adjustTitle()槽函數(shù)就會(huì)被響應(yīng)。

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

當(dāng)web?page加載完成finishLoading()方法將會(huì)被觸發(fā)，這里是通過QWebEngineView的locadFinished()信號(hào)進(jìn)行觸發(fā)的。此方法更新title中的進(jìn)度，以及調(diào)用runJavaScript()。這個(gè)函數(shù)使用jQuery庫修改當(dāng)前的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()旋轉(zhuǎn)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";elsecode = "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標(biāo)簽

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

?

總結(jié)

以上是生活随笔為你收集整理的Qt文档阅读笔记-WebEngine Content Manipulatoin Example的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。