确保页面已完全加载后，javascript单击按钮

Question

我有一个网站example.com，在这个网站上是一个ID为“ button1”的按钮，通过单击此按钮，它打开了一个带有已知按钮“ buttonOnUnknownPage”的未知网址“ example.com/unknownUrl”。 如何确定未知页面已完成加载，并且可以单击“ 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内部网址，而不是您要监视的真实网址。 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
            });
        });
    });
}

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

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