让代码等待弹出窗口打开，然后抓取弹出窗口

Question

我正在编写一个JS脚本，可以自动执行一些浏览器操作。

使用 get_baskets_onclicks ，我正在从某些 DOM 元素中收集 onclick 函数并在数组中返回它们。每个点击看起来像这样：

onclick="PrimeFaces.ab({s:"j_id_32:GenerationTable:0:j_id_1e_2_3p",u:"@widgetVar(GenerationCodingDialog)",onco:function(xhr,status,args){PF('GenerationCodingDialog').show();}});return false;"

并打开一个弹出窗口，我需要从中收集一些数据 get_MAP_data.

此外，这些函数中的每一个都是从 get_MAP_data 中调用的。

问题是我无法使代码等待弹出窗口打开，因此get_MAP_data返回的数据为空。

除了以下document.readyState === 'complete'，我也尝试过window.onload = function(){}，但无济于事。

有没有办法让浏览器（Chrome）等待？我想我不能使用jQuery，因为这不是我的网页。

function get_baskets_onclicks() {
    // returns array of functions that launch MAP dialogs
    var baskets = Array.from(document.getElementsByClassName("ui-commandlink ui-widget margin-right-5px"));
    var baskets_onclicks = baskets.map(basket => basket.onclick);
    return baskets_onclicks;
};
function get_MAP_data(basket_onclick) {
    basket_onclick()
    if (document.readyState === 'complete') {
        console.log("PAGE LOADED");
        // wait here for the dialog to open
        // dt = detail table
        var MAP_data = {} // container for transaction details
        var labels_to_get = ['Description', 'Category', 'Department', 'Justification', 'My Shop Voucher', 'My Shop Coding'];
        var all_dts = document.getElementsByClassName('summary-details-grid');
        var dt = Array.from(all_dts).filter(table => table.parentElement.id == "paymentGenerationmyShopCodingForm")[0];
        var dt_body = dt.children[0];
        var dt_trs = Array.from(dt_body.children)   ;
        dt_trs.forEach(function(tr) {
            tds = Array.from(tr.children);
            tds.forEach(function(td) {
                var label = td.textContent;
                if (labels_to_get.includes(label)) {
                    var value_for_label = tds[1].textContent;
                    MAP_data[label] = value_for_label;
                    console.log(label, value_for_label);
                };
            });
        });
        // console.log(MAP_data);
        return MAP_data;
    };
};
var first_onclick = get_baskets_onclicks()[0];
get_MAP_data(first_onclick);

Answer 1

一个小的、笨拙的解决方法是让你的代码轮询你正在检查的元素的存在。

let interval = setInterval(() => {
  var all_dts = document.getElementsByClassName('summary-details-grid');
  if (all_dts.length !== 0) {
    // Found some elements, now lets run the code
    clearInterval(interval);
    get_MAP_data(first_onclick);
  }
}, 100);

这将每 10 秒检查summary-details-grid类，当找到它们时，运行您的代码。

Answer 2

https://developer.mozilla.org/en-US/docs/Talk:DOM/window.setTimeout

http://mdn.beonex.com/en/DOM/window.setInterval.html

重试、setTimeout、setInterval、while 循环的组合，我不确定您的特定模式的最佳方法，但其中一个选项应该适合轮询 DOM 结果，直到有东西或尝试了很多次。