从使用 Angular 的站点上抓取数据时，如何访问元素的 ng-model？答案

【问题标题】：How can I access the ng-model of an element when scraping data off a site that uses angular?从使用 Angular 的站点上抓取数据时，如何访问元素的 ng-model？
【发布时间】：2020-01-17 18:28:30
【问题描述】：

我们有一个批发供应商，我们从那里购买大量产品，然后为客户定制和转售。他们的一些产品我们库存，其他产品我们在客户订购时订购。我们在我们的网站上宣传这些产品，并通过我们的网站使它们可供购买（通过定制等），但供应商通常供应有限（尤其是这些不那么频繁的“特殊订购”产品）已售出），因此如果供应商的供应量过低，我们不会为产品做广告或提供可供购买的产品。

现在，此类产品有很多，每天我们都需要了解供应商对每种产品的可用数量，这样我们才不会最终出售我们无法获得的东西。多年来，我们一直恳求供应商向我们提供 Web 服务或 ftp 站点，并提供每日转储或任何其他方式来获取可用的库存数据，而不是通过抓取他们的网站，相信我，我们已经恳求他们了很多，他们就是不会这样做。（他们会说我们太忙了，也许明年我们会有一些东西，但 10 年后他们仍然没有任何东西。）所以我们不得不刮掉他们的网站。他们知道我们正在这样做，这不是我们俩都非常高兴的事情，但如果我们要销售这些产品，就必须这样做。

好吧，他们的网站现在使用 Angular，尝试抓取确实很痛苦。一年多来，我们有一个基于 Selenium 的爬虫工作得很好，但是在几个月前他们做了一些改变之后，它只是试图在他们的网站上运行 JavaScript 失败了。（我遇到了各种晦涩难懂的错误和异常，而通常可以正常工作的事情却没有，因为似乎在与我尝试与之交互的任何 html 元素相关的事件上触发了 javascript，而且似乎 Selenium 有麻烦处理那个JavaScript。）我已经尝试了许多selenium的风格，所有可用的网络驱动程序，许多不同的配置尝试，各种不同的选项设置等等，我就是无法再成功地抓取那个网站了，所以我求助于使用禁用网络安全的浏览器，并运行一个 JavaScript 程序，在单独的窗口中打开他们的网站。（我不能只在框架中打开它，因为他们经常使用 window.top。因为他们自己也使用框架。好玩。）

所以在我的爬虫登录并进行一些导航后，它没有问题，它必须将搜索值放入搜索框中并单击搜索按钮。好吧，该值很好地显示在搜索框中，但是当我的程序单击他们的搜索按钮时，他们的 JavaScript 明显清除了搜索字段，并最终生成了一条错误消息，提示我的搜索返回了超过 2000 种产品，好像我输入了一个空白值。

在检查他们的页面时，我看到：

<textarea id="searchBox" ng-model="searchParams.searchString" rows="3"
          ng-blur="formatSearch()" class="ng-pristine ng-valid ng-touched"
          style="">
</textarea>

所以似乎即使我通过向输入发送按键事件将搜索值放入文本区域（我也尝试过设置输入的值），但 searchParams.searchString ng-模型没有得到更新，因此当 formatSearch() 运行时，它会获取该模型中的内容（一个空字符串），对其进行格式化，然后将其放入字段中。或者至少看起来就是这样。

如何将 searchParams.searchString 设置为我尝试放入搜索框中的搜索值？我可以获得元素的角度范围，但似乎我需要控制器范围或其他东西。我没有看到任何指定 ng-controller 的元素。哦，等等，这是搜索框有点遥远的祖先中包含的 div：

<div ng-controller="AppCtrl" ng-class="routeClassName"
     class="fluid-container ng-scope ViewProducts" style="">

.. 也许我最终会回答我自己的问题。

（我希望我可以发布指向供应商网站和我们的登录信息的链接，以便你们可以尝试想法等，但显然我不能这样做。）

【问题讨论】：

发送按键事件似乎是正确的方法。您确定该网站不只是有错误吗？尝试输入你的爬虫正在输入的相同内容，看看会发生什么。
当我在搜索框中输入产品编号并以用户身份手动单击搜索按钮时，他们的网站确实可以工作，但是发生了一些奇怪的事情，因为我发送的按键事件导致价值明显显现。但是当模糊事件触发时，我的价值就消失了。或者看起来是这样。
我的猜测是这与 Angular 没有任何关系。如果您在事件级别与页面交互，则不必担心这些事情。我会首先确保您作为人类生成的事件（该工作）与您使用刮刀发送的事件完全相同。然后寻找客户端的差异； scaper如何加载页面并运行js？也许它使用了奇怪的 Chromium 版本或其他不寻常的东西。
我不知道还能做些什么来确保我作为人类生成的事件与我用刮刀发送的事件相同，超出了我已经完成的操作。而且我作为一个人与我的刮刀打开的浏览器窗口进行交互，所以，客户端没有区别。 Chromium 的版本是 Opera 使用的最新版本。我确实设法弄清楚如何使用该页面上运行的角度设置该值。我将提交问题的答案。
我的意思是我用我的程序发送的事件和我用键盘输入搜索值时生成的事件之间一定存在一些差异。我需要关注元素，发送一个keydown，然后是一个keypress，然后是一个keyup到内容框架的窗口（因为事件向下钻取然后再冒泡，谁知道关键处理程序在哪里）；但是事件有很多参数和它们的潜在排列，因此，直接更新该模型似乎是一条通往胜利的捷径，至少目前是这样。

标签： javascript angularjs web-scraping

【解决方案1】：

我尝试向我正在打开的页面添加角度，该页面加载我的刮板，然后加载供应商的网站，然后使用它来尝试访问所需的角度范围，但这不起作用。我试图通过他们的窗口对象访问他们页面上运行的角度，但它不存在。

这是我必须做的：

    var f = self.sitewin.top.document.querySelector('#contentFrame');
    f.contentWindow.angular.element(tag).scope().searchParams.searchString = self.puid;

成功了。

'self' 是我的爬虫对象。 'sitewin' 是站点的窗口。 'tag' 是我这样找到的元素：

find: function (selector) {
    var self = GTPScraper;
    var tag = self.sitewin.document.querySelector(selector);
    if (tag) return tag;
    try {
        tag = self.sitewin.top.document.querySelector('#contentFrame').contentDocument.querySelector(selector);
    }
    catch (e) {
        // swallow errors about things that are null because something hasn't loaded yet - this function gets retried for up to a timeout length
    }
    return tag;
},

'self.puid' 是我在搜索框中输入的“产品单元 ID”。

我想这里的要点是 angular 最终可能会被加载到被抓取站点窗口的框架中，如果发生这种情况，您可以通过该框架的 contentWindow 访问它，然后您可以从那里访问元素范围，并从那里访问他们的模型。

这是有效的 - 设置 searchParams.searchString = self.puid 后，它点击搜索按钮，现在产品页面出现。哈利路亚。

【讨论】：