我已经为这个需求挣扎了很长一段时间，并采用了上面的一些解决方案来实现它。然而，我偶然发现，它似乎可以在Chrome、Firefox和Safari浏览器以及Android和iPhone上运行

页面加载:

window.history.pushState({page: 1}, "", "");

window.onpopstate = function(event) {

  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 

  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

如果有帮助请告诉我。如果我错过了什么，我会很高兴去理解。

if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
  alert('hello world');
}

这是唯一一个解决方案，为我工作(这不是一个一页网站)。 它支持Chrome、Firefox和Safari浏览器。

正确答案已经在那里了。我想提一下新的JavaScript API PerformanceNavigationTiming，它取代了过时的performance。navigation。

下面的代码将登录控制台“back_forward”如果用户登陆到您的页面使用后退或前进按钮。在项目中使用兼容性表之前，请先查看兼容性表。

var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) {
    console.log(perfEntries[i].type);
}

这将肯定工作(用于检测返回按钮点击)

$(window).on('popstate', function(event) {
 alert("pop");
});

浏览器会发出popstate事件，如果你通过你的应用程序调用导航

window.history.pushState({},'','/to')

如果您手动在地址栏中输入地址并单击后退按钮，popstate事件将不会被触发。

如果你用这个简化的功能在应用中导航

const navigate = (to) => {
    window.history.pushState({}, ",", to);
  };

这样就可以了

const handlePopstate = () => {
  console.log("popped");
};
window.addEventListener("popstate", handlePopstate);

Kotlin/JS (React)的解决方案:

import org.w3c.dom.events.Event
import kotlin.browser.document
import kotlin.browser.window

...
override fun componentDidMount() {
    window.history.pushState(null, document.title, window.location.href)
    window.addEventListener("popstate", actionHandler)
}
...
val actionHandler: (Event?) -> Unit = {
    window.history.pushState(
        null,
        document.title,
        window.location.href
    )
    // add your actions here
}