Qt嵌⼊浏览器QWebEngineView实现浏览器基本功能
本篇简介
本篇的⼩⽬标:
借助Qt⾃家的QWebEngineView实现浏览器的基本功能:输⼊地址访问页⾯和刷新页⾯
定制QWebEngineView的ContextMenu,实现Inspector调试界⾯的调⽤
QWebEngineView基础
⾸先在所创建项⽬的.pro配置中添加webenginewidgets模块:
QT += webenginewidgets
然后在主窗⼝初始化时创建QWebEngineView对象:
1 m_webView = new QWebEngineView(this);
2 QStackedLayout* layout = new QStackedLayout(ui->frame);
3 ui->frame->setLayout(layout);
4 layout->addWidget(m_webView);
界⾯上有⼀个输⼊地址的控件(adressEdit)和两个按钮——访问按钮(btnGo)和刷新按钮(btnRefresh),使⽤QWebEngineView的load和reload⽅法,可以很⽅便地实现这两个按钮的功能:
1 connect(ui->btnGo, &QPushButton::clicked, this, [this]() {
2 QString url = ui->addressEdit->text();
3 if (!url.isEmpty())
4 {
5 m_webView->load(url);
6 }
7 });
8 connect(ui->btnRefresh, &QPushButton::clicked, this, [this]() {
9 m_webView->reload();
10 });
这样⼀个简单的浏览器就实现好了,访问⼀下百度看看效果:
实现Inspector调试界⾯
在⾕歌浏览器中按⼀下F12可以调出功能强⼤的调试界⾯,QWebEngine中也包含了这个功能。这⾥我们稍微简化⼀下,改成在页⾯上点击右键并选择"Inspect",即可呼出调试界⾯。
⾸先需要设置⼀个环境变量QTWEBENGINE_REMOTE_DEBUGGING来指定调试页⾯所使⽤的端⼝号。例如,将7777端⼝设为调试端⼝,可在主窗⼝初始化⽅法的最开头添加下⾯的代码:
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "7777");
如果设置成功,在终端上会打印如下提⽰:
Remote debugging server started successfully. Try pointing a Chromium-based browser to 127.0.0.1:7777
然后实现⼀个QDialog作为Inspector的界⾯,⾥⾯内嵌另⼀个QWebEngineView,这个view专门⽤来加载调试页⾯:
1 Inspector::Inspector(QWidget *parent) :
2 QDialog(parent),
3 ui(new Ui::Inspector)
4 {
5 ui->setupUi(this);
6
7 connect(ui->btnClose, &QPushButton::clicked, this, [this](){
8 hide();
9 });
10
11 m_webView = new QWebEngineView(this);
12 QStackedLayout* layout = new QStackedLayout(ui->frame);
13 ui->frame->setLayout(layout);
14 layout->addWidget(m_webView);
15 m_webView->load(QUrl("localhost:7777"));
16 QDialog::show();
17 }
因为这⾥的关闭按钮实际上只是把界⾯隐藏起来了,所以重载⼀下show⽅法,保证每次打开时调试的页⾯是最新的:
1 void Inspector::show()
2 {
3 m_webView->reload();
4 QDialog::show();
5 }
最后在主窗⼝初始化时修改⼀下QWebEngineViewContextMenu设置。因为QWebEngineView继承了QWidget,所以可以使⽤与处理QWidget类似的⽅式定制ContextMenu:
1 m_webView->setContextMenuPolicy(Qt::CustomContextMenu);
2 m_inspector = NULL;
3 connect(m_webView, &QWidget::customContextMenuRequested, this, [this]() {
4 QMenu* menu = new QMenu(this);
5 QAction* action = menu->addAction("Inspect");
6 connect(action, &QAction::triggered, this, [this](){
7 if(m_inspector == NULL)
8 {
浏览web是什么意思9 m_inspector = new Inspector(this);
10 }
11 else
12 {
13 m_inspector->show();
14 }
15 });
16 menu->exec(QCursor::pos());
17 });
这样⼀个简单的Inspector就实现完成了,试试效果:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论