Skip to content

Instantly share code, notes, and snippets.

@WebReflection
Last active July 28, 2020 12:44
Show Gist options
  • Save WebReflection/2fe50c128c7b48d15de1c15d690798bd to your computer and use it in GitHub Desktop.
Save WebReflection/2fe50c128c7b48d15de1c15d690798bd to your computer and use it in GitHub Desktop.
Differential JS Loader

This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load event.

Compatibility

This technique has been successfully tested down to IE9.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
  addEventListener('message', function _(e) {
    removeEventListener('message', _);
    var s = document.head.appendChild(document.createElement('script'));
    s.src = (s.type = e.data) == 'module' ? '/js/modern.js' : '/js/legacy.js';
  });
  </script>
  <script type="module" src="data:text/javascript,postMessage('module','*')"></script>
  <script defer src="data:text/javascript,postMessage('text/javascript','*')"></script>
</head>
</html>

Further Considerations

Please note this technique, or any other out there, does not grant that modern module scripts can also load dynamic import(...) within their code.

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