时间戳

首页 > 解决方案 > 如何使用参数调用 AngularJS 脚本以加载 Html 元素

javascript - 如何使用参数调用 AngularJS 脚本以加载 Html 元素

问题描述

我在一个网络抓取项目中，但 url 包含我不熟悉的 AngularJS。我无法访问可能由 AngularJS 基于“障碍选项”当前处于活动状态的 Html 元素。

网络，出于测试目的，我在这个 URL上练习

当人们看到这个问题时，URL 可能不可用，所以这里有一个可以找到可用种族的链接。 https://www.tvg.com/races

这是 HTML 的相关部分

<div class="group">
  <h2 class="runners-table-title">Race Card</h2>
  <div class="handicapOption" qa-label="handicapOption">
    <h3>Handicapping
      <!----><span ng-if="$root.activeFeatures.tooltipHandicapping" tooltip-placement="bottom" uib-tooltip-template="selectedHandicaping.helpTemplateUrl"><i class="tvg-icon-help"></i></span>
      <!---->
    </h3>
    <ul>
      <!---->
      <li ng-repeat="option in handicapingOptions"><a class="active" href="" ng-class="{'active': selectedHandicaping === option}" qa-label="handicapOptionValue" ng-click="selectHandicapping(option)">Summary</a></li>
      <!---->
      <li ng-repeat="option in handicapingOptions"><a href="" ng-class="{'active': selectedHandicaping === option}" qa-label="handicapOptionValue" ng-click="selectHandicapping(option)">Snapshot</a></li>
      <!---->
      <li ng-repeat="option in handicapingOptions"><a href="" ng-class="{'active': selectedHandicaping === option}" qa-label="handicapOptionValue" ng-click="selectHandicapping(option)">Speed &amp; Class</a></li>
      <!---->
      <li ng-repeat="option in handicapingOptions"><a href="" ng-class="{'active': selectedHandicaping === option}" qa-label="handicapOptionValue" ng-click="selectHandicapping(option)">Pace</a></li>
      <!---->
      <li ng-repeat="option in handicapingOptions"><a href="" ng-class="{'active': selectedHandicaping === option}" qa-label="handicapOptionValue" ng-click="selectHandicapping(option)">Jockey/Trainer Stats</a></li>
      <!---->
    </ul>
  </div>
</div>

基本上，当我单击 Element-B (Snapshot) -> 第二个<li>元素时，Element-A (Summary) 和 Element-B 都会切换其名称，如下所示

  <li ng-repeat="option in handicapingOptions"><a href="" ng-class="{'active': selectedHandicaping === option}" qa-label="handicapOptionValue" ng-click="selectHandicapping(option)">Summary</a></li>

<li ng-repeat="option in handicapingOptions"><a class="active" href="" ng-class="{'active': selectedHandicaping === option}" qa-label="handicapOptionValue" ng-click="selectHandicapping(option)">Snapshot</a></li>

然后它显示一个不同的表。

这就是我试图通过 VBA 模拟的。不幸的是，表格元素没有得到更新。我在假设这个函数被称为“selectHandicapping（option）”有人能教我怎么做吗？PS我不知道如何为参数选项提供值或参数选项是什么类型的数据。

所以我整个星期都在挖掘和搜索这个问题，最后决定吐出这个问题。我尝试调用“.Click”并触发“onChange”事件但无济于事。我无法通过代码加载快照内容表

这是我的 VBA 代码

    Public Sub LoadHorses()
    Dim v As Variant
    Dim ie As InternetExplorer
    Set ie = Core.API_.Explorer
    ie.Navigate oRaceTrack.RaceUrl & "?race=" & RaceNumber
    Do While ie.Busy Or ie.ReadyState <> READYSTATE_COMPLETE
      Application.StatusBar = "Requesting " & Title & " Horse Data"
      DoEvents
    Loop

    Dim oHTMLDoc As HTMLDocument
    Set oHTMLDoc = ie.Document
    Do While Not oHTMLDoc.ReadyState = "complete"
      Application.StatusBar = "Loading " & Title & " data, please wait"
      DoEvents
    Loop

    Dim handicapOption As Object
    Dim currentWindow As HTMLWindowProxy
    Set currentWindow = oHTMLDoc.parentWindow
    Dim oTbl As HTMLTable
    For Each handicapOption In oHTMLDoc.getElementsByTagName("li")
      If handicapOption.innerText = "Summary" Then
      'I was able to extract data from Summary tab because this is the default tab that is active
        handicapOption.Click
        handicapOption.Focus
        Set oTbl = oHTMLDoc.getElementsByClassName("table race-handicapping-results")(0)

        Dim oRow As HTMLTableRow
        Dim i As Integer
        For i = 1 To oTbl.Rows.Length - 1
          Set oRow = oTbl.Rows(i)
          If oRow.className = "program-page-runner runner" Then
            Dim h As Horse
            Set h = New Horse
            h.HorseNumber = oRow.Cells(0).innerText
            h.HorseName = SplitGetPart(Replace(Trim(oRow.Cells(2).innerText), Chr(13), ""), 2, Chr(10))
            h.DaysOff = 0
            h.PowerRating = 0
            oRaceHorses.Add h
          End If
        Next i

      ElseIf handicapOption.innerText = "Snapshot" Then
        handicapOption.Click 'Does not work
        handicapOption.Focus 'Does not work
        handicapOption.fireevent "onChange" 'Does not work
        handicapOption.fireevent "onClick" 'Does not work
        'handicapOption.setActive => causes error
        'oHTMLDoc.parentWindow.execScript "selectHandicapping(option)" 'Causes error

        Set oTbl = oHTMLDoc.getElementsByClassName("table race-handicapping-results")(0)
        '<-Extract Snapshot Table

        '->
        End If
      Next handicapOption
    End Sub

标签： javascripthtmlangularjsvbaweb-scraping

解决方案

尝试以下作为选择要单击的选项卡的示例。在您的脚本中，我认为您需要在开始时登录，因为它会提示您这样做。登录后，如果需要，使用如下所示的语法来收集要单击的选项卡的节点列表。您想单击a每个标签中的元素li

Option Explicit
'VBE > Tools > References:
' Microsoft Internet Controls
Public Sub RetrieveInfo()
    Dim ie As InternetExplorer, tabs As Object, i As Long
    Set ie = New InternetExplorer

    With ie
        .Visible = True
        .Navigate2 "https://www.tvg.com/racetracks/FRE/freehold-raceway/autoplay/true?race=1"

        While .Busy Or .readyState < 4: DoEvents: Wend

        Set tabs = .document.querySelectorAll(".group li a")
        For i = 1 To tabs.Length - 1 'ignore first tab Summary
            tabs.item(i).Click 'click through tabs
        Next

        Stop

    End With
End Sub

推荐阅读