Javascript URL Variable Checker

JavaScript
1

Hi there,

I a, developing a site that has an auto-redirect on page load whereby it loops through a sequence of pages. This works perfectly. I also have a link I click to stop the auto-redirect. The auto-redirect uses a function called redirTimer() and the “stop” link calls a function called stopredir() - The latter also adds a suffix to the URL of the “Next Page” link so it changes the hyperlink from example.com/page2 to example.com/page2&noslide - Both of these functions work perfectly.

What I need to do now, also on page load, is check for that &noslide variable so I can call the stopredir() function right away if it exists. I don’t want the user to have to click the stop button again if they already clicked it on the previous page. I have got a noslide() function to check for this but it isn’t working.

When my page loads, I am calling the noslide() function after the redirTimer() function.

Here is the full javascript:



redirTime = "5000";
redirURL = "example.com";

 function redirTimer()
  {
    settime=self.setTimeout("self.location.href = redirURL;",redirTime);
    document.getElementById('slideshow').innerHTML='<a href=# onclick="stopredir()">Stop Slideshow</a>';
  }

      function stopredir(){
        window.clearTimeout(settime);
        document.getElementById('slideshow').innerHTML='<a href=# onclick="redirTimer()">Start Slideshow</a>';
        document.getElementById('next-nav').innerHTML='<a class="next-link" href="example.com&noslide">NEXT</a>';
  }

function noslide()
 {
    if (Request.QueryString["noslide"])
 {
    stopredir()
 }

}

function start(){
    redirTimer();
    noslide();
}



<body onload="start()">

The redirTimer() still starts up automatically, even if it was stopped on the previous page.

I have checked and the variable has been added to the end of the URL and the redirect was stopped when I clicked it. So the noslide() function is clearly not working.

Please can somebody tell me what I am doing wrong?

2

Your URL structure isn’t quite correct. When you link to a place using an <a> tag, you need to also specify the protocol (e.g. http:// or ftp:// ). When you want to add a query string to a URL, you need to start the query string with a question mark subsequent variables can then be separated by an ampersand.

So, your link for next-nav would then end up looking like

<a class="next-link" href="http://example.com?noslide=true">NEXT</a>

Next up, the way to get URL parameters in JavaScript doesn’t have a nice built-in method like .NET for example, but a simple helper function can make it pretty easy :slight_smile:


// https://snipt.net/geekyjohn/get-url-param/
function getUrlParam(name){
    var results = new RegExp('[\\\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (!results) { return undefined; }
    return results[1] || undefined;
}

//you can call this to find a parameter in a URL string:
var noslide = getUrlParam("noslide");
3

Hi. Thanks for the pointers.

How do I go on to write the conditional scripting in. Once I have the parameter. How do I say “if noslide is true execute stopredir()” ?

4

You can continue to use your noslide() function for this but instead of the current if statement, check if noslide === “true” 

function noslide() {
    if (getUrlParam("noslide") === "true") { //URL params will always be a string
        stopredir()
    }
}
5

could also, on page load,

function yourListener(event) {
if (window.location.href.match(/noslide$/)) {
screwWithAnchors();
}
else runCarouselStuff();
}

function screwWithAnchors () {
//I’m lazy… get all anchors, loop through them, take their href attribute and append the string “?noslide”, or #noslide should be fine too
//have an id on the one anchor that turns the automation back on again
//have your loop above test for it first before appending ?noslide
}

Something like that.

In other words, always check for noslide before running the redirect/carousel/whatever thing, and only if it’s safe, run it. You’d still have a stop() for when people have started out with it running and want to stop it with a button click, and it would also call screwWithAnchors, but I like the idea of very first thing JS checking what the user did before running stuff.

You might have found what didn’t work if you’d taken your
if (Request.QueryString[“noslide”])
and turned it into an alert to see if “noslide” was being seen by JS. Alert is the poor man’s debugger but it’s pretty regular by me to check everything. I expect some value, but I’d better check the value actually gets seen or that I didn’t typo or something.
cuz I always typo or something