Changing window.location to redirect to another path causes an infinite loop

Question

I have a simple asp .NET project in visual studio 2022 which I am using for basic html and JavaScript. My project is a Hangman game with two html pages so far. Each page has a button to get to the other page:

<button class="sideMenu" onclick="load()">New Game</button>
<button class="sideMenu" onclick="leaderBoard()">Leader Board</button>

the functions load() and leaderboard() that are launched when the buttons are clicked should redirect to the correct path using: location.href = "/path"

the problem is when I use this, every time I launch either one of the pages it runs into an infinite loop and keeps reloading itself until I get this error in the developer tools (I'm using chrome):

play.js:90 Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

I tried some of the options (that don't include Jquery) I saw here: How do I redirect to another webpage? but they all cause the same problem.

these are my functions:

the load function: which loads a new game

function load() {
  location.href='/index.html'
  mistakes = 1;
  guess = 0;
  guessWord = [];
  keyboard = document.getElementById("keyboard")
  keyboard.innerHTML = "";
  for (i = 0; i < letters.length; i++) {
      keyboard.innerHTML += "<button style='width:50px; height:50px; margin:5px;'class='letter' id='" + letters[i] + "' onclick='show(this)'>" + letters[i] + "</button>";
  }
  num = Math.round(Math.random() * (words.length - 1))
  word = words[num]

  for (i = 0; i < word.length; i++) {
      guessWord[i] = " ";
  }
  screen = document.getElementById("screen")
  screen.innerHTML = "";
  for (i = 0; i < word.length; i++) {
      screen.innerHTML += "<div class='text' id='text " + i + "'> </div>"
  }
  document.getElementById("tries").innerHTML = "guesses: " + guess + ", mistakes: " +(mistakes-1);}

and the leaderboard function that shows the leaderboard:

function leaderBoard() {
    this.router.navigateByUrl('/scores.html')
    board = document.getElementById("board")
    if (scores.length < 1) {
        board.innerHTML = "NO SCORES FOUND"
    }
    else {
        for (i = 0; i < scores.length; i++) {
            board.innerHTML += "</ br> player: " + scores[i][0] + " word: " + scores[i][0] + + "guesses: " + scores[i][2] + " mistakes: " + scores[i][3];
        }
    }

}

score 0 · Answer 1 · answered May 12 '23 at 13:50

You use different navigation approaches in the both functions which isnt good. Use windows.history.pushState() to change your url or your router. window.addEventListener("popstate", ...) - react to your navigation here if you use pushState()

Also don't forget server site URL handling.

Changing window.location to redirect to another path causes an infinite loop

1 Answers1