Questo sicuramente non è "il modo migliore" per farlo, ma potrebbe darti più idee e / o idee migliori, e sembra funzionare in Firefox, Chrome, IE9 + ... e persino sul mio Android obsoleto telefono:
link
<!DOCTYPE html> <!-- If only to please Mr. IE, wrt.
its so-called "Standards mode", etc -->
<html>
<head>
<title>Polyfill PoC</title>
<script>
var listener = (typeof document.addEventListener !== "undefined" ? document.addEventListener : null),
onLoad = function() {
function polyfilled() {
if (remaining) {
for (var p = 0; p < needed.length; p++) {
var s;
if (s = needed[p].content) {
eval(s);
needed[p].content = null;
remaining--;
}
}
}
if (!remaining) {
run();
}
}
function polyIndexOf(id) {
var p = needed.length;
while ((--p >= 0) && (needed[p].id !== id));
return p;
}
function grabIt(src, at) {
var xhr = new XMLHttpRequest();
remaining++;
xhr.open("GET", src);
xhr.onload = function(e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
needed[at].content = xhr.responseText;
} else {
console.error(xhr.statusText);
}
}
polyfilled();
};
xhr.send();
}
var polyscripts = document.querySelectorAll("polyfill[id]"),
remaining = 0,
needed = [ ];
// Begin polyfill requirement gathering logic
if (typeof Array.prototype.find === "undefined") {
needed.push({ id: "needed_ES5" });
}
if (typeof Per === "undefined") {
needed.push({ id: "needed_Per" });
}
// End polyfill requirement gathering logic
for (var i = 0; i < polyscripts.length; i++) {
var polyscript = polyscripts[i],
index;
if (
(polyscript.id.substring(0, 7) === "needed_") &&
((index = polyIndexOf(polyscript.id)) >= 0)
) {
grabIt(polyscript.getAttribute("src"), index);
}
}
polyfilled();
};
if (listener) {
listener.call(document, "DOMContentLoaded", onLoad);
} else {
window.onload = onLoad;
}
</script>
</head>
<body>
//...
<polyfill id="needed_ES5" src="http://www.ysharp.net/experiments/JSLT/2016-03-07/es5-shim.min.js"/><polyfillid="needed_Per" src="http://www.ysharp.net/experiments/JSLT/2016-03-07/per.min.js" />
</body>
</html>
'HTH,