Qt QWebEngine - 使用 HTML <a> 锚点

Posted

技术标签:

【中文标题】Qt QWebEngine - 使用 HTML <a> 锚点【英文标题】：Qt QWebEngine - work with HTML <a> anchors 【发布时间】：2021-09-10 08:48:09 【问题描述】：

大家好，*** 社区。有一个不平凡的问题。 为了显示 Web 内容，我们使用 ActiveX。我们决定改用 QWebEngine，但遇到了问题：

ActiveX 允许我们：

    在 QAxObject 中保存 html 锚点 监听锚点点击事件 提取和更改锚属性（“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" >
            </div>
            <a id="close" onclick="window.close()" href="#">
                <img class="closeImg" src="../images/closeDark.svg" >
            </a>
        </div>
        <div class="content">
            <div class="contentImage">
                <img class="topImage" src="http://127.0.0.1/acquistion-conversion.svg" >
            </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

【问题讨论】：

我有一些疑问：1）你是创建html还是网页？ 2）如果是html，可以修改html吗？ 我正在下载一个 Html 页面并处理其内容。发现，我可以使用 QWebEnginePage::runJavaScript() 达到类似的效果，但我需要弄清楚它是如何工作的 那么html是可操作的，href的数量是固定的还是在执行时间上有所不同？ 固定在 html 页面上。我们接收网页内容，在 HTML 中进行操作，连接到 C++ 中的点击事件，显示。 好的，很好。你能放一个演示html吗？我希望您提供该 html 以清楚地理解结构并避免混淆。 【参考方案1】：

答案是：

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

【讨论】：

以上是关于Qt QWebEngine - 使用 HTML <a> 锚点的主要内容，如果未能解决你的问题，请参考以下文章

QT，折腾的几天-----关于 QWebEngine的使用

Qt添加QWebEngine模块后打包在无Qt的环境上运行出错的问题

使用 Qt5 的 QWebEngine

在最新Qt5.4，使用QWebengine，如何js调用Qt

在最新Qt5.4，使用QWebengine，如何js调用Qt

在最新Qt5.4，使用QWebengine，如何js调用Qt