用于在 <head> 中加载脚本标记的 Polyfill答案

【问题标题】：Polyfill for onload of script tag in <head>用于在 <head> 中加载脚本标记的 Polyfill
【发布时间】：2014-04-13 10:36:10
【问题描述】：

我正在尝试使用此功能将 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？或者换一种方式问：有没有完全不同的方式来做到这一点？无需使用库、插件等重载整个过程。

【问题讨论】：

请参见此处：stackoverflow.com/questions/11160948/… 获取简单的 DIY 版本，microjs.com/#loader 获取大量微型/紧凑型第三方选项。
太棒了，这值得一分钱！谢谢。
“IE 8 模式”下的 IE 11 有 script.readyState === "loaded"

标签： javascript safari onload head on-the-fly

【解决方案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);
}

【讨论】：