首页 > 其他分享 >Blazor/MAUIBlazor禁用浏览器返回

Blazor/MAUIBlazor禁用浏览器返回

时间:2022-10-20 18:00:46浏览次数:103  
标签:返回 MAUIBlazor 浏览器 JS window disableBack Blazor 页面

提出问题

最近在学习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");
}

这个方法实际上没有禁止返回,只是通过添加当前页面的历史记录,把上一页变成当前页面,无论怎么返回,都返回的是当前页面

参考文献

利用js实现禁用浏览器后退按钮

标签:返回,MAUIBlazor,浏览器,JS,window,disableBack,Blazor,页面
From: https://www.cnblogs.com/Yu-Core/p/16810656.html

相关文章

  • nuxt 低版本浏览器兼容babel编译配置
    场景:有个nuxt开发的老项目,需要在(Firefox52.7.2)低版本浏览上显示,低版本浏览器打开报错(SyntaxError:invalidpropertyid),然后各种尝试网速搜到的兼容方法依旧没解决,最后......
  • 谷歌浏览器 无法翻译此网页的解决办法
    谷歌浏览器自带的翻译对我们来说用处还是很大的,但有的时候突然间就会变成‘无法翻译此网页’,下面针对此问题讲解一下解决方案。目前网上比较靠谱的解决方案是更改host文件......
  • 2022-10-20 微信浏览器css定位异常
    如题,一个登录弹窗界面,在安卓手机(华为畅享z)、pc(window)上能点击输入框正确弹出输入框,而在一些iphone机型上则会出现定位异常问题,比如iphone6sp,点击输入框无法唤出手机输入框,......
  • python使用selenium操作浏览器
    重复的操作令手工测试苦不堪言,于是自动化测试出现了!作为web应用里最出名的自动化测试工具,selenium让web应用的测试轻松了很多。今天我们就来简单的介绍一下一些简单的sele......
  • 关于使用谷歌 Chrome 浏览器右键菜单里的网页翻译失效问题
    【解决方法】刷新DNS生效win+r打开cmd,输入 ipconfig/flushdns 回车,刷新DNS,重启浏览器就ok了。 ......
  • 图片浏览器上可以直接访问,但是在img上报404
    解决方案(之一)在页面中加入<metaname="referrer"content="no-referrer"/>原因HTTPReferer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告......
  • 解决谷歌浏览器 Added non-passive event listener to a scroll-blocking 'touchsta
    1.问题描述:vue项目中使用ElementUI的表单form校验单的时候,出现以下警告:虽然他不会直接影响项目出现报错或者无法正常运行,但是这系列警告的存在就会为以后项目运行出现未......
  • JS 打开、关闭浏览器全屏
    一、打开全屏requestFullscreen(){constdocElm=document.documentElementif(docElm.requestFullscreen){docElm.requestFullscreen()}elseif(do......
  • 快速解决谷歌浏览器自带翻译不好用的问题
    工具先说工具,我写了一个小工具,可以快速修改,不需要任何其他知识。其中"修改的Ip"为本次你要修改的Ip地址,如果之前你已经修改过了,这里会显示现在的IP,如果没有,这里是空的。如......
  • selenium 浏览器驱动下载安装(chrome)
    selenium下载地址https://pypi.org/project/selenium/4.0.0/#filesFireFox驱动下载地址https://github.com/mozilla/geckodriver/releaseschromeDriver下载地址ht......