jQuery技术:将document.ready绑定到弹出窗口

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

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

问题

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

    大约5年前我问这个问题时,我没有听说过承诺。 jQuery 1.7最近已经发布,而Deferred在今年早些时候已经在1.5中推出。 这早于一年后发布的Promises/A+规范。

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

    它被绑定为一个事件,并将回调作为一个事件,并且jQuery API将其视为一个事件,所以我错误地认为它是一个事件,虽然是一个特殊事件。

    准备好文件不是一个事件。 约定了。

    所有这一切,我的错误是试图遵循jQuery的领导并创建一个奇特的事件,当我应该做的是使用一个承诺(更不用说他们在JS世界中还没有存在)。


    尽管如此,在现代浏览器中支持任何窗口引用上的document.ready like行为非常简单。 我有时间优势,许多旧问题已经被删除,新的浏览器function(如Promise )大大减少了实现readyfunction的工作量。

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

     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 }); 

    JavaScript安全策略不允许这样做。 例如,您收到控制台错误

     Unsafe JavaScript attempt to access frame with URL https://www.example.com/ from frame with URL https://www.example.org/. Domains, protocols and ports must match. 

    在调用window.open和设置同一窗口的onload函数之间有一个暂停是必要的。 window.open之后立即调用该窗口没有属性。 也许你必须反复使用setInterval这样做(不要忘记clearInterval然后)
    在jsfiddle中尝试这个(这是我最好的猜测)

     function func() { var w = window.open('https://fiddle.jshell.net/','windowname'); setTimeout(function() { w.onload = function () { $(w).ready(function() { console.log(w.name) }); }; },1000) } 

    需要了解更多jQuery教程分享将document.ready绑定到弹出窗口,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

      以上就是jQuery教程分享将document.ready绑定到弹出窗口相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/981459.html

      (0)
      上一篇 2021年12月12日
      下一篇 2021年12月12日

      精彩推荐