javascript - 将 document.ready 绑定(bind)到弹出窗口

Question

由于 jQuery 绑定(bind) document.ready 事件的方式，应该简单的代码不是:

var w = window.open(someSameOriginLocation,'');
$(w).ready(function () { //alternatively selector could be $(w.document)
  console.log('popout ready');
});

问题

• 回调在父窗口准备好时执行，而不是子窗口
• 在回调中 this 是对 w.opener.document
的引用

是否有使用 jQuery 将 ready 事件(或类似事件)绑定(bind)到不同窗口上下文的相当简单的跨浏览器方法？

Answer 1

当我大约 5 年前问这个问题时，我还没有听说过 promise 。 jQuery 1.7 最近发布，Deferred 已在今年早些时候的 1.5 中引入。这早于一年后发布的 Promises/A+ 规范。

我说这一切是因为当时我无法识别 jQuery 的 $(document).ready(...) 是什么。

它被绑定(bind)为一个事件，并将回调作为一个事件，jQuery API 将其视为一个事件，所以我错误地认为它是一个事件，尽管是一个特殊的事件。

文档准备就绪不是事件。 这是一个 promise 。

综上所述，我的错误是试图跟随 jQuery 的脚步并创建一个奇特的事件，而我本应该做的是使用 promise (不要介意它们在 JS 世界中还不存在)。

---

综上所述，在现代浏览器中的任何窗口引用上支持类似 document.ready 的行为非常简单。我有时间优势，许多旧问题已被修复，新的浏览器功能(例如 Promise)大大减少了实现 ready 功能的工作量.

我对这个问题的解决方案如下:

function ready(win) {
    return new Promise(function (resolve) {
        function checkReady() {
            if (win.document.readyState === 'complete') {
                resolve();
            }
        }

        win.document.addEventListener('DOMContentLoaded', checkReady, false);
        win.addEventListener('load', checkReady, false);
        checkReady();
    });
}

可用作:

ready(window).then(function () {
  //...do stuff
});

或者如果您使用的是 window.open:

ready(open('/your/file.html', ...)).then(function () {
  //.../your/file.html is ready
});