使用 JavaScript 阻止 Android 后退按钮

Question

我有一个简单的HTML应用程序，里面有CSS和Javascript。我想阻止用户按下后退按钮。我已经使用 JavaScript 实现了它，它工作正常。我的问题是它不适用于Android设备，当用户按下设备上的"硬件"后退按钮时，他们会被重定向回上一页。

我已经走遍了SO，但没有找到任何答案。谁能指出我正确的方向？

我没有使用科尔多瓦、离子等。它只是一个简单的HTML网页。

Answer 1

这是我遇到的答案：

history.pushState(null, null, window.top.location.pathname + window.top.location.search);
window.addEventListener('popstate', (e) => {
e.preventDefault();
// Insert Your Logic Here, You Can Do Whatever You Want
history.pushState(null, null, window.top.location.pathname + window.top.location.search);
});

Answer 2

详细说明@Farzad索尔塔尼的答案。这在安卓上对我有用e.preventDefault()：

history.pushState(null, null, window.top.location.pathname + window.top.location.search);
window.addEventListener('popstate', (e) => {
e.preventDefault();
history.pushState(null, null, window.top.location.pathname + window.top.location.search);
});

Answer 3

这是一个简单的解决方案：

history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};

你也可以将history.go(1(;部分替换为按下按钮时需要执行的任何代码。

Answer 4

如果您的想法是因为您打开了一个模式而阻止后退操作，您可以这样做。如果没有，你可以适应。

将此函数添加到索引中的脚本.html

function AddModalToHistory(url) {
window.history.pushState("SaraivaForm.Client", "Modal", url);
}

在 Blazor 组件上注入 JsRuntime

@inject IJSRuntime JsRuntime

模式打开后从代码调用

protected override async Task OnInitializedAsync()
{
await JsRuntime.InvokeAsync<string>("AddModalToHistory");
}