4

To handle relative paths in a website I use a <base> tag added in the <head> of every page. All the resources loaded through a relative-like path in the documents are properly fetched and shown, however the browser (Chrome and Firefox in my trials) load every asset twice, one time with the real relative path (giving a 404 error) and a second time with the <base> tag appended before it.

I implement such tag with this script manually written in every html file:

<head>
    <script>
        /* Where am I? */
        here = window.location.href;
        hereIndex = here.indexOf('prd-ita'); //find path to main folder

        /* make substring from local root till prd-ita/ */
        newPathname = here.substring(0, hereIndex+10); //+8 to consdier also prd-ita/


        document.write('<base id="host" href="' +  newPathname  + '"/>');
    </script>

...
</head>

For instance and to clarify, my folder structure is for example:

  • prd-ita
    • index.html
    • folder1
      • file1.html
      • pic.jpg
      • subfolder2
        • file2.html

Regardless of which html file is loaded the generated href for the base tag is file:///D:/myWebsite/prd-ita/ and into file2.html I load a resource with the path src="folder1/pic.jpg".
From the inspecting tool I see that two loading attempts are made:

  1. Wrong path (real relative path interpreted) file:///D:/myWebsite/prd-ita/folder1/subfolder2/folder1/pic.jpg
  2. Correct path (base tag appended) file:///D:/myWebsite/prd-ita/folder1/pic.jpg

Before you ask I wont use the / to begin my relative paths because it is interpreted just as the drive letter where the file is located and I need the full path to the main prd-ita folder. I want to use only client side code (no php for example).

Maxiride
  • 187
  • 8
  • 1
    It's likely that the browser is loading the assets before the base tag is written by JavaScript (i.e. it loads them before **any** javascript is run), explaining the first 404 results. I wouldn't imagine using JavaScript to do this kind of thing is a good idea. – Liam May 12 '15 at 13:02
  • @Liam how could I do the same thing in a smarter way? Furthermore I cannot find a proper JavaScript way to put in standby the page loading to ensure this timing issue in loading doesn't occur. – Maxiride May 12 '15 at 13:12
  • There isn't much else you can do with client side code. It's just not designed to do this kind of thing. I'm not clear why you need absolute paths? I guess your on an intranet an your trying to serve some kind of content from the local machine, or something. In which case the real solution is to get your site to serve all it's own content though the server rather than trying to access drive letters, etc. – Liam May 12 '15 at 13:38
  • @Liam what I am trying to do is a reference browsable either online and offline for users who don't have an internet connection. To make the website navigable I made a menu.html containing a menu that is loaded with jquery into every html opened.The menu.html needs to have absolute paths, to work properly regardless of which file it gets included into. Hence since I do not know where they will place a download prd-ita.zip (containing all the needed files html, js scripts and css) the menu.html needs to have a base tag built based on where the folder is saved on a local machine. – Maxiride May 12 '15 at 13:49
  • @Maxiride got same errors. do you have solid solutions for this? can you please help me on https://stackoverflow.com/questions/48904888/chrome-console-error-when-using-base-tag-but-loading-assets-correctly – sgajera Feb 21 '18 at 12:50

1 Answers1

1

I was having this same problem and the solution that worked for me was to add the defer attribute on the script elements. This may not be ideal depending on your application, though.

From the Mozilla docs:

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed. Since this feature hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred. The defer attribute shouldn't be used on scripts that don't have the src attribute. Since Gecko 1.9.2, the defer attribute is ignored on scripts that don't have the src attribute. However, in Gecko 1.9.1 even inline scripts are deferred if the defer attribute is set.

smola
  • 51
  • 4