Last active
February 14, 2024 02:54
-
-
Save samthor/64b114e4a4f539915a95b91ffd340acc to your computer and use it in GitHub Desktop.
Safari 10.1 `nomodule` support
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that | |
// does not support `nomodule` is probably not being used anywhere. The code below is left | |
// for posterity. | |
/** | |
* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will | |
* load <script nomodule> anyway. This snippet solve this problem, but only for script | |
* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script> | |
* | |
* Again: this will **not** prevent inline script, e.g.: | |
* <script nomodule>alert('no modules');</script>. | |
* | |
* This workaround is possible because Safari supports the non-standard 'beforeload' event. | |
* This allows us to trap the module and nomodule load. | |
* | |
* Note also that `nomodule` is supported in later versions of Safari - it's just 10.1 that | |
* omits this attribute. | |
*/ | |
(function() { | |
var check = document.createElement('script'); | |
if (!('noModule' in check) && 'onbeforeload' in check) { | |
var support = false; | |
document.addEventListener('beforeload', function(e) { | |
if (e.target === check) { | |
support = true; | |
} else if (!e.target.hasAttribute('nomodule') || !support) { | |
return; | |
} | |
e.preventDefault(); | |
}, true); | |
check.type = 'module'; | |
check.src = '.'; | |
document.head.appendChild(check); | |
check.remove(); | |
} | |
}()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Minified-ish version of the above. | |
*/ | |
(function() { | |
var d = document; | |
var c = d.createElement('script'); | |
if (!('noModule' in c) && 'onbeforeload' in c) { | |
var s = false; | |
d.addEventListener('beforeload', function(e) { | |
if (e.target === c) { | |
s = true; | |
} else if (!e.target.hasAttribute('nomodule') || !s) { | |
return; | |
} | |
e.preventDefault(); | |
}, true); | |
c.type = 'module'; | |
c.src = '.'; | |
d.head.appendChild(c); | |
c.remove(); | |
} | |
}()); |
why (e.target === check),can prove support 'type=module' ?
the support variable seems to have never been used by anyone ?
Thanks for help:)
Is it safe to stop using this script? I'm doing differential serving with the following browserslist
queries:
> 0.25% and not supports es6-module
for legacy browsers> 0.25% and supports es6-module, not dead, Firefox ESR
for the modern ones
Safari is not included in the first list, while the second one only includes Safari from 14.1 to 16.6, so I guess I'm not supporting Safari 10.1 at all. Is my assumption correct or do you still recommend we include the script?
This code is ancient, stop using it.
The narrow window of Safari that is broken here is likely not being used anywhere.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
why appendChild(check) and remove it?