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 http://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("http://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         {
 9             m_inspector = new Inspector(this);
10         }
11         else
12         {
13             m_inspector->show();
14         }
15     });
16     menu->exec(QCursor::pos());
17 });

這樣一個簡單的Inspector就實現完成了，試試效果：