嘿，针对你问的iOS环境下Safari和Chrome里页面刷新/重载时弹出警告弹窗的需求，我整理了几个亲测有效的实现方案和踩坑经验，都是适配iOS WebKit内核的实用技巧：

基础实现方案（通用iOS浏览器） #

这个需求核心是用浏览器的beforeunload事件，但iOS的Safari和Chrome（Chrome iOS基于Safari的WebKit内核）对这个事件有特殊限制，直接写标准代码可能踩坑，我一步步给你拆：

1. 先写核心的监听代码，建议把监听函数抽离出来，方便后续在需要时移除：

// 定义页面卸载前的警告逻辑
const unloadWarningHandler = (e) => {
  // 注意：iOS Safari会忽略自定义提示文本，显示浏览器默认文案，但必须返回非空值才能触发弹窗
  const tipText = "你确定要离开吗？未保存的内容可能会丢失";
  e.returnValue = tipText;
  return tipText;
};

// 绑定页面卸载前的监听事件
window.addEventListener('beforeunload', unloadWarningHandler);

2. 如果需要在某些场景下取消警告（比如表单已提交完成、用户手动保存了内容），可以移除监听：

// 移除页面卸载监听
window.removeEventListener('beforeunload', unloadWarningHandler);

iOS浏览器的关键注意事项（必看！） #

这部分是iOS独有的规则，没注意到的话大概率实现失败：

• 必须有用户交互：iOS Safari/Chrome要求用户必须和页面有真实交互（比如点击按钮、在输入框打字），否则直接刷新页面时，beforeunload事件不会触发弹窗——这是苹果的安全限制，防止恶意网站强制弹窗骚扰用户。
• 自定义文本无效：不管你写什么提示文本，iOS浏览器都会显示自己的默认文案（类似“此网页正尝试离开，你要保留此页面还是离开？”），所以不用纠结自定义内容，只要返回非空值就行。
• SPA单页应用特殊处理：如果你是在React、Vue这类SPA里使用，要注意路由切换时不要误触发警告。可以在路由切换前判断：如果是内部路由跳转，就不触发警告；只有真正的页面刷新/关闭才触发。比如在Vue里结合路由守卫，在beforeRouteLeave里控制是否保留监听，或者在beforeunload事件里判断是否是页面卸载场景。

进阶：仅在有未保存更改时弹窗 #

如果不是所有场景都要弹警告，只有用户有未保存内容（比如表单填了一半）才触发，可以加个状态变量来控制：

// 标记是否存在未保存的更改
let hasUnsavedChanges = false;

// 监听表单输入，当用户编辑内容时标记状态
document.querySelector('#userForm').addEventListener('input', () => {
  hasUnsavedChanges = true;
});

// 表单提交后，取消未保存状态
document.querySelector('#submitBtn').addEventListener('click', () => {
  hasUnsavedChanges = false;
});

const unloadWarningHandler = (e) => {
  // 只有存在未保存更改时才触发警告
  if (!hasUnsavedChanges) return;
  
  const tipText = "你确定要离开吗？未保存的内容可能会丢失";
  e.returnValue = tipText;
  return tipText;
};

window.addEventListener('beforeunload', unloadWarningHandler);

常见问题排查 #

• 测试时弹窗不出来？先检查自己有没有点击过页面（比如随便点个空白处），再刷新——iOS默认拦截无交互情况下的beforeunload弹窗。
• Chrome iOS下无效？放心，Chrome iOS和Safari用的是同一个内核，只要Safari能跑通，Chrome iOS也没问题，同样要满足用户交互的条件。

内容来源于stack exchange