I’m trying to extract hash substring values from window.location and write them into HTML for the user to see, with an URL syntax that disallows use of ? as query string delimiter.
So I am working with this simple page:
<html>
<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function() {
$('#test').click(function() {
window.location = (window.location);
GetURLParameter('source');
});
});
function GetURLParameter(sParam) {
var sPageURL = window.location.hash.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
alert(sParameterName[1]);
return sParameterName[1];
}
}
}
</script>
</html>
I call the page with an URL that looks like this, this the client window.location:
http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED
I want to write FOO, BAR, FRED into the page, so the user can see it.
(notice no ? in the URL as query string delimiter, just #)
… On input button click, I get a successful alert (as expected) that shows the source “FOO” from the URL. Great.
But how do I get the other two SParamaterNames, and then how do I write them into the page as HTML for the user to see, rather than return an alert?
UPDATE UPDATE UPDATE (below)
Thanks, @sam-baker!! … Great answer. I used your first example, but changed the first two lines in your code to $(window).load(function() { so that the script runs onload, which was my intent.
So, I am still using this same URL:
http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED
But I want to insert the hash substring values into hardcoded HTML, like this:
<body>
<span class="style1">$need_source_value_here</span><br />
<span class="style1">$need_medium_value_here</span><br />
<span class="style3">$need_campaign_value_here</span><br />
I will style each value individually, by hardcoding span or div styles into the HTML.
UPDATE UPDATE UPDATE
Here’s the solution:
Hit the following simple page in the code example bellow with this URL syntax, and it will output the substring vars to the user, onload, wherever you want them on the page.
http://example.com/pagename.html#dyntext=FOO+MAN+CHU&dynterm=BAR+HOPPING&dynimage=FRED+IS+DEAD
<html>
<body>
<span id="dyntext-span" style="font-weight: bold;"></span><br />
<span id="dynterm-span" style="font-style: italic;"></span><br />
<span id="dynimage-span" style="text-decoration: underline;"></span><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
var tags = ["dyntext", "dynterm", "dynimage"];
for (var i = 0; i < tags.length; ++i) {
var param = GetURLParameter(tags[i]);
if (param) {
var dyntext = GetURLParameter('dyntext');
var dynterm = GetURLParameter('dynterm');
var dynimage = GetURLParameter('dynimage');
}
}
var elem = document.getElementById("dyntext-span");
var text = document.createTextNode(dyntext);
elem.appendChild(text);
var elem = document.getElementById("dynterm-span");
var text = document.createTextNode(dynterm);
elem.appendChild(text);
var elem = document.getElementById("dynimage-span");
var text = document.createTextNode(dynimage);
elem.appendChild(text);
});
function GetURLParameter(sParam) {
var sPageURL = window.location.hash.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
</script>
</body>
</html>
Had some crossbroswer issues because innerText is not supported by Firefox, did not want to deal with cross-browser fallback to textContent, etc, so just walked DOM tree and created text nodes, replacing the + unicode character with space. Hope this is useful to you!
You’re only requesting the first of the 3 parameters using:
If you want all 3 parameters and you know the names, you can use:
To add those vars to the page, you can insert them in divs like this:
That version queries each of the 3 tags and creates a new div in the page for that tag with the tag’s value as the content.
It also adds a CSS class, query-string-param to those divs so that you can style the text – presumably you’ll want to do that, and add more HTML to each div since it’s not clear why that text is displayed.
If you don’t know the query string keys upfront (source, medium and campaign), you could use a function I created, GetAllURLParameters that returns an array of objects with both the key (“source”) and the value (“FOO”) for each param.
That would look like this:
Which then shows the names and values of all query parameters.
UPDATE
Since you already have hardcoded HTML that looks like this:
The easiest way to insert your values would be to add an id to each of those spans:
Then after you query the parameters, you can insert them like this: