I would like to collect all my javscript links to one javascript and only include this to all my html files.
I got it working with:
document.write('<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js" ></script>');
...
...
But I get warnings: A parser-blocking, cross site (i.e. different eTLD+1) script, , is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See for more details.
What are the alternatives to document.write? I have been seraching but I can not find a solution.
I have a small example:
Main file
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<!-- No error
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script> -->
<!-- Error -->
<script type="text/javascript" src="test.js"></script>
<script>
$(function() {
console.log("SCRIPT FUNCTION");
});
</script>
</html>
test.js
var x = document.createElement('script');
x.src = 'https://code.jquery.com/jquery-3.5.1.js';
document.getElementsByTagName("head")[0].appendChild(x);
With the jquery script declared in the html file in works by when I try to add the jquery file in test.js I get the error: test.html:20 Uncaught ReferenceError: $ is not defined
What is wrong with the code when I try to add the js file instead of declare it in the html file?
With document.write the js files are loaded direct? And with append they will not load until later?