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");
}
};
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%20event%20loop%20is%20a,queue%20and%20the%20call%20stack.&text=In%20this%20example%2C%20the%20timeout,before%20the%20message%20%27Bye!%27), 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");
}
};
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!
try this:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Replace document</button>
<script>
function myFunction() {
location.replace("https:www.url.com")
}
</script>
</body>
</html>