如何用JavaScript在页面加载时禁用各浏览器导航栏禁止刷新

首先明确一个浏览器安全层面的硬性限制：所有2015年后发布的主流浏览器（Chrome、Edge、Firefox、Safari等），都不允许网页通过JavaScript/jQuery修改、隐藏当前标签页的原生导航栏、工具栏，也无法100%阻止用户触发页面刷新操作。

你找到的window.open加toolbar=no参数的写法是IE6/IE7时代的遗留特性，目前除了极少数定制的老旧内网浏览器，所有主流浏览器都会强制在弹窗中显示地址栏，不会响应隐藏工具栏、地址栏的参数，这个限制是为了防范钓鱼网站伪造可信页面欺诈用户，属于浏览器的底层安全规则，没有前端脚本可以绕过。

针对你OTP验证场景的需求，可以用以下行业通用的替代方案实现同等效果：

隐藏导航栏的替代实现 #

你无权操作浏览器原生UI区域，只能从网页自身的交互设计层面达到类似的沉浸效果：

• 不要做整页跳转，在当前页面触发OTP验证时，弹出覆盖全屏的模态层承载验证码输入逻辑，模态层设置最高层级，遮挡页面其他所有导航、跳转入口，用户视觉上完全聚焦在验证环节，这是目前支付、金融类站点做OTP验证的最通用实现
• 如果需要完全无浏览器导航栏的体验，可以引导用户将站点安装为PWA桌面应用，PWA运行在独立应用窗口时默认不显示浏览器导航栏，但这个流程需要用户主动确认授权，无法强制触发

禁止刷新中断验证流程的实现 #

没有任何方案能完全阻止用户点击浏览器刷新按钮、按快捷键触发刷新，但可以通过两层逻辑避免刷新导致流程中断：

1. 绑定beforeunload事件，在用户触发刷新、关闭标签页行为时弹出原生确认框，提示用户当前操作会中断验证流程

// 进入OTP验证环节时绑定拦截
const handleBeforeUnload = (e) => {
  e.preventDefault();
  e.returnValue = '';
};
window.addEventListener('beforeunload', handleBeforeUnload);

// OTP验证通过、准备跳转下一页面时，一定要解绑事件，避免正常跳转弹出提示
const onVerifyPass = () => {
  window.removeEventListener('beforeunload', handleBeforeUnload);
  // 执行后续页面跳转逻辑
};

2. 做会话状态持久化，把当前OTP验证的会话ID、已输入内容临时存在sessionStorage中，即使用户强制刷新了页面，页面初始化时先读取本地存储的验证状态，直接恢复到OTP输入环节，不需要用户从头提交信息，从结果上抵消刷新带来的影响。

不要尝试通过监听F5、Ctrl+R等按键的方式拦截刷新，这类拦截可靠性极低：用户直接点击浏览器原生刷新按钮、在地址栏按回车的行为完全不会被网页脚本监听到，很容易被绕过。

内容的提问来源于stack exchange，提问作者Mahi