c++qtqwebengineviewqwebengine

Qt QWebEngine - work with HTML <a> anchors

Good day stackoverflow community. Have a non trivial question. For displaying web content we are using ActiveX. We decided to switch to QWebEngine, but were faced with the problems:

ActiveX allows us:

  1. save HTML anchors in QAxObject
  2. listen to anchors click events
  3. extract and change anchors properties ("id", "href")

Example of code:

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;
        }
    }
}

working with anchors

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);
    }
}

Full 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>

Is it possible to do something similar with QWebEngine? Key requirements:

  1. Catch anchors click events
  2. Understand, which anchor was clicked (depending on the name we can launch internal C++ logic)
  3. Have a possibility to update anchors href
Solution

  • The answer is:

    1. Use QWebEnginePage::runJavaScript() if you don't need to listen to the click events.
    2. For listening to click events - use QWebChanell