Question

我正在尝试使用此函数将javascript延迟加载到头部：

function bfLoadScripts(strPath) {
    var r = false;
    var scriptTag = document.createElement('script');
    scriptTag.src = strPath;
    scriptTag.type = 'text/javascript';

    scriptTag.addEventListener('load',function() {
        //alert('JS loaded');
            r = true;
    });
    var headTag = document.getElementsByTagName('head')[0];
    headTag.appendChild(scriptTag);
}

适用于FF（最新），Chrome（最新），IE 11，但不适用于Safari iOS 5.1和Safari PC。

之前我尝试过这个，但Safari也不支持它：

    scriptTag.onload = scriptTag.onreadystatechange = function() {
        if ( !r && (!this.readyState || this.readyState == 'complete') ) {
          r = true;
    };

“onload”事件是否有polyfill？或者提出不同的问题：是否有完全不同的方式这样做？不使用库，插件等重载整个过程。

Answer 1

这是我的版本，可在IE 8（TypeScript）中使用：

type IE8ScriptReadyState = "loading" | "loaded";

interface IE8CompatibleScriptElement extends HTMLScriptElement
{
    onreadystatechange: ()=> void;
    readyState: IE8ScriptReadyState;
}

export function loadPolyfill(src): Promise<void>
{
    return new Promise(function (resolve, reject)
    {
        let js = <IE8CompatibleScriptElement>document.createElement('script');
        js.src = src;

        if (!('onload' in js))
        {
            // @ts-ignore
            js.onreadystatechange = function ()
            {
                if (js.readyState === 'loaded')
                {
                    js.onreadystatechange = null;
                    resolve();
                };
            };
        }


        js.onload = function ()
        {
            js.onload = null;
            resolve();
        };

        js.onerror = function ()
        {
            js.onerror = null;
            reject(new Error('Failed to load script ' + src));
        };

        js.oncancel = function ()
        {
            js.oncancel = null;
            reject(new Error('Cancelled loading of script ' + src));
        };

        if (document.head)
            document.head.appendChild(js);
        else
            document.getElementsByTagName('head')[0].appendChild(js);            
    });
}

// loadScript("foo", function () { alert("hi"); });
// loadScript("/ts/myimport.js", function () { alert("hi"); });
function loadScript(src: string, done: (err?: Error) => void)
{
    console.log(src);

    let js = <IE8CompatibleScriptElement>document.createElement('script');
    js.src = src;


    if (!('onload' in js))
    {
        // @ts-ignore
        js.onreadystatechange = function ()
        {
            if (js.readyState === 'loaded')
            {
                js.onreadystatechange = null;
                if (done != null)
                    done();
            };
        };
    }


    js.onload = function ()
    {
        js.onload = null;
        console.log("onload " + src);
        if(done != null)
            done();
    };

    js.onerror = function ()
    {
        js.onerror = null;
        console.log("onerror " + src);

        if (done != null)
            done(new Error('Failed to load script ' + src));
    };


    //js.onloadend = function ()
    //{
    //    alert("onerror");
    //    done(new Error('Failed to load script ' + src));
    //};


    js.oncancel = function ()
    {
        js.oncancel = null;
        console.log("oncancel " + src);
        if (done != null)
            done(new Error('Cancelled loading of script ' + src));
    };

    if (document.head)
        document.head.appendChild(js);
    else
        document.getElementsByTagName('head')[0].appendChild(js);
}

用于填充脚本标签的Polyfill

1 个答案: