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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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