Defer & programmatically trigger loading of <script> tags.
This is useful for external, third party JS dependencies that you want to embed in a base HTML template but don't want to load & parse until a later, programmatically-invoked time.
Include the laterscript JS tag above your first <laterscript> tag.
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/msmathers/laterscript@master/js/laterscript.js"></script>Use a <laterscript> tag for inline or remote JS scripts. Make sure it has an ID.
<laterscript id="myscript" type="text/javascript" src="/path/to/file.js">
</laterscript>Activate the script via laterscript.load(). Returns a promise that resolves once the script has been loaded & parsed.
laterscript.load('myscript').then(function(scriptEl) {
console.log('script loaded!')
})The <laterscript> element is replaced with a <script> element, which gets parsed and loaded once it hits the DOM.
<script id="myscript" type="text/javascript" src="/path/to/file.js">
</script><html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/msmathers/laterscript@master/js/laterscript.js"></script>
<laterscript id="jqueryjs" type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></laterscript>
<laterscript id="usejquery" type="text/javascript">
$(document).ready(function() {
$('body').html('<h1>jQuery loaded!</h1>')
})
</laterscript>
</head>
<body>
<button id="load-query-btn">Load jQuery</button>
</body>
<script type="text/javascript">
(function() {
var btn = document.getElementById('load-query-btn');
btn.onclick = function() {
laterscript.load('jqueryjs')
.then(function() { laterscript.load('usejquery') })
}
})()
</script>
</html>