Change page content according to what URL is used to access your domain

Question

For ex: My website is www.mydomain.com

the only thing on the page is

<h1>Category</h1>

When a user types in the url www.mydomain.com/sports I would like for the page www.mydomain.com to load (with or without the /sports path, preferably keeping the same URL the whole time) and know that the user accessed the page using the url www.mydomain.com/sports to get there.

At which point, I could then use javascript to change

<h1>Category</h1>

to

<h1>Sports</h1>

I am able to redirect the page www.mydomain.com/sports to www.mydomain.com, but when doing this the URL changes and I can't detect the page URL that was used initially to navigate there (www.mydomain.com/sports) using javascript: http://www.w3schools.com/jsref/obj_location.asp since it returns the new page URL without the path.

Am hoping for a non PHP/.htaccess solution.

UPDATE:

I resorted to using htaccess to fix the problem, was easier than expected to implement.

Here's what I used in case someone else finds this useful

.htaccess file (upload to the directory on your site where you want it to be used, in my example, that would be the main directory)

<ifModule mod_rewrite.c>
RewriteEngine On 
RewriteBase / ****start at/find the root directory 
RewriteRule ^(/sports|sports/)$ index.html [NC,L] ****find and clear index.html from URL if the extension is mydomain.com/sports or mydomain.com/sports/
</ifModule>

Answer 1

Take a look at this plug-in. http://html5doctor.com/history-api/ History.js This plug-in allows you to push a new URL onto the history of the browser (in a cross-browser compatible fashion) without actually refreshing the page.

Therefore your approach would be as follows.

1. List item
2. On load, Get the window.location to get the "Sport"
3. Push the www.mydomain.com onto the history stack (using history.js)
4. Change the h1 to "Sport".

The only issue with this approach is that if someone tries to bookmark the page, it will not be the content that they encountered the last time they navigated to the URL. This however may be the point of what you're proposing in your question.

Answer 2

Your server-side code should use add a setCookie header having the value of the category that you want to display. Then your javascript code can get the cookie and set the field appropriately.