jquery - 单击 HTML 元素并生成弹出窗口

Question

我正在运行一个 Excel VBA 宏，该宏从 this webpage 收集信息。要显示定价信息，您需要单击页面中间右侧标有“5 盎司 - 4 件”的框。单击该框后，会出现一个弹出窗口，其中包含所需的信息。

我的问题是我一直无法弄清楚如何以编程方式单击此框。

从检查页面元素来看，似乎以下元素

<a class="os_opt_dd" href="#"><span class="os_opt_dd_s">5 oz. - 4 Count</span><input tabindex="-1" value="1144"></a>

包含生成弹出窗口的可点击元素，但是当我尝试以编程方式单击它时(如下面所示的代码所示)，什么也没有发生。

 my_url="http://www.omahasteaks.com/product/Bacon-Wrapped-Filet-Mignons-4-5-oz-01144?ITMSUF=WZB"

 Set ie = CreateObject("InternetExplorer.Application")     
   With ie    
     .Visible = True
     .navigate my_url
     .Top = 50
     .Left = 530
     .Height = 400
     .Width = 400
  End With
  
  ie.document.getelementsbytagname("a")(0).Click

当我尝试使用以下代码循环遍历页面上的所有元素时，我能够单击该框并生成弹出窗口。但如果我刷新网页，生成弹出窗口的 x 值就会不同。

For x = 0 To ie.document.all.Length - 1
    ie.document.all.Item(x).Click    ' x=1101, 1103 and 1190, 1223 often seemed to generate the pop-up
Next

有人可以告诉我如何以可重复的方式单击该框吗？

Answer 1

如果您遵循click事件堆栈跟踪您会发现此网页中发生了很多事情。尤其是似乎有三个独立的跟踪器脚本，它们似乎需要 Hook DOM 事件才能运行。我冒昧提出一个导致您出现明显问题的建议。

我说明显是因为可以通过 javascript 强制您想要触发的事件页面上的自动化。具体jquery对于我提出的解决方案。 jquery正在页面上运行，并且是此 Web 应用程序的事件处理不可或缺的一部分。

jquery有一个trigger方法-文档here - 上面写着:

As of jQuery 1.3, .trigger()ed events bubble up the DOM tree

我不相信vba基于这样的代码:ie.document.foo.Click - 在您的情况下，导致事件传播。因此，让我们基于运行必要的 jquery 来制定解决方案。 trigger以编程方式创建的 IE session 中的脚本。

特别的<a>您想要自动化的标签( anchor )具有 os_opt_dd 类。页面上有 13 个这样的 anchor (具有相同的类别)，您想要最后一个。可能有更好的方法来隔离 anchor (可能基于父 <div> )，但我将其作为练习留给您。

所以 jquery提供自动化的代码如下:

// get the HTML element we want to automate
var anchor = $('a.os_opt_dd')[12];
// trigger the mousedown event on this anchor element
$(anchor).trigger('mousedown');

单行文字如下:

$($('a.os_opt_dd')[12]).trigger('mousedown')

请注意，我们需要触发 mousedown事件而不是 click事件。这是因为(IMO)事件传播是由用户操作的第一个事件触发的，例如在文档的特定元素上按下鼠标按钮。如果你在 Stack Overflow 上进行 Google/搜索，那么你会发现很多关于点击/事件/jQuery 等主题的线程/讨论，这些都是有用的阅读 Material 。如果你问jquery专家如果有更好的方法来编码，我完全希望他们能想出更好的东西;)

无论如何，最后，我们的excel-vba代码将是:

Option Explicit

Sub TestWithEarlyBinding()

    Dim strUrl As String
    Dim strJquery As String
    Dim objBrowser As InternetExplorer
    Dim objDocument As HTMLDocument

    On Error GoTo CleanUp

    'url and jquery required for automation
    strUrl = "http://www.omahasteaks.com/product/Bacon-Wrapped-Filet-Mignons-4-5-oz-01144?ITMSUF=WZB"
    strJquery = "$($('a.os_opt_dd')[12]).trigger('mousedown')"

    'create IE
    Set objBrowser = New InternetExplorer

    'browse to page and wait for load
    objBrowser.Visible = True
    objBrowser.navigate strUrl
    While objBrowser.readyState <> READYSTATE_COMPLETE 'READYSTATE_COMPLETE =4
        DoEvents
    Wend

    'force jquery event on document
    Set objDocument = objBrowser.document
    objDocument.parentWindow.execScript strJquery, "JavaScript"

CleanUp:
    If Err.Number <> 0 Then
        Debug.Print Err.Number & ": " & Err.Description
    End If
    'objBrowser.Quit
    Set objDocument = Nothing
    Set objBrowser = Nothing

End Sub

注意我使用了早期绑定(bind)，因为使用后期绑定(bind)来测试这个问题的解决方案是很痛苦的。所需的引用资料是:

• Microsoft HTML 对象库
• 微软互联网控制

更新

替代方案jquery trigger不依赖于列表中第 13 个 anchor 标记，将使用以下代码:

$('#right_sku_form').find('div#selector-PAR-00000009957').find('a.os_opt_dd').trigger('mousedown')

find()函数向下搜索 DOM 树。

• anchor 位于 <form>与 id的right_sku_form
• 表格中有一个 <div>与 id的selector-PAR-00000009957
• 其中<div>我们的 anchor 是 class的a.os_opt_dd

你可以把 jquery命令作为 strJquery 的值在 vba代码并使用它来代替。