Chrome 中的窗口 onload 事件失败

发布于 2024-09-26 07:17:15 字数 1616 浏览 4 评论 0原文

我从 javascript 添加一些

function load_javascript(src) {
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.src = src;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(a, s);
}

load_javascript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js');

function addEvent(elm, evType, fn, useCapture) {
    //Credit: Function written by Scott Andrews
    //(slightly modified)
    var ret = 0;

    if (elm.addEventListener) {
        ret = elm.addEventListener(evType, fn, useCapture);
    } else if (elm.attachEvent) {
        ret = elm.attachEvent('on' + evType, fn);
    } else {
        elm['on' + evType] = fn;
    }

    return ret;
}

addEvent(window, "load", function() {
    console.log(window.jQuery + '  ' + window.$);
    $(document);
}, false);

它在 Firefox 中工作正常，但相当在 Chrome 中经常失败。每当我按下 jsfiddle“运行”按钮时，回调就会在加载 JQuery 之前执行，从而在 Chrome 控制台中给出错误。

这是否意味着我严重滥用了 addEventListener ？如果是，它的正确用途是什么？我如何真正等待所有脚本加载？

谢谢！
PS 尚未在任何其他浏览器中进行测试，因此如果在其他地方失败，请发表评论。

编辑
如果我在测试前等待一秒钟（使用 setTimout），成功率会增加到 100%。示例 http://jsfiddle.net/EH84z/1/

原文

I'm adding some <script/> tags from javascript to load some libraries (e.g., jquery). When all libraries are loaded, I execute main code. To wait until everything's ready, I use solution similar to the one in this answer (found it on the web).

Now, the story: http://jsfiddle.net/EH84z/

function load_javascript(src) {
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.src = src;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(a, s);
}

load_javascript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js');

function addEvent(elm, evType, fn, useCapture) {
    //Credit: Function written by Scott Andrews
    //(slightly modified)
    var ret = 0;

    if (elm.addEventListener) {
        ret = elm.addEventListener(evType, fn, useCapture);
    } else if (elm.attachEvent) {
        ret = elm.attachEvent('on' + evType, fn);
    } else {
        elm['on' + evType] = fn;
    }

    return ret;
}

addEvent(window, "load", function() {
    console.log(window.jQuery + '  ' + window.$);
    $(document);
}, false);

It works fine in Firefox, but quite often fails in Chrome. Every second time I press jsfiddle 'run' button, callback is executed before JQuery is loaded, thus giving error in Chrome console.

Does it mean I misuse addEventListener horribly? If yes, what's the correct use for it and how do I really wait until all scripts are loaded?

Thanks!
PS Didn't test it in any other browsers yet, so please comment if it's failing somewhere else.

edit
if I wait one second (using setTimout) before testing, success rate increases to 100%. An example http://jsfiddle.net/EH84z/1/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我三岁 2024-10-03 07:17:15

您必须将 load 事件附加到 jQuery 脚本标记，而不是 window 对象。

试试这个：

function load_javascript(src) {
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.src = src;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(a, s);

    // attach it to the script tag
    addEvent(a, "load", function() {
        console.log(window.jQuery + '  ' + window.$);
        $(document);
    }, false);
}

You have to attach the load event to the jQuery script tag, not the window object.

Try this:

function load_javascript(src) {
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.src = src;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(a, s);

    // attach it to the script tag
    addEvent(a, "load", function() {
        console.log(window.jQuery + '  ' + window.$);
        $(document);
    }, false);
}

回复收藏 0 原文

~没有更多了~