通过函数加载Javascript动态脚本...如何再次执行onload或readyState? [英] Javascript dynamic script loading via functions... how to do onload or readyState all over again?

问题描述

目前，我有一个javascript可调用函数(不添加全局变量)将脚本添加到头部.

At present, I have a javascript callable functions (without adding global variables) that add scripts to the head.

加载对于站点最初加载后的页面很有用，但是我一直在等待加载较大的脚本，直到需要它们为止，因为很多脚本都不需要它们.

Onload is useful for pages after the site loaded initially, but I'm waiting to load larger scripts until they're needed considering many won't need them.

以下代码适用于某些脚本，但不适用于某些较大的脚本...

The following code works for some scripts, but not for some larger ones...

function include(script) {
    var head= document.getElementsByTagName('head')[0];
    var newScript= document.createElement('script');
    newScript.type= 'text/javascript';
    newScript.src= script;
    head.appendChild(newScript);
}
function doThething(){
    include('foo');
    include('bar');
    if(document.readyState === "complete") {
        // do something needing foo and bar
    } else {
        window.addEventListener("onload", function () { 
            // do something needing foo and bar
        }
    }
}

使用某些脚本，以上内容可以正常工作.与其他人(尤其是客户端没有的更大的人)一起尝试在foo加载之前执行.我不能更改foo，因为它是一个较大的异地公共图书馆.

With some scripts, the above works fine and dandy. With others (especially largers ones that client doesn't have)it tries to execute before foo has loaded. I can't change foo because it's a larger off-site public library.

我该如何使dom等待新内容完成加载并再次启动onload，或者确保在执行我的操作之前确保已加载foo?

How can I make it make the dom wait for the new stuff to finish loading and kick off an onload again, or otherwise ensure that foo is loaded before I doTheThing?

推荐答案

您希望加载脚本，而不是文档加载.在此处查看已接受的答案:

You want a script onload, not a document onload. See the accepted answer here:

Internet Explorer中脚本"标记的加载"处理程序

这是令人钦佩的代码:

var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
if ( s.scriptCharset ) {
    script.charset = s.scriptCharset;
}
script.src = s.url;

// Handle Script loading
    var done = false;

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
    if ( !done && (!this.readyState ||
            this.readyState === "loaded" || this.readyState === "complete") ) {
        done = true;
        jQuery.handleSuccess( s, xhr, status, data );
        jQuery.handleComplete( s, xhr, status, data );

        // Handle memory leak in IE
        script.onload = script.onreadystatechange = null;
        if ( head && script.parentNode ) {
            head.removeChild( script );
        }
    }
};

// Use insertBefore instead of appendChild  to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore( script, head.firstChild );

这篇关于通过函数加载Javascript动态脚本...如何再次执行onload或readyState?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！