QWebEngineView

Question

使用Qt5.12+MSVC2017+QWebEngineView操作网页的时候，遇到网页中有按钮（点击按钮会弹出一个新网站），需求是，在qt里如何捕捉这个按钮的点击（如何在qt程序中判断有没有点击这个按钮）；

class CWidget_Web_EngineView : public QWebEngineView
{
    Q_OBJECT
public:
    CWidget_Web_EngineView(QWidget *parent = nullptr);
protected:
    QWebEngineView* createWindow(QWebEnginePage::WebWindowType type) override;
private slots:
    void slot_LinkHovered(const QString& url);
private:
    QUrl    m_Current_Url;//记录网址
};
CWidget_Web_EngineView::CWidget_Web_EngineView(QWidget *parent){
    connect(this->page(),SIGNAL(linkHovered()),    this,SLOT(slot_LinkHovered()));
}
QWebEngineView *CWidget_Web_EngineView::createWindow(QWebEnginePage::WebWindowType){
    if(!m_Current_Url.isEmpty()){this->load(m_Current_Url);}
    return nullptr;
}
void CWidget_Web_EngineView::slot_LinkHovered(const QString& url){
    printf("Url:%s\n",url.toStdString().c_str());
    m_Current_Url.setUrl(url);
}

Answer 1

🕒下午好，题主！目前：🟢[在线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：水晶帘动微风起，满架蔷薇一院香。

Qt5.12+MSVC2017+QWebEngineView 捕获网页按钮点击并阻止新窗口打开

你的代码已经实现了捕获链接悬停事件并获取 URL 的功能，但要实现捕获按钮点击并阻止新窗口打开，还需要进行以下修改：

1. 注入 JavaScript 代码:

我们需要在网页加载完成后注入一段 JavaScript 代码，用于监听所有按钮的点击事件，并将点击事件通知给 Qt 程序。

2. 处理 JavaScript 消息:

Qt 程序需要能够接收并处理来自 JavaScript 代码的消息，从而判断是否有按钮被点击。

完整代码：

#include <QtWidgets>
#include <QWebEngineView>
#include <QWebChannel>

class CWidget_Web_EngineView : public QWebEngineView {
    Q_OBJECT

public:
    CWidget_Web_EngineView(QWidget *parent = nullptr);

protected:
    QWebEngineView *createWindow(QWebEnginePage::WebWindowType type) override;

private slots:
    void onButtonClicked(const QString &url);

private:
    QUrl m_Current_Url;
    QWebChannel *m_webChannel;
};

CWidget_Web_EngineView::CWidget_Web_EngineView(QWidget *parent)
    : QWebEngineView(parent) {
    // 创建 WebChannel 对象
    m_webChannel = new QWebChannel(this);
    page()->setWebChannel(m_webChannel);

    // 连接 JavaScript 消息处理函数
    connect(m_webChannel, &QWebChannel::messageReceived,
            this, &CWidget_Web_EngineView::onButtonClicked);

    // 加载网页完成后注入 JavaScript 代码
    connect(page(), &QWebEnginePage::loadFinished, [this](bool ok) {
        if (ok) {
            // 注入 JavaScript 代码
            QString jsCode = "var buttons = document.querySelectorAll('button');"
                             "for (var i = 0; i < buttons.length; i++) {"
                             "  buttons[i].addEventListener('click', function(event) {"
                             "    new QWebChannel(qt.webChannelTransport, function (channel) {"
                             "      channel.objects.bridge.onButtonClicked(event.target.href);"
                             "    });"
                             "  });"
                             "}";
            page()->runJavaScript(jsCode);
        }
    });
}

QWebEngineView *CWidget_Web_EngineView::createWindow(QWebEnginePage::WebWindowType) {
    if (!m_Current_Url.isEmpty()) {
        load(m_Current_Url);
    }
    return nullptr;
}

// 处理 JavaScript 消息
void CWidget_Web_EngineView::onButtonClicked(const QString &url) {
    qDebug() << "Button clicked, URL:" << url;

    // 在这里可以对按钮点击事件进行处理，例如：
    // - 获取按钮的相关信息
    // - 判断是否需要打开新网页
    // - 执行其他操作

    // 阻止默认行为，即阻止打开新网页
    m_Current_Url = url;
}

代码说明:

1. 注入 JavaScript 代码: 在 loadFinished 信号的槽函数中，我们使用 page()->runJavaScript() 方法向网页注入一段 JavaScript 代码。这段代码会获取页面上所有的按钮元素，并为每个按钮添加一个点击事件监听器。当按钮被点击时，监听器会创建一个 QWebChannel 对象，并通过该对象向 Qt 程序发送消息。

2. 处理 JavaScript 消息: 在 onButtonClicked() 函数中，我们接收来自 JavaScript 代码的消息，并提取出按钮的链接地址 (href 属性)。你可以根据需要修改此函数，以获取更多按钮信息或执行其他操作。

3. 阻止新窗口打开: 在 createWindow() 函数中，我们返回 nullptr 来阻止浏览器创建新的窗口。

通过以上修改，现在你的 Qt 程序就可以捕获网页中按钮的点击事件，并阻止新窗口打开了。 你可以根据实际需求对代码进行调整，例如：

• 获取更多按钮信息，例如按钮的文本内容、ID 等。
• 根据按钮的链接地址判断是否需要打开新网页。
• 在按钮点击事件处理函数中执行其他操作。

注意:

• 以上代码需要在 .pro 文件中添加 QT += webenginewidgets webchannel。
• 为了简化代码，示例中没有进行错误处理。在实际项目中，你应该添加必要的错误处理机制。
• 这段代码假设网页上的按钮都有 href 属性。如果按钮没有 href 属性，你需要修改 JavaScript 代码以获取其他属性或使用其他方法来识别按钮。