如何防止 history.back() 到 return 回到外部网站？

Question

所以我正在尝试使用 onclick="history.back()" 制作后退按钮。但问题是，当我使用外部 link 进入我的网站并按下后退按钮时，它会将我带回到上一个外部页面。我知道它已被编程为这样做。但是有什么办法可以防止它把用户带回外部网站吗？

Answer 1

一种方法是在 sessionStorage 中存储您首次访问该页面时收到的 history.length 值。

然后您将在history.state中存储当前索引。一旦返回到初始索引，您将阻止历史记录返回。

// To be executed on all the pages of your domain

// check if we already saved it
let min_index = sessionStorage.getItem("minHistoryIndex");
// otherwise
if (min_index === null) {
  // store it
  min_index = history.length;
  sessionStorage.setItem("minHistoryIndex", min_index);
}
// first time we come to this history status
if (!history.state ) {
  history.replaceState({ index: history.length }, "");
}

const button = document.querySelector("button");
// if we reached the limit saved in sessionStorage
if (history.state.index === +min_index) {
  button.disabled = true;
  button.title = "Going back once more would take you out of our website";
}
else {
  button.onclick = (evt) => history.back();
}

Live demo - source

一个问题是，如果您的用户决定从您的页面转到另一个来源，然后手动返回到它，您可以返回到那个外部域，但我想这是一个极端情况多数情况下可以接受

如何防止 history.back() 到 return 回到外部网站？

How to prevent history.back() to return back to external website?

html

javascript

html5-history