iPhone 上点击 iframe 内嵌 S3 视频的全屏关闭按钮（左上角 ×）会导致整个网页意外后退，这是 iOS Safari 对 iframe 全屏行为的特殊处理所致；本文提供兼容性强、无需修改后端的前端修复方案。
ios safari iframe 全屏视频退出时页面后退的解决方案：iphone 上点击 iframe 内嵌 s3 视频的全屏关闭按钮（左上角 ×）会导致整个网页意外后退，这是 ios safari 对 iframe 全屏行为的特殊处理所致；本文提供兼容性强、无需修改后端的前端修复方案。
在 iOS Safari 中，当 <iframe></iframe> 嵌入了支持 allowfullscreen 的第三方视频（如 Amazon S3 直链 MP4 + HTML5 <video></video> 封装，或某些 CDN 播放器），其原生全屏退出交互会触发浏览器历史栈回退（history.back()），造成页面“跳回上一页”的异常体验。该问题仅出现在 iPhone 的 Safari 及基于 WebKit 的 WebView 中，Android Chrome、桌面 Chrome/Firefox 均无此行为。
根本原因在于：iOS Safari 在 iframe 进入/退出全屏时，会错误地将 popstate 事件与用户导航混淆，尤其当 iframe 内容未显式管理 history.pushState() 时，系统默认执行历史回退。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
✅ 推荐解决方案：禁用默认退出行为 + 自定义关闭逻辑
最稳定、无需依赖 iframe 内部脚本（S3 直链视频通常无法注入 JS）的方法是——拦截 iframe 全屏状态变更，并阻止默认后退行为。关键不在于隐藏 × 按钮（它由系统渲染，不可 CSS 隐藏），而在于捕获 webkitendfullscreen 事件并调用 event.preventDefault()：
<div class="container-fluid first-cont">
<div class="container columns">
<div class="iframe-container">
<iframe
id="video-iframe"
src="{{ user.video_url }}"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
frameborder="0"
></iframe>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('video-iframe');
// 监听 iOS 全屏退出事件（WebKit only）
iframe.addEventListener('webkitendfullscreen', (e) => {
e.preventDefault(); // 阻止默认后退行为
// 可选：手动重置 iframe 状态或触发 UI 更新
console.log('iOS fullscreen exited — back navigation prevented.');
});
// 补充：监听标准 exitFullscreen（兼容未来规范）
iframe.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement && !document.webkitIsFullScreen) {
// 退出全屏后可执行清理逻辑（如暂停视频、恢复布局等）
iframe.contentWindow?.postMessage('exit-fullscreen', '*');
}
});
});
</script>⚠️ 注意事项与增强建议
-
不要尝试
display: none或visibility: hidden隐藏 × 按钮：iOS 全屏控件为原生系统层 UI，CSS 无法影响，强行覆盖可能引发触摸冲突。 -
避免重复引入 jQuery：你的 HTML 中同时加载了
https://code.jquery.com/jquery-3.6.0.min.js和https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js，请保留其一，减少资源竞争与潜在冲突。 -
若 iframe 内为自托管 video 标签（非 S3 直链）：可在内部 video 元素上监听
webkitendfullscreen并调用e.preventDefault()，但 S3 直链 iframe 无权访问其内部 DOM，因此必须在父页面 iframe 元素上监听。 -
兜底方案（可选）：在
DOMContentLoaded后立即history.replaceState()覆盖当前历史项，降低意外回退影响：history.replaceState({ page: 'video-page' }, '');
通过上述方式，你无需修改视频源、不依赖服务端配置，即可彻底解决 iPhone 上 iframe 视频退出导致的页面后退问题，确保跨设备体验一致、符合 Web 标准且长期兼容。
