CODEWITHSUNDEEP
javascripthtmlvariablesweb
John Smith
John Smith

Reputation: 11

Using url parameters for a page link

What I'm about to ask may sound stupid but I've been trying to figure it out for a few days now. I want to generate a link to a site:

example.github.io/Example/Example

That has a variable or something at the end of it

example.github.io/Example/ExampleVariable

and then read that variable as the page loads. In a perfect world it would look something like this:

http://Example.github.io/Example/Example<script>function(){}</script>

I also need to make sure that the page the user actually goes to or at least ends up on is the original link: i.e. example.github.io/Example/Example
Any help would be greatly appreciated.

Also if anyone is wondering.
Yes it is on github if that applies. I barely know PHP so that's not the best. It's for a ToDo list manager app I've made. There is a load function so users can share lists. The Load string (variable I'm trying to read) looks like this:
/LoadNAME#THEME#Item A,Item B,ect.

Upvotes: 1

Views: 1003

Answers (2)

Mi-Creativity
Mi-Creativity

Reputation: 9654

Alternatively, you can use this hash # old trick then after it use slashes

example.github.io/Example/#/var1/var2/var3

then using the window.location.href with couple split() uses will provide you with an array of parameters.

/* URL in address bar: 
   http://localhost/test/js-url-parameters/#/str1/str2/str3/
*/

var docURL = window.location.href,
  params = [];

// filter out the website origin "example.github.io" in the OP example      
docURL = docURL.replace(window.location.origin, '');

// if /#/ found then we have URL parameters
// grabbing the parameters part of the URL
if (docURL.indexOf('/#/') > -1) {
  docURL = docURL.split('/#/')[1];
  if (docURL != '') {

    // omit the last forward slash if exist
    if (docURL[docURL.length - 1] == '/') {
      docURL = docURL.substring(0, docURL.length - 1);
    }

    // split the URL final string o get an object with all params 
    params = docURL.split('/');
    console.log(params);
  }
} else {
  console.log('No URL parameters found');
}

/* Output: 
   ["str1", "str2", "str3"]
*/

enter image description here

UPDATE:

The above outputs all variables as string, so to retrieve numeric values you need to parseInt -or parseFloat() depending on your case.

For example, if for this URL:

http://localhost/test/js-url-parameters/#/str1/22/str3/

The above code will output ["str1", "22", "str3"], while we suppose to have 22 as integer, to fix this just add this:

// for each elements in params, if it is Not a Number (NaN) we return 
// it as it is, else it's a nubmer so we parseInt it then return it
for(var i in params){
    params[i] = isNaN(parseInt(params[i])) ? params[i] : parseInt(params[i]);
}

the above snippets go rights after the params = docURL.split('/'); line.

Now the URL:

http://localhost/test/js-url-parameters/#/str1/22/str3/ outputs ["str1", 22, "str3"], as you see now 22 is a number rather than a string.

enter image description here

Upvotes: 1

Jonathan
Jonathan

Reputation: 8891

If you're using github pages you could use URL parameters. In that case the url would look something like this: http://mypage.github.io/test/?myparam=value

Then you could query that with javascript and execute something based on that url parameters the url contains.

Upvotes: 1

Related Questions