How to redirect to another page when reloaded in Javascript?-CodePudding

i have created a variable holding the current location of the page and comparing it to other and reloads the page but the problem is it looks big and it's not so efficient enough as i reload the page is taking some time to show the another webpage

// let Storynumber = ["story1.html", "story2.html", "story3.html"];

let currentLocation = window.location;
var i;

window.onbeforeunload = function () {
  if (currentLocation.pathname == "/HTML/story1.html") {
    window.setTimeout(function () {
      window.location.replace("http://127.0.0.1:5500/HTML/story2.html");
      console.log("Working");
  });
    window.onbeforeunload = null; // necessary to prevent infinite loop, that kills your browser
  } else if (currentLocation.pathname == "/HTML/story2.html") {
    window.setTimeout(function () {
      window.location.replace("http://127.0.0.1:5500/HTML/story3.html");
      console.log("Working");
    });
    window.onbeforeunload = null;
  } else if (currentLocation.pathname == "/HTML/story3.html") {
    window.setTimeout(function () {
      window.location.replace("http://127.0.0.1:5500/HTML/story1.html");
      console.log("Working");
    });
    window.onbeforeunload = null;
  } else {
    console.log("same page cant be reloaded");
  }
};

CodePudding user response：

to eliminate delays, I advise you to delete the window.settimeout() methods , look the event loop javascript I leave you the link here (https://www.javascripttutorial.net/javascript-event-loop/#:~:text=The event loop is a,queue and the call stack.&text=In this example, the timeout,before the message 'Bye!'), try with this code :

 // let Storynumber = ["story1.html", "story2.html", "story3.html"];

let currentLocation = window.location;
var i;

window.onbeforeunload = function () {
  if (currentLocation.pathname == "/HTML/story1.html") {
      window.location.replace("http://127.0.0.1:5500/HTML/story2.html");
      console.log("Working");
    window.onbeforeunload = null; // necessary to prevent infinite loop, that kills your browser
  } else if (currentLocation.pathname == "/HTML/story2.html") {
      window.location.replace("http://127.0.0.1:5500/HTML/story3.html");
      console.log("Working");
    window.onbeforeunload = null;
  } else if (currentLocation.pathname == "/HTML/story3.html") {
      window.location.replace("http://127.0.0.1:5500/HTML/story1.html");
      console.log("Working");
    window.onbeforeunload = null;
  } else {
    console.log("same page cant be reloaded");
  }
};

CodePudding user response：

I can see from your commented out code that you've tried to refactor the conditional statements into an array lookup, so I've gone down this angle.

I'd also recommend using addEventListener instead of directly overwriting onbeforeunload in case you need to bind multiple events.

I'm working under the assumption that your site is running on 127.0.0.1:5500, and that all the pages are stored in the same directory

As @salvo720 pointed out in their answer, setTimeout is unnecessary in this case and could also be leading to delays.

I'd suggest something similar to this:

//array containing our pages
const pages = ["story1.html", "story2.html", "story3.html"];

function redirectToNextPage(){
    //get the current page - this grabs just the last part of the URL (e.g. "story1.html" instead of "HTML/story1.html"
    const curr = window.location.pathname.split('/').pop();

    //work out which page we're on - if curr is "story1.html", this is 0, if curr is "story2.html" this is 1, etc. If it doesn't match, this is -1
    let index = pages.indexOf(curr);

    if(index < 0 || index >= pages.length){ //if we're either non-matching or on the last element
        index = 0; //reset to the first one
    } else {
        index  ; //go to the next one
    }

    window.removeEventListener('beforeunload', redirectToNextPage); //remove event listener
    window.location.replace(pages[index]); //do the redirect to the next page
});

window.addEventListener('beforeunload', redirectToNextPage);

That way, when you need to add "story4.html", you can just add it to your pages array

Something I would question is the use of the beforeunload event to redirect the page, but if it works for you then it works for you!

CodePudding user response：

try this:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Replace document</button>

<script>
function myFunction() {
  location.replace("https:www.url.com")
}
</script>

</body>
</html>