javascriptjquerylocalhosthostname

JavaScript to get localhost+htdocs folder

I have following url to be build,

http://localhost/myweb/cart/index.php

I want to get the http://localhost/myweb/ bit build dynamically.

To do that on my live web site which is http://www.myweb.com/cart/index.php I can use the following JavaScript code,

var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);

But how do I get my development environment to work since it has http://localhost/myweb/? If I run the above code it will give me http://localhost/ only.

Any suggestions?

Solution

  • window.location.pathname is the thing you search for.

    I would suggest you to read the MDN description of window.location. Like everything else in MDN, this is also really straightforward and informative.

    If you know that the URL has an unnecessary index.html part at the end you can:

    var path = window.location.pathname.split('/');
path.pop();
path.join('/');

    or you can slice it (since it is generally faster):

    path.slice(0,path.lastIndexOf('/')+1)

     

    EDIT:

    Seeing your new question I can say that what you want can't be done consistently and safely by only the current URL.

    You need the http://localhost/myweb/ part, which is the URL root of your application. In javascript you are able to get the protocol and domain of the url. On your live site these 2 match, but if your application resides in a subfolder (like the myweb folder at your localhost), this will fail.

    What you need is to somehow identify the application URL (the URL root of your application).

    The problem is that by only examining the URL, javascript cannot tell where your application resides.

    Let's say you deploy your site to: http://localhost/myweb/site1/

    You will have the following URL: http://localhost/myweb/site1/cart/index.php

    Javascript can split your URL by the slashes (/) but it has no way of nowing how many subfolders it should select. For example from the URL above your application root can be any of the following: http://localhost/, http://localhost/myweb/, http://localhost/myweb/site1/, http://localhost/myweb/site1/cart/.

    By an other approach (which I suggested first) you can drop the end of the URL (in your case the cart/index.php part). This will only work if your URL structure IS very rigid, so all the pages this script is executed on reside in one subfolder.

    So it will break on the following URL: http://localhost/myweb/site1/gallery/old/index.php or similar.

    Your best bet would be to make this a "config variable" in a separate file which you edit on every location it is deployed to.

    Either as a PHP variable ($appRoot = "http://localhost/myweb/") which you generate the javascript with.

    Or more simply a javascript variable (var appRoot = 'http://localhost/myweb/'). Make a separate js file, call it something like config.js, add the above line to it and reference it before your other javascripts.