如何在Safari中阻止或捕获iframe发起的顶级跳转（Telegram WebApp）

针对你遇到的iframe表单提交后因301响应触发顶级窗口跳转，且无法修改iframe内容、现有方法在Safari受限的问题，以下是几个可行的落地方案：

1. 用Service Worker拦截301响应 #

Service Worker可在跳转发生前拦截请求响应：

• 注册与WebApp同域的Service Worker，监听fetch事件。
• 匹配iframe表单提交的请求，当检测到响应为301时，修改响应状态为200并返回空白或自定义内容，阻止顶级跳转触发。
• 局限性：仅能拦截同域或已配置CORS的跨域请求，若iframe为无权限的第三方域名，此方法无效。

2. 利用iframe的sandbox属性限制跳转权限 #

在嵌入iframe时添加sandbox属性，禁用顶级导航权限：

• 设置sandbox="allow-forms allow-scripts"（不要包含allow-top-navigation），浏览器会默认阻止iframe发起顶级窗口跳转。
• 注意：若iframe功能依赖顶级导航，此方法会影响其正常使用，需权衡取舍。

3. 多事件结合兼容不同浏览器 #

针对不同浏览器的事件支持差异做兼容处理：

• 给iframe绑定beforeunload事件，在事件触发时调用event.preventDefault()尝试阻止跳转（Chrome、Firefox等主流浏览器有效）。
• 针对Safari，结合visibilitychange事件监听iframe可见性变化，一旦检测到异常变化，立即重新加载WebApp的原始页面，抵消跳转影响。

4. 同域代理页面中转iframe #

创建同域代理页面嵌入目标iframe，通过代理拦截表单提交：

• 代理页面与WebApp同域，可通过postMessage与iframe通信，监听表单提交动作。
• 在代理页面中代为发起表单请求，直接处理301响应，避免触发顶级窗口跳转。

注意：所有方案均受浏览器同源策略限制，若iframe为无权限的第三方域名，部分方法无法生效，需根据实际域名权限选择适配方案。

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