Question

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

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

我到现在才用这个：

document.onload

问题是，我需要每次等待1000毫秒，但仍然无法确定，“example.com/unknownUrl”已加载。

是否有更有效的方法，以确保“example.com/unknownUrl”已加载？像- Includes - Login - View * Secure？

这样的东西

Answer 1

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

更复杂的是，为特定URL创建新窗口的过程（在某些浏览器中）将首先加载名为about:blank的URL，然后加载真实URL，导致您的监控有时会检测到加载about：空白内部URL，而不是您要监视的真实URL。 IE（甚至新版本）对此特别不好（毫不奇怪）。

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

获取窗口的原始网址（在您告诉它加载新内容之前的内容）。
等到该窗口的window.location.href值不再是原始URL。这表示该窗口现已开始加载其新URL。
加载新网址后，请等待窗口显示其具有.addEventListener属性。由于某些未知原因，IE中新创建的窗口还没有这个属性。这意味着您无法在新创建的窗口上安装load事件处理程序。相反，您必须等到该属性可用，然后才能安装load事件处理程序。
当.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中的脚本并不知道任何网址。只需点击链接并监控新加载的窗口何时加载，以便点击下一个链接，依此类推。

在shure页面已完全加载后，javascript单击按钮

1 个答案: