Qt QWebEngine - 使用 HTML <a> 锚点

Question

美好的一天 Whosebug 社区。有一个不平凡的问题。我们使用 ActiveX 来显示网页内容。我们决定改用 QWebEngine，但遇到了问题：

ActiveX 允许我们：

在 QAxObject
监听主播点击事件
提取并更改锚点属性（“id”、“href”）

代码示例：

CComPtr<IHTMLDocument2> m_htmlDocument;
CComPtr<IHTMLElementCollection> htmlAnchorsCollection;
QSignalMapper m_anchorClickMapper
QList<QPointer<QAxObject>> m_anchors;
...
//Connects the mapping of anchors and the AnchorClicked() signal. Id will be a param
connect(&m_anchorClickMapper, SIGNAL(mapped(QString)), SIGNAL(AnchorClicked(QString)));
...
    
m_htmlDocument->get_anchors(&htmlAnchorsCollection);
...
for (auto i = 0; i < anchor_count; ++i)
{
    CComPtr<IDispatch> disp;
    if (SUCCEEDED(htmlAnchorsCollection->item(CComVariant(i), CComVariant(0), &disp)))
    {
        auto anchor = new QAxObject(disp, this);
        auto id = anchor->property("id").toString();

        //For anchors with an id, listen to click() events and emit AnchorClicked()
        if (!id.isEmpty())
        {
            m_anchorClickMapper.connect(anchor, SIGNAL(onclick()), SLOT(map()));
            m_anchorClickMapper.setMapping(anchor, id);

            m_anchors << anchor;
        }
    }
}

使用锚点

for (auto & anchor : m_anchors)
{
    auto id = anchor->property("id").toString();
    if (id.startsWith("cta"))
    {
        auto href = anchor->property("href").toString();
        
        // adding additional params to href
        
        anchor->setProperty("href", href);
    }
}

完整 HTML:

    <!DOCTYPE html><html lang="en"><head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCx/KJQlLNfOz92ta31o/NMYxltwRo8QtmkMRdA78=" crossorigin="anonymous"></script>
        <!--[if lte IE 9]>
        <script type="text/javascript" src="/js/html5shiv-min.js"></script>
        <script type="text/javascript" src="/js/flexibility.js"></script>
        <![endif]-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../css/fonts.css" rel="stylesheet">
        <meta name="application-name" content="Pentagon">
        <meta name="msapplication-TileColor" content="#">
        <meta name="msapplication-TileImage" content="/images/mstile-144x144.png">
        <meta name="msapplication-square70x70logo" content="/images/mstile-70x70.png">
        <meta name="msapplication-square150x150logo" content="/images/mstile-150x150.png">
        <meta name="msapplication-wide310x150logo" content="/images/mstile-310x150.png">
        <meta name="msapplication-square310x310logo" content="/images/mstile-310x310.png">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta property="og:url" content="">
        <meta property="og:site_name" content="Pentagon">
        <meta property="og:description" content="">
        <meta property="og:image" content="">
        <meta property="og:title" content="What's New? | Pentagon">
        <title>Template Medium Image One Button | Pentagon</title>
        <meta name="robots" content="noindex">
        <link rel="stylesheet" href="../css/300000_template_medium-one-button-image.css">

    </head>
    <body>
        <div id="nav">
            <div id="logo">
                <img class="logoImage" src="../images/logoDark.svg" alt="Pentagon logo">
            </div>
            <a id="close" onclick="window.close()" href="#">
                <img class="closeImg" src="../images/closeDark.svg" alt="close">
            </a>
        </div>
        <div class="content">
            <div class="contentImage">
                <img class="topImage" src="http://127.0.0.1/acquistion-conversion.svg" alt="">
            </div>
            <div class="contentCopy">
                <div class="copyHeader">
                    <h1>message 1</h1>
                </div>
                <div class="copyBody">
                    <p class="copyBodyText">English body</p>
                </div>
            </div>
            <div class="copyCta">
                <a id="{{cta_id}}" class="cta cta-link" href="https://www.google.com/" onclick="window.close()" target="_blank">English CTA1</a>
                <a id="{{cta_id}}" class="cta cta-inapp" href="javascript:void(0)" onclick="window.close()">English CTA1</a>
            </div>
        </div>
    
    <!-- javascript:void(0) -->

</body></html>

是否可以用 QWebEngine 做类似的事情？关键要求：

捕捉锚点击事件
了解，点击了哪个锚点（根据名称我们可以启动内部C++逻辑）
有可能更新锚 href

Answer 1

答案是：

如果您不需要监听点击事件，请使用QWebEnginePage::runJavaScript()。
监听点击事件 - 使用QWebChanell

Qt QWebEngine - 使用 HTML <a> 锚点

Qt QWebEngine - work with HTML <a> anchors

c++

qt

qwebengineview

qwebengine