Qt文档阅读笔记-WebEngine Content Manipulatoin Example

这个例子展示了如何使用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相关推荐

Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...
Qt文档阅读笔记-QWebEngineView及QML WebEngineView
这里主要是最近有给Java Web项目及Qt项目需要混合,自己搞的QtWebEngine没有问题,而用了项目里面的,就有问题,在此阅读下官方资料,看看能不能解决这样莫名其妙的问题,在此记录下本次的阅读 ...
Qt文档阅读笔记-moc工具使用及其理论（moc工具如何添加到makefile中）
moc(Meta-Object Compiler):用于处理Qt中关于C++的扩展. moc工具读取C++头文件,看看这个头文件里面的类是不是包含Q_OBJECT宏,它会将这个头文件,转换为带有met ...
Qt文档阅读笔记-Fortune Client Example实例解析
目录官方解析实例代码博主增加解析官方解析 Fortune Client Example 以使用QTcpSocket为例子,服务端可以配合Fortune Server或Threaded Fort ...
Qt文档阅读笔记-对Style Plugin Example实例的解析
目录前言 Style Plugin Example SimpleStylePlugin Class 定义 SimpleStylePlugin Class 实现 main()函数 The Simple ...
Qt文档阅读笔记-QSet官方解析及实例
目录官方解析博主栗子官方解析 QSet类是一个模板类,他是一个哈希表集合. QSet<T>是Qt的一个普通容器类.QSet存储的值是不指明顺序的,QSet对这些值提供了快速检索的功能 ...
Qt文档阅读笔记-QML Canvas的官方解析及实例
目录官方解析博主例子官方解析 Canvas可以用于画直线或曲线,简单或复杂的形状,图形,图片,并且他能加文字,颜色,阴影,和颜色梯度,和其他的装饰,可以进行低像素操作.Canvas可以保存成图像 ...

Qt文档阅读笔记-WebEngine Content Manipulatoin Example

Qt文档阅读笔记-WebEngine Content Manipulatoin Example相关推荐

最新文章

热门文章