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

Question

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

现在，这些产品有很多，每天我们都需要知道 vendor 对每种产品的可用数量是多少，这样我们就不会最终出售我们无法获得的东西。多年来，我们一直恳求 vendor 向我们提供 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-model 仍然是' t 得到更新，因此当 formatSearch() 运行时，它会获取该模型中的内容(一个空字符串)，对其进行格式化，然后将其放入字段中。或者至少这就是看起来正在发生的事情。

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

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

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

(我希望我可以发布一个指向 vendor 网站的链接和我们的登录信息，这样你们就可以尝试一些想法等，但显然我不能这样做。)

Answer 1

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

这是我必须做的:

    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 后，它点击搜索按钮，现在产品页面出现。哈利路亚。