Relative file path not working in JavaScript

Question

I am trying to make pages load faster by including in-line css for above the fold code. This works for pages held in the root directory, but I have a problem with loading the rest of the CSS file at the end of the pages that are in sub folders (i.e http://example.com/other/index.html).

If the current file is in the root folder the following code works fine:

   <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

but if the current file is in a sub folder the following code does not work:

 <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = '../css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

Also, if I try an absolute path it also does not work:

   <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'http://example.com/css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

The relative location of the file is correct because if I have the following line in the head of the document:

<link href="../css/a1tg2.css" rel="stylesheet" type="text/css">

It also works fine, but I don't want to use that as it slows down the rendering of the page. I am not proficient with JavaScript, just getting the code required from an on-line critical path CSS generator. Can anyone offer a solution please, as none of the similar questions on this site have a satisfactory answer.

Acutally you should rethink why you cant use the link attribute in your code. This should normally not slow down your rendering ... — Mario Murrent, Apr 04 '18 at 12:36
Possible duplicate of [Replacing css file on the fly (and apply the new style to the page)](https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page) — Mario Murrent, Apr 04 '18 at 12:40
@lightstalker89 Google Pagespeed insights says: "Eliminate render-blocking JavaScript and CSS in above-the-fold content", which is why I am not using the link attribute :-) — Tog Porter, Apr 04 '18 at 12:44
@lightstalker89. That possible question you cited has no reference to relative paths, therefore this is not a duplicate. My qustion relates to finding out why relative path does not work. — Tog Porter, Apr 04 '18 at 12:46

score 0 · Answer 1 · answered Apr 04 '18 at 15:29

check the link of the html file generated and use a path relative to that page. For example: If your directory structure is:

 - css
    - a1tg2.css
- pages
   - header.php
   - footer.php
- index.php

If you are including header.php inside index.php, the relative path of the css file in header.php should be css/a1tg2.css and not ../css/a1tg2.css

Relative file path not working in JavaScript

1 Answers1