Skip to content

Instantly share code, notes, and snippets.

@samthor
Last active February 14, 2024 02:54
Show Gist options
  • Save samthor/64b114e4a4f539915a95b91ffd340acc to your computer and use it in GitHub Desktop.
Save samthor/64b114e4a4f539915a95b91ffd340acc to your computer and use it in GitHub Desktop.
Safari 10.1 `nomodule` support
// 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();
}
}());
/**
* 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();
}
}());
@devilmancbc
Copy link

why appendChild(check) and remove it?

@devilmancbc
Copy link

why (e.target === check),can prove support 'type=module' ?
the support variable seems to have never been used by anyone ?
Thanks for help:)

@gtempesta
Copy link

gtempesta commented Sep 14, 2023

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?

@samthor
Copy link
Author

samthor commented Sep 15, 2023

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