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"

Comments

  1. User Avatar
    Brian Lang
    Permalink to comment#

    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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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.

    • User Avatar
      Abhisek
      Permalink to comment#

      Any workaround?

    • User Avatar
      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. User Avatar
    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. User Avatar
    Artur Ejsmont
    Permalink to comment#

    It will aslo include request arguments and the hash like

    inde.php?s=products#data-tab

    art

  4. User Avatar
    ενυδρεια
    Permalink to comment#

    where is the tutorial???

  5. User Avatar
    Klimatistika

    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. User Avatar
    James

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag