how to get the base url in javascript

Question

I am building a website with CodeIgniter  I have various resources that I load with the base url helper function like this    lt link rel  stylesheet  type  text css  href    base url  assets css themes default css      id  style color   gt   which produces  i e  www mysite com    lt link rel  stylesheet  type  text css  href  http   www mysite com assets css themes default css  id  style color   gt   I can then swap this resource with another in javascript like this      style color   attr  href    assets css themes     color      css     what happens is that it will try to load the resource without using the absolute path generated by php  so my solution was adding a dummy tag in every page with php like this   lt div id  base url  class    base url      gt  lt  div gt   I then modified the javascript line to      style color   attr  href       base url   attr  class      assets css themes     color      css     it does work but it doesn t look elegant at all  so  I would appreciate any help on how to maybe generate this base url from within javascript or any other solution  thanks       I preferred a Javascript only solution and since I am using CodeIgniter  a document base url variable with the segments of the url from the protocol to the index php seemed handy  document base url   base url  index php     with the function base url   being  function base url segment         get the segments    pathArray   window location pathname split               find where the segment is located    indexOfSegment   pathArray indexOf segment         make base url be the origin plus the path to the segment    return window location origin   pathArray slice 0 indexOfSegment  join

User · Accepted Answer

Base URL in JavaScript

You can access the current url quite easily in JavaScript with window.location

You have access to the segments of that URL via this locations object. For example:

// This article:
// https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript

var base_url = window.location.origin;
// "http://stackoverflow.com"

var host = window.location.host;
// stackoverflow.com

var pathArray = window.location.pathname.split( '/' );
// ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]

In Chrome Dev Tools, you can simply enter window.location in your console and it will return all of the available properties.

Further reading is available on this Stack Overflow thread

User · Answer

var baseTags   document getElementsByTagName  base    var basePath   baseTags length        baseTags  0   href substr  location origin length  999

User · Answer

Base URL in JavaScript  Here is simple function for your project to get base URL in JavaScript      base url function base url         var pathparts   location pathname split           if  location host     localhost             var url   location origin     pathparts 1  trim              http   localhost myproject       else          var url   location origin     http   stackoverflow com           return url

User · Answer

in resources views layouts app blade php file   lt script type  text javascript  gt      var baseUrl     lt   url       gt     lt  script gt

User · Answer

One way is to use a script tag to import the variables you want to your views    lt script type  text javascript  gt  window base url    lt  php echo json encode base url       gt    lt  script gt    Here  I wrapped the base url with json encode so that it ll automatically escape any characters to valid Javascript  I put base url to the global Window so you can use it anywhere just by calling base url  but make sure to put the script tag above any Javascript that calls it  With your given example           style color   attr  href   base url    assets css themes     color      css

User · Answer

This is done simply by doing this variable   var base url     lt  php echo base url     gt     This will have base url now  And now make a javascript  function that will use this variable  function base url string       return base url   string      And now this will always use the correct path   var path         assets css themes     color      css      style color   attr  href   base url path

User · Answer

I may be late but for all the Future geeks  Firstly i suppose you want to call base url in your  js file  so lets consider you are calling it on below sample  js file  sample js   var str     this  serialize      jQuery ajax   type   POST   url  base url    index php sample controller   dataType   json   data  str  success  function result    alert  Success        In the above there is no base url assigned Therefore the code wont be working properly  But it is for sure that you ll be calling the  js in between   lt head gt  lt  head gt  or  lt body gt  lt  body gt of View file by using  lt script gt   lt  script gt  tag   So to call base url in js file  we have to write the below code where you plan to call the  js file  And it is recommended that you create common header file and place the below code and all the calling style sheets   css  and javascript   js  file there  just like below example   common header file   lt head gt    lt link href  http   fonts googleapis com css family Source Sans Pro Open Sans Condensed 300 Raleway  rel  stylesheet  type  text css  gt   lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt    lt link rel  stylesheet  type  text css  href   lt  php echo base url      gt assets js sample js  gt    lt script gt    var base url     lt  php echo base url      gt       lt  script gt     lt  head gt    Now the base url will work in sample js file as well  Hope it helped

User · Answer

Should you want what is exactly specified in the web page  just use   document querySelector  head base    href

User · Answer

You can make PHP and JavaScript work together by generating the following line in each page template    lt script gt  document mybaseurl   lt  php echo base url  assets css themes default css     gt     lt  script gt    Then you can refer to document mybaseurl anywhere in your JavaScript  This saves you some debugging and complexity because this variable is always consistent with the PHP calculation

User · Answer

Let s say you have your global scripts file and you don t want to define that URL repeatedly in other files  That s the point where BASE URL kicks in  In your global script js file  do this  lt script gt   var BASE URL    quot http   localhost 8000 quot    lt  script gt   Then you can use that variable anywhere else to call your URL  For example     lt script gt     fetch    BASE URL   task-create                                                     then  response    gt                                     lt  script gt

User · Answer

To get exactly the same thing as base url of codeigniter  you can do   var base url   window location origin         window location pathname split        1           this will be more useful if you work on pure Javascript file

[javascript] how to get the base url in javascript

Base URL in JavaScript

Examples related to javascript

Examples related to php

Examples related to html

Examples related to css

Examples related to codeigniter