用于加载<head>中脚本标签的Polyfill
用于加载<head>中脚本标签的Polyfill
提问于 2014-04-13 18:36:10
我试图通过这个函数将javascript延迟加载到head中：
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？或者换种方式问:有没有一种完全不同的方式？而不会通过使用库、插件等来重载整个过程。
回答 1
Stack Overflow用户
发布于 2019-12-12 20:50:32
这是我的版本，适用于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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23041650
复制相关文章
相似问题
腾讯云开发者
