這個例子展示了如何使用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_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的構造函數中將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());elsesetWindowTitle(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";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標簽

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。