Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Safari 10.1 `nomodule` support
/**
* 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();
}
}());
@RoelRoel

This comment has been minimized.

Show comment
Hide comment
@RoelRoel

RoelRoel Jun 20, 2017

This is pretty smart!

RoelRoel commented Jun 20, 2017

This is pretty smart!

@anilanar

This comment has been minimized.

Show comment
Hide comment
@anilanar

anilanar Jun 25, 2017

Safari 10.1 still downloads the nomodule file, but it doesn't execute.

My fork: https://gist.github.com/anilanar/5be4897eb2ef261ff53a778e3fe5f2d3
Not as easy to use as the original one as scripts are injected at runtime.

anilanar commented Jun 25, 2017

Safari 10.1 still downloads the nomodule file, but it doesn't execute.

My fork: https://gist.github.com/anilanar/5be4897eb2ef261ff53a778e3fe5f2d3
Not as easy to use as the original one as scripts are injected at runtime.

@samthor

This comment has been minimized.

Show comment
Hide comment
@samthor

samthor Sep 12, 2017

Hey everyone! This approach works but has its challenges—Safari might still download the script, even though it won't execute, which is not ideal (but it is a limited version of Safari that this issue effects).

A simpler approach, although it involves adding more hacks to your actual code, is to create your ES Modules / nomodule scripts in this order:

<script type="module" src="module.js"></script>
<script src="nomodule.js" nomodule defer></script>

The key here is the defer attribute. As ES Modules scripts are deferred by default, you want your older code to run in the same way—after the page is loaded—so they will run in a consistent order.

And then inside the nomodule.js file, check whether your code has already executed: e.g. if (window._yourCodeLoaded) { throw new Error("safari 10.1 has a bug"); }.

Owner

samthor commented Sep 12, 2017

Hey everyone! This approach works but has its challenges—Safari might still download the script, even though it won't execute, which is not ideal (but it is a limited version of Safari that this issue effects).

A simpler approach, although it involves adding more hacks to your actual code, is to create your ES Modules / nomodule scripts in this order:

<script type="module" src="module.js"></script>
<script src="nomodule.js" nomodule defer></script>

The key here is the defer attribute. As ES Modules scripts are deferred by default, you want your older code to run in the same way—after the page is loaded—so they will run in a consistent order.

And then inside the nomodule.js file, check whether your code has already executed: e.g. if (window._yourCodeLoaded) { throw new Error("safari 10.1 has a bug"); }.

@niklaskorz

This comment has been minimized.

Show comment
Hide comment
@niklaskorz

niklaskorz Sep 20, 2017

@samthor Would you suggest dynamically inserting a new script tag in the deferred nomodule script (in case the module script has not been loaded / the flag has not been set by the main code)?

niklaskorz commented Sep 20, 2017

@samthor Would you suggest dynamically inserting a new script tag in the deferred nomodule script (in case the module script has not been loaded / the flag has not been set by the main code)?

@jacksonrayhamilton

This comment has been minimized.

Show comment
Hide comment
@jacksonrayhamilton

jacksonrayhamilton Nov 17, 2017

@samthor You're missing the closing double quote: if (window._yourCodeLoaded) { throw new Error("safari 10.1 has a bug"); }

@niklaskorz I believe setting defer on the second script guarantees that it runs after the earlier already-defer-ed script.

jacksonrayhamilton commented Nov 17, 2017

@samthor You're missing the closing double quote: if (window._yourCodeLoaded) { throw new Error("safari 10.1 has a bug"); }

@niklaskorz I believe setting defer on the second script guarantees that it runs after the earlier already-defer-ed script.

@GrosSacASac

This comment has been minimized.

Show comment
Hide comment
@GrosSacASac

GrosSacASac Dec 27, 2017

/* safari 10 nomodule fix CC0-1.0
this snippet needs to be at the beginning of the 
<script type="module" src="main-as-module.js"> and associated
<script nomodule src="main-as-script.js">
by throwing an error early the rest of the code is not executed
but only downloaded and compiled for Safari 10
assumption main-as-module.js and main-as-script.js
 are both built from the same source

advantage is that there is no js file that needs to be inlined
 at the top of the html

issue: does not work with multiple indepent files without renaming the global used
 
conclusion: worse for Safari10 better for everyone else

*/
if (window.MAIN_EXECUTED) {
    // "warning main.js already executed"
    throw new Error("");
}
window.MAIN_EXECUTED = true;

https://github.com/GrosSacASac/JavaScript-Set-Up/blob/master/js/quirk_fixes/safari10_nomodule_fix.js

GrosSacASac commented Dec 27, 2017

/* safari 10 nomodule fix CC0-1.0
this snippet needs to be at the beginning of the 
<script type="module" src="main-as-module.js"> and associated
<script nomodule src="main-as-script.js">
by throwing an error early the rest of the code is not executed
but only downloaded and compiled for Safari 10
assumption main-as-module.js and main-as-script.js
 are both built from the same source

advantage is that there is no js file that needs to be inlined
 at the top of the html

issue: does not work with multiple indepent files without renaming the global used
 
conclusion: worse for Safari10 better for everyone else

*/
if (window.MAIN_EXECUTED) {
    // "warning main.js already executed"
    throw new Error("");
}
window.MAIN_EXECUTED = true;

https://github.com/GrosSacASac/JavaScript-Set-Up/blob/master/js/quirk_fixes/safari10_nomodule_fix.js

@fredrikpaues

This comment has been minimized.

Show comment
Hide comment
@fredrikpaues

fredrikpaues Jun 25, 2018

How do I use this? Should it be an inline script tag or pasted into my type="module" script tag?

fredrikpaues commented Jun 25, 2018

How do I use this? Should it be an inline script tag or pasted into my type="module" script tag?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment