确定该页面已完全加载后的javascript单击按钮

Question

我有网站 example.com，在这个网站上有一个 ID 为“button1”的按钮，通过点击这个按钮，它会打开一个未知的 url“example.com/unknownUrl”，上面有一个已知的按钮“buttonOnUnknownPage”它。如何确定未知页面已完成加载并且可以单击“buttonOnUnknownPage”？

注意：“example.com”在脚本之外的另一个窗口中打开。这意味着，脚本不会在“example.com”重新加载后停止运行。

到目前为止我一直在使用这个：

// open example.com and get button1
exampleWindow = window.open("http://example.com", "_blank");
button1 = exampleWindow.document.getElementById('button1');

// clicking on button 1 opens example.com/unknownUrl
button1.click();

//and now wait 1000ms until page might be loaded
setTimeout(function() {
    buttonOnUnknownPage = exampleWindow.document.getElementById('buttonOnUnknownPage');
    buttonOnUnknownPage.click()
}, 1000);

这个问题是，我每次都需要等待 1000 毫秒，但仍然不能确定“example.com/unknownUrl”是否已加载。

是否有更有效的方法来确保“example.com/unknownUrl”已加载？ document.onload 之类的东西？

Answer 1

在其他窗口更改位置时对其进行监控是相当复杂的，其复杂的原因是每次其他窗口加载新文档时，整个window 状态都会被清除，并且所有事件侦听器都会被清除，并且创建了全新的文档。因此，您不能安装一次事件侦听器并继续使用它，因为每次单击新链接并更改页面位置时它都会被清除。

为特定 URL 创建新窗口的过程将（在某些浏览器中）首先加载一个名为 about:blank 的 URL，然后加载真实的 URL，从而导致您的监控有时检测到加载，这使情况变得更加复杂about:blank 内部 URL，而不是您要监视的真实 URL。 IE（甚至是新版本）对此特别不利（不足为奇）。

因此，可以跟踪这些外部窗口的加载，但需要一些黑客攻击才能使其工作。黑客攻击需要以下步骤：

1. 获取窗口的原始 URL（在您告诉它加载新内容之前是什么）。
2. 等到该窗口的 window.location.href 值不再是原始 URL。这表示窗口现在已开始加载其新 URL。
3. 加载新 URL 后，等待窗口显示它具有 .addEventListener 属性。由于某些未知原因，IE 中新创建的窗口还没有此属性。这意味着您不能在新创建的窗口上安装load 事件处理程序。相反，您必须等到该属性可用，然后才能安装 load 事件处理程序。
4. 当.addEventListener 属性可用时，查看文档是否已经完成加载。如果是这样，请继续您的 DOM 操作。如果没有，则为文档加载完成时注册一个事件处理程序。

我创建了一个函数调用monitorWindowLoad() 来执行上述步骤：

function monitorWindowLoad(win, origURL, fn) {
    log("monitorWindowLoad: origURL = " + origURL);

    function windowInitiated() {
        // at this point, we know the new URL is in window.location.href
        // so the loading of the new window has started
        // unfortunately for us, IE does not necessarily have a fully formed
        // window object yet so we have to wait until the addEventListener
        // property is available
        checkCondition(function() {
            return !!win.addEventListener;
        }, windowListen);
    }

    // new window is ready for a listener
    function windowListen() {
        if (win.document.readyState === "complete") {
            log("found readyState");
            fn();
        } else {
            log("no readyState, setting load event handler");
            win.addEventListener("load", fn);
        }
    }

    if (origURL) {
        // wait until URL changes before starting to monitor
        // the changing of the URL will signal that the new loading window has been initialized
        // enough for us to monitor its load status
        checkCondition(function() {
            return win.location.href !== origURL;
        }, windowInitiated);
    } else {
        windowInitiated();
    }
}

// Check a condition.  If immediately true, then call completeFn
// if not immediately true, then keep testing the condition
// on an interval timer until it is true
function checkCondition(condFn, completeFn) {
    if (condFn()) {
        completeFn();
    } else {
        var timer = setInterval(function() {
            if (condFn()) {
                clearInterval(timer);
                completeFn();
            }
        }, 1);
    }
}

然后可以使用此功能单击多个加载页面中的连续链接，如下所示：

function go() {
    // open new window
    var exampleWindow = window.open("window2.html");
    monitorWindowLoad(exampleWindow, "about:blank", function() {
        var loc = exampleWindow.location.href;
        clickButton(exampleWindow, "button2");
        monitorWindowLoad(exampleWindow, loc, function() {
            loc = exampleWindow.location.href;
            clickButton(exampleWindow, "button3");
            monitorWindowLoad(exampleWindow, loc, function() {
                // last page loaded now
            });
        });
    });
}

这个概念的实际工作演示here。这将加载一个名为 window1a.html 的文件。该页面中的 Javascript 会为 window2.html 打开一个新窗口，加载该窗口后，它会单击该窗口中的特定链接。单击该链接将打开window3.html，当它被加载时，它会单击该窗口中的一个链接，然后打开window4.html。您最终应该打开两个窗口（window1a.html 和 window4.html）。 window1a.html 将包含它执行的各种事件的日志。

window1.html 中的脚本不知道任何 URL。它只是单击链接并监视新加载的窗口何时加载，以便可以单击下一个链接等等。