如何在 Javascript 中重新加载时重定向到另一个页面？

Question

我创建了一个变量来保存页面的当前位置并将其与其他页面进行比较并重新加载页面但问题是它看起来很大并且效率不够高因为我重新加载页面需要一些时间才能显示另一个网页

// 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");
  }
};

Answer 1

试试这个：

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Answer 2

为了消除延迟，我建议你删除 window.settimeout() 方法，查看事件循环 javascript 我把 link 留给你 (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) ，尝试使用此代码：

 // 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");
  }
};

Answer 3

从你注释掉的代码中我可以看出你试图将条件语句重构为数组查找，所以我从这个角度来看。

如果您需要绑定多个事件，我还建议使用 addEventListener 而不是直接覆盖 onbeforeunload。

我假设您的站点在 127.0.0.1:5500 上运行，并且所有页面都存储在同一目录中

正如@salvo720 在他们的回答中指出的那样，setTimeout 在这种情况下是不必要的，也可能导致延迟。

我建议类似这样：

//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);

这样，当您需要添加“story4.html”时，只需将其添加到您的 pages 数组

我想问的是使用 beforeunload 事件重定向页面，但如果它适合你，那么它也适合你！

如何在 Javascript 中重新加载时重定向到另一个页面？

How to redirect to another page when reloaded in Javascript?

html

javascript