ARTICLE AD BOX
I am rewriting my website. I have decided upon a structure for its directories, which on my local drive, appears as:
Additional directories will be created to contain specific content (e.g., Tools, Toolbox Components, etc.). Each HTML file in these directories needs to reference the same script, css, and image directories as does gggustafson.html. What I think I need is some kind of base URL that I can prepend to the href attribute for <link>s and to the src attribute for <script>s. In the current case, I need the base to be "file:///C:/Gustafson/Website". When the code is place into the website server, I need the base to be "https://Website"/
When I have finished development, I will copy the directory Website to my hosted website. However before I do that, the local version (on my local machine) must be free of errors.
In adding directories and pages, I still need to access files that are at the Website level. And because I do not want to be restricted in directory structure (which would occur without a base URL) nor forced into using complex relative paths (that are dependent upon file position within the website structure), I need a mechanism to define the topmost directory of the website. The two ways of which I am aware are using the website absolute root and using >base>. Using causes significant issues when a webpage contains an anchor element that makes reference to some portion internal to the document like . Because many of my pages contain links to elements on the same page, I cannot use the <base> element.
I tried to use the root, I received the error message "Loading failed for the <script> with source 'file:///scripts/global.js'". Although root would work on the server side website, it obviously will not work on the local machine.
Because there appears to be no way to define the root, I am trying to use a global template variable, defined within an Immediately Invoked Function Expression.
( async ( ) => { const url = document.documentURI; const index = url.lastIndexOf ( "/" ); window.baseUrl = url.substring ( 0, index ); console.log(`${baseUrl}`); }) ( ); : <script src="baseUrl/scripts/global.js"></script> <script> window.onload = function ( ) { Global.initialize_globals ( ); }; </script>Unfortunately, the console log displays "Loading failed for the with source 'file:///C:/Gustafson/Website/baseUrl/scripts/global.js' which causes "Uncaught ReferenceError: Global is not defined".
I am surprised that "baseUrl" appears in the filename. How do I get rid of it?
