如何告訴後臺腳本等待頁面加載？

Question

我目前的項目是一個谷歌瀏覽器擴展程序，它應該可以在網頁上自動執行一個程序。我迄今爲止的做法是，擴展程序在一個單獨的選項卡中打開，並且對於該過程中的各個步驟，您有幾個單獨的按鈕。您在另一個選項卡中打開網頁，然後單擊擴展選項卡上的按鈕1並等待它完成。然後你繼續點擊下一頁，等待它加載，然後在按鈕2上手動等...

我現在正在自動化整個過程，並且在網頁上查找DOM元素JQuery和.click（） - 他們繼續，但我的擴展腳本在網頁處理和加載之前保持運行，導致整個過程失敗。我意識到我需要一個針對我的問題的異步解決方案，但我找不到一個解決方案。

有沒有一種方法可以讓我檢查.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，我手動等待第二頁完成加載，然後再按第二個按鈕。在異步繼續readPage2之前，如何等待標籤在$('.next a')[0].click();之後加載？ （或者，更有可能我會加劇兩種反應到一個響應對象和處理這一切在ReadPage1）

Answer 1

我不知道關於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); 

Answer 2

有時候，內置的jQuery方法爲特定的時序事件不總是充當預期，尤其是當後臺腳本後，他們偶然。也就是說，如果它是後臺腳本等待加載的特定元素，則可以使用JavaScript來「嗅探」它。以下示例使用teh setInterval() JavaScript方法遍歷每100毫秒檢查高度是否相等。它有一個額外的緩衝區條件以確保該表已使用.length方法加載。所以要回答你的問題，

如何等待標籤加載之前$('.next a')[0].click();異步繼續readPage2之前？

使用setInterval()和.length。請注意，在下面的示例中，如果更改「檢測器」以查找頁面上不存在的類，它將不會觸發並且兩個表格高度不相等。

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);

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

<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>