Question

我目前的项目是Google Chrome扩展程序，可以自动执行网页上的流程。到目前为止我的方式是扩展程序在一个单独的选项卡中打开，并且您有几个单独的按钮用于该过程中的各个步骤。您在另一个选项卡中打开网页，然后单击扩展选项卡上的按钮1并等待它完成。然后你继续点击下一页，等待它加载，然后在按钮2上手动等...

我现在正致力于整个流程的自动化，我正在使用JQuery和.click（）在网页上查找DOM元素 - 继续它们，但我的扩展脚本在网页处理和加载之前一直运行，导致整个过程失败。我意识到我需要一个针对我的问题的异步解决方案，但我无法找到它。

有没有办法让我检查页面是否在.click（）之后以及继续脚本或类似方式自动执行此过程之前完成加载？

编辑，代码澄清：

主扩展后台脚本中的

：

function readPage1 (tabUrl) {
    chrome.tabs.query({
        'url': <tabUrl>
    }, function (tabs) {
        if (tabs.length > 0) {
            chrome.tabs.sendMessage(tabs[0].id, {
                'action': 'verifyEmails1'
            }, function (response) {
                <-- logic here -->
            });
        }
    });
}

function readPage2 (tabUrl) {
    chrome.tabs.query({
        'url': <tabUrl>
    }, function (tabs) {
        if (tabs.length > 0) {
            chrome.tabs.sendMessage(tabs[0].id, {
                'action': 'verifyEmails2'
            }, function (response) {
                <-- logic here -->
            });
        }
    });
}

在单独的脚本中，在所有选项卡上运行：

chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
    'use strict';
    if (request.action === 'verifyEmails1') {
        <-- first page reading/populating logic -->
        $('.next a')[0].click();
        sendResponse(response);
    } else if (request.action === 'verifyEmails2') {
        <-- second page reading logic -->
        sendResponse(response);
    }
});

现在，我有两个调用readPage1和readPage2的按钮，在我按下第二个按钮之前，我会手动等待第二页完成加载。在异步继续$('.next a')[0].click();之前，如何在readPage2之后等待标签加载？（或者，我更有可能将两个响应复合到一个响应对象中，并在ReadPage1）

中处理所有响应

Answer 1

有时，用于特定计时事件的内置jQuery方法并不总是按预期运行，尤其是当后台脚本依赖于它们时。也就是说，如果它是后台脚本等待加载的特定元素，那么你可以使用JavaScript来嘲笑＆＃34;为了它。以下示例使用teh setInterval() JavaScript方法每100毫秒循环一次，以检查高度是否相等。它具有额外缓冲区条件，以确保使用.length方法加载表。所以回答你的问题，

如何在异步继续readPage2之前等待$('.next a')[0].click();之后加载选项卡？

使用setInterval()和.length。请注意，在下面的示例中，如果您更改了＆＃34;检测器＆＃34;要查找页面上不存在的类，它将不会触发，并且两个表高度不相等。

＆＃13;

    var makeSameHeight = setInterval(function() {
      var firstTable = $('table#one').height() + "px";
      var secondTable = $('table#two').height() + "px";
      if ((firstTable === secondTable) && $('div.container').length > 0) {
        var doNothing = "";
        clearInterval(makeSameHeight);
      } else {
        $('table#two').css("height", firstTable);
      }
    }, 100);

＆＃13;

table {
  border-collaspe: collapse;
  border: solid 1px black;
  float: left;
  clear: none;
  display: inline-block;
  margin: 5px;
}
td {
  border: solid 1px black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <div class="col-sm-8">
    <table class="table table-condensed table-hover table-responsive" id="one">
      <thead>
        <tr>
          <th class="col-sm-4">1</th>
          <th class="col-sm-3">2</th>
          <th class="col-sm-3">3</th>
        </tr>
      </thead>
      <tbody ng-repeat="obj in obj">
        <tr ng-repeat="obj2 in obj2">
          <td>One</td>
        </tr>
        <tr ng-repeat="obj2 in obj2">
          <td>Two</td>
        </tr>
        <tr ng-repeat="obj2 in obj2">
          <td>Three</td>
        </tr>
        <tr ng-repeat="obj2 in obj2">
          <td>Four</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-sm-4">
    <table class="table table-condensed table-hover table-responsive" id="two">
      <thead>
        <tr>
          <th class="col-sm-4">1</th>
          <th class="col-sm-3">2</th>
          <th class="col-sm-3">3</th>
        </tr>
      </thead>
      <tbody ng-repeat="obj in obj">
        <tr ng-repeat="obj2 in obj2">
          <td>One</td>
        </tr>
        <tr ng-repeat="obj2 in obj2">
          <td>Two</td>
        </tr>
        <tr ng-repeat="obj2 in obj2">
          <td>Three</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

Answer 2

我不确定chrome扩展但使用jQuery：

(function($) {
  winLoaded = false;
  $(window).load(function() {
    winLoaded = true;
  });

  $('.myelement').click(function() {
    if (winLoaded) {
      // do stuff
    }
    else {
      return false;
    }
  });
})(jQuery);

或者你可以在加载函数中绑定点击处理程序：

(function($) {
  winLoaded = false;
  $(window).load(function() {
    winLoaded = true;
    $('.myelement').click(function() {
      // do stuff
    });
  });

})(jQuery);

如何告诉后台脚本等到页面加载完毕？

2 个答案: