CODEWITHSUNDEEP
javascripthtml
trap
trap

Reputation: 2640

How to use the absolute path in the head

Is there a way to get the absoulte path in the head of html?

I want to use for the absoulte path a variable. I did not find anything for this case. Is something like this possible?

 <!-- Bootstrap Core CSS -->
<link href="{absolutePATH}/css/bootstrap.min.css" rel="stylesheet">

...
<body> 
<script> var absolutePATH = windows.location.href;</script>

I don´t know how can I put the var in the head. Normally we can use document.write...But in the head? There is no value, or id in the link tag.

thanks!

Upvotes: 1

Views: 1555

Answers (3)

GibboK
GibboK

Reputation: 73908

You can use a slash (/) to references the root directory.

  <head>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
  </head>

Here a list as quick reference:

   /   = Root directory
   .   = This location
   ..  = Up a directory
   ./  = Current directory
   ../ = Parent of current directory
   ../../ = Two directories backwards

If you need a client side solution in ES6 you can use this code:

  var path = window.location.href,
      sourceNode = document.createElement('link');
  sourceNode.rel = "stylesheet"; 
  sourceNode.href(`${path}/css/bootstrap.min.css`);
  document.head.appendChild(sourceNode);

Upvotes: 1

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

You can load this CSS manually:

<html>
  <head>
    <script>
      var absolutePath = window.location.href;

      var link = document.createElement('link');
      link.rel = "stylesheet";
      link.href = absolutePath + "/css/bootstrap.min.css";
      document.head.appendChild(link);
    </script>
  </head>

Note that it will create an element targeting /css/bootstrap.min.css file, relative to the current page.

For example, if you execute this code at this page, it will try to load http://stackoverflow.com/questions/38993155/how-to-use-the-absolute-path-in-the-head/38993218/css/bootstrap.min.css.

If you want to load it using absolute path from web-site root, then simply use /css/bootstrap.min.css URL.

Upvotes: 0

Shaig Khaligli
Shaig Khaligli

Reputation: 5485

You don't need absolute path anymore, / will do the trick 

   <link href="/css/bootstrap.min.css" rel="stylesheet">

Upvotes: 1

Related Questions