提出问题
最近在学习MAUIBlazor,发现返回键会返回上一页,但是对于一个应用程序来说,不应该像网页一样可以返回上一页。所以有没有什么办法可以阻止返回?
解决问题
Blazor在MAUI中是靠WebView存在的,所以可以通过JS阻止浏览器的返回。查了一些资料,经过不断的调试,最后找到了办法。
第一步,把这段js脚本引入index.html
window.disableBack = function () {
//添加一个url为当前页面的历史记录,
history.pushState(null, null, document.URL);
};
window.disableBack();
//浏览器前进或后退时会调用popstate,所以对它添加一个监听事件,后退后再添加一个新的当前页面的历史记录
window.addEventListener('popstate', function () {
window.disableBack();
});
第二步,并且在每一个有路由的Razor组件的初始化方法中调用disableBack(C#调用js脚本,需要注入,@inject IJSRuntime JS
或者[Inject]IJSRuntime JS { get; set; }
)
protected override async Task OnInitializedAsync()
{
await JS.InvokeVoidAsync("disableBack");
}
这个方法实际上没有禁止返回,只是通过添加当前页面的历史记录,把上一页变成当前页面,无论怎么返回,都返回的是当前页面