How to immediately redirect using JavaScript

Question

How can I get javascript to immediately stop script execution and change to another page. Consider this:

<html>
<head>
    <script>
        function onload()
            {
                alert('before');
                window.location.href = 'http://google.com';
                alert('after redirect');
            }
    </script>
</head>
<body onload="onload();">
    Hello World!
</body>
</html>

The second alert message always fires.

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — mhrabiee, Dec 04 '19 at 11:11

Farhan · Answer 1 · 2020-04-17T13:50:06.580

2

Try to return value from the first function and if a user logged in return true. I hope this will help you.

function init() {
  if(checkIfLoggedIn()) {
    getUserInfo(); // I would expect this to not run if the user was not logged in
  }
}

function checkIfLoggedIn() {
  if(loggedIn() === false) {
    window.location.href = "/login.html";
  } else {
    return true;
  }
}

function getUserInfo() {
  var username = getUsername(); // throws exception if not logged in
  var email = getEmail(); // throws exception if not logged in
  // etc. etc.
}

edited Apr 17 '20 at 13:50

answered Mar 19 '18 at 18:39

Farhan

1,453
2
15
20

I agree with you that this would be an ideal quick fix, but as mentioned in my question, I can't litter my code with if(checkIfLoggedIn()) ~my actual code is way more complicated that the above simplified example, instead I need the page to stop executing, my question was: is there a version of redirect that does this? – Kyle B Mar 20 '18 at 12:49
1

Is it possible to use a meta refresh? This will immediately redirect the page and halt further code from running. This is not a JavaScript solution so will this work? Place this in the head of your HTML page: `` – travelsize Mar 20 '18 at 13:50
@KyleB i understand your point, but i believe code is immediate calling 2nd function to get user profile detail so there should be condition when to check profile info. – Farhan Mar 20 '18 at 17:00

score 1 · Answer 2 · answered Mar 19 '18 at 18:45

You are calling getUserInfo() with no conditionals around it. So this function will be called when the page loads, as you have placed no restrictions on this function call. Hence, code is still running.

Perhaps this is what is intended in the first block of your snippet:

if(checkIfLoggedIn()) {
    getUserInfo();
}

This way, getUserInfo will only be called if checkIfLoggedIn returns true. The way you have written it, getUserInfo is also running when the page loads.

score 1 · Answer 3 · answered Mar 20 '18 at 23:29

If you don't want to litter your code you can break all the rules and use an exception:

function init()
{
  checkIfLoggedIn();
  getUserInfo(); // I would expect this to not run if the user was not logged in
}

function checkIfLoggedIn()
{
  if(loggedIn() === false) {
    window.location.href = "/login.html";
    throw new Error('Kill all code running after me');
  }
}

function getUserInfo()
{
  var username = getUsername(); // throws exception if not logged in
  var email = getEmail(); // throws exception if not logged in
  // etc. etc.
}

function loggedIn() {
  return false;
}


init();

The thrown exception will prevent all of the rest of the code from executing.

OK. It is ugly and breaks so many best practice rules. But it should work.

Or you can use exception handling around the other code:

function init()
{
  checkIfLoggedIn();
  getUserInfo(); // I would expect this to not run if the user was not logged in
}

function checkIfLoggedIn()
{
  if(loggedIn() === false)
    window.location.href = "/login.html";
}

function getUserInfo()
{
  try {
    var username = getUsername();
    var email = getEmail();
    // etc. etc.
  }

  catch(ex) {
    // Don't do anything here unless you really need to
  }
}

function loggedIn() {
  return false;
}


init();

score 0 · Accepted Answer · answered Jun 26 '18 at 17:29

I came across the answer today while I was looking for something else:

Even though window.location.href has been set and the window is in the middle of redirecting, code execution continues in most browsers:

function onload()
{
    console.log('before');
    window.location.href = 'newpage.html';
    console.log('after redirect 1');
    console.log('after redirect 2');
    console.log('after redirect 3');
}

after redirect 1, after redirect 2, & after redirect 3 still log to the console even though the page is being redirected. However, since init() is a top level function, I can return; from the function and stop code from continuing to execute..

  <script>
    function init()
    {
      if(checkIfLoggedIn() === false)
          return; // <-- stops following code from executing and allows return to proceed

      getUserInfo();
    }

    function checkIfLoggedIn()
    {
      var loggedIn = loggedIn();
      if(loggedIn === false)
        window.location.href = "/login.html";
      return loggedIn;
    }

    ...
  </script>
</head>
<body onload="init()">
  ...

How to immediately redirect using JavaScript

4 Answers4