IE 自动化 VBA - 如何在没有任何文本的情况下访问跨度按钮

Question

我正在尝试使用 VBA 进行 IE 自动化，但在单击 span 元素时遇到了问题。

我想点击下面的元素。

<span class="x-btn-icon-el x-btn-icon-el-default-toolbar-small de-icon-export_item " id="KEY_TOOLTIP_Export-btnIconEl" role="presentation" data-ref="btnIconEl" unselectable="on">&nbsp;</span>

以下是 HTML 页面的代码。由于是内网页面，所以不能发相同的链接。

<a tabindex="-1" class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small x-btn-over" id="KEY_TOOLTIP_Export" style="margin: 0px; left: 32px; top: 2px; right: auto;" hidefocus="on" unselectable="on" componentId="KEY_TOOLTIP_Export" data-qtip="Export">
  <span class="x-btn-wrap x-btn-wrap-default-toolbar-small " id="KEY_TOOLTIP_Export-btnWrap" role="presentation" data-ref="btnWrap" unselectable="on">
    <span class="x-btn-button x-btn-button-default-toolbar-small  x-btn-no-text x-btn-icon x-btn-icon-left x-btn-button-center " id="KEY_TOOLTIP_Export-btnEl" role="presentation" data-ref="btnEl" unselectable="on">
      <span class="x-btn-icon-el x-btn-icon-el-default-toolbar-small de-icon-export_item " id="KEY_TOOLTIP_Export-btnIconEl" role="presentation" data-ref="btnIconEl" unselectable="on">&nbsp;</span>
        <span class="x-btn-inner x-btn-inner-default-toolbar-small" id="KEY_TOOLTIP_Export-btnInnerEl" data-ref="btnInnerEl" unselectable="on">&nbsp;</span>
</span>
</span>
</a>

以下是我尝试使用其他参考帖子的选项。 通过 ID 找到 Span 元素，然后找到它的父元素，这似乎是标签。

doc.getElementById("KEY_TOOLTIP_Export-btnIconEl").ParentNode.Click

也尝试了类名。

doc.getElementsByClassName("x-btn-icon-el x-btn-icon-el-default-toolbar-small de-icon-export_item").Item(0).ParentNode.Click

我可以使用调试选项在父框架中找到元素，所以应该排除 iFrame，不是吗？

我对 HTML、JavaScript 很陌生，所以不知道还有什么要检查的。

Answer 1

如果提供的代码不在 iframe 标签内，您可以使用以下代码查找元素。

Sub Test()
    Dim IE As Object
    Dim selectItem As Object

    Set IE = CreateObject("InternetExplorer.Application")
    With IE
        .Visible = True
        .Navigate "<website url>"

        While IE.ReadyState <> 4
            DoEvents
        Wend
        'Find element by ID property.
       'Set selectItem = IE.document.getElementById("KEY_TOOLTIP_Export-btnIconEl")
       'Debug.Print SelectItem.innerText
       'selectItem.Click

       'Find element by Class Name 
       Set selectItem = IE.document.getElementsByClassName("x-btn-icon-el x-btn-icon-el-default-toolbar-small de-icon-export_item")(0)

       Debug.Print selectItem.innerText
       selectItem.Click

    End With
    Set IE = Nothing
End Sub

注意：请记住将网站网址更改为您自己的。

为了更清楚地看到效果，我在span标签和一个标签中添加了onclick事件。 Html 资源如下：

 <a tabindex="-1" onclick="alert('a click');" class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small x-btn-over" id="KEY_TOOLTIP_Export" style="margin: 0px; left: 32px; top: 2px; right: auto;" hidefocus="on" unselectable="on" componentId="KEY_TOOLTIP_Export" data-qtip="Export">
    <span class="x-btn-wrap x-btn-wrap-default-toolbar-small " id="KEY_TOOLTIP_Export-btnWrap" role="presentation" data-ref="btnWrap" unselectable="on">
        <span class="x-btn-button x-btn-button-default-toolbar-small  x-btn-no-text x-btn-icon x-btn-icon-left x-btn-button-center " id="KEY_TOOLTIP_Export-btnEl" role="presentation" data-ref="btnEl" unselectable="on">
            <span class="x-btn-icon-el x-btn-icon-el-default-toolbar-small de-icon-export_item " id="KEY_TOOLTIP_Export-btnIconEl" role="presentation" data-ref="btnIconEl" onclick="alert('hi');" unselectable="on">&nbsp;</span>
            <span class="x-btn-inner x-btn-inner-default-toolbar-small" id="KEY_TOOLTIP_Export-btnInnerEl" data-ref="btnInnerEl" unselectable="on">&nbsp;</span>
        </span>
    </span>
</a>

截图：

如果iframe标签里面的元素，Html资源是这样的：

您可以使用以下代码先找到 iframe 元素，然后访问 span 元素。

   Set selectItem = IE.document.getElementsByTagName("iframe")(0).contentDocument.getElementById("KEY_TOOLTIP_Export-btnIconEl")
   'Debug.Print selectItem.innerText 'debug, check the inner text.
   selectItem.Click