Grow your CSS skills. Land your dream job.

Last updated on:

Current Page with JavaScript

This is like a replacement for PHP's SCRIPT_NAME with JavaScript.

location.href.split('/').pop();

For example with this URL:

http://css-tricks.com/examples/ScriptName/index.php

This code:

document.write( location.href.split('/').pop() );

Would write to the page: "index.php"

Reference URL

Comments

  1. There’s a significant problem with this snippet:

    If you change the example page to:

    http://css-tricks.com/examples/ScriptName/

    You will see that NOTHING is returned. So if you’re writing code that relies on ‘index.php’ being returned, your code will not execute.

    • That’s right. It would only be really useful if you were running a web app that enforced URLs in a strict way so there wasn’t any possibility of multiple URL’s going to the same place.

    • Abhisek
      Permalink to comment#

      Any workaround?

    • YepoMax

      Indeed, any .httaccess URL rewriting will make this snippet not to work. The most common URL rewriting is the index.php or index.html being erased.

      It works for http://css-tricks.com/examples/ScriptName/index.php but URL are often rewritten this way :

      http://css-tricks.com/examples/ScriptName/

      And in the “worst” case, there are even arguments and reference to html element :

      http://css-tricks.com/examples/ScriptName/?arg=value#myDiv

      There’s NO way to really know what page was really requested on server since the URL rewriting is server-side and Javascript is client-side. However, if you assume a very common server with common url rewriting, you can tell that an url that ends with “/” is probably a page named index.php

      Here’s a code that works for any of those urls (including the original one) :

      var urlsplit = location.href.split("/");
      var scriptName = urlsplit.pop().split("?")[0].split("#")[0] || "index.php";
      

      Just keep in mind that it is not rare that the URL doesn’t reflect what script was executed server-side.

  2. Stuart

    Chris is there away to have more than 2 scripts on a page .I had a Accordion rotation, and a drop-down
    Apple style Navigation bar both worked
    but i didn’t have any page scroll bar so i couldn’t look at the content. I have been learning this for about a week
    so i am not great at JavaScript. So how would i go about it? I make most of my sites in Dreamweaver
    so after my mock up i save as a template.
    Is it still possible to put more scripts on still.
    is there a hack ? Not sure what to do .Thanks

  3. It will aslo include request arguments and the hash like

    inde.php?s=products#data-tab

    art

  4. where is the tutorial???

  5. This is an old link that needs a refresh? Hey Chris thank you for your hard work, i have use many of your tips.

  6. Is this working on WordPress sites? And what is the function of the tip?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".