iPhone Safari 在退出 iframe 内嵌的 S3 视频全屏模式时，会触发浏览器历史回退（history.back()），导致页面跳转；该问题在 Android 和桌面端均不出现，属 iOS WebKit 特定行为，需通过禁用默认全屏退出事件或覆盖 UI 方式解决。
iphone safari 在退出 iframe 内嵌的 s3 视频全屏模式时，会触发浏览器历史回退（history.back()），导致页面跳转；该问题在 android 和桌面端均不出现，属 ios webkit 特定行为，需通过禁用默认全屏退出事件或覆盖 ui 方式解决。
在 iOS Safari 中，当 <iframe></iframe> 嵌入了支持 allowfullscreen 的视频（如来自 Amazon S3 的 MP4 文件），系统会在全屏播放时显示一个原生的「X」关闭按钮。点击该按钮不仅退出全屏，还会意外触发 window.history.back() 行为——这是 iOS WebKit 的已知兼容性问题，并非代码逻辑错误，也与 中的字体、Bootstrap 或 jQuery 加载无关（题中所列资源均不参与全屏生命周期控制）。
✅ 推荐解决方案：接管全屏状态，禁用默认退出行为
由于无法直接拦截 iframe 内部原生控件事件（跨域限制），最可靠的方式是主动管理全屏状态 + 自定义退出按钮，并阻止默认导航：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
1. 添加自定义全屏控制按钮（推荐）
<div class="iframe-container"> <iframe id="video-iframe" src="%7B%7B%20user.video_url%20%7D%7D" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" webkitallowfullscreen mozallowfullscreen> </iframe> <!-- 自定义退出按钮（仅 iOS 显示） --> <button id="exit-fullscreen-btn" class="ios-only-btn" style="display:none;">✕</button> </div>
2. 使用 JavaScript 检测全屏状态并绑定逻辑
const iframe = document.getElementById('video-iframe');
const exitBtn = document.getElementById('exit-fullscreen-btn');
// 仅在 iOS 设备上启用自定义逻辑
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isIOS) {
// 显示自定义按钮（CSS 可定位至左上角）
exitBtn.style.display = 'block';
// 监听进入全屏事件（iframe 全屏实际由父文档触发）
document.addEventListener('webkitfullscreenchange', () => {
if (document.webkitIsFullScreen) {
exitBtn.style.display = 'block';
} else {
exitBtn.style.display = 'none';
}
});
// 点击自定义按钮：退出全屏 + 阻止默认跳转
exitBtn.addEventListener('click', (e) => {
e.preventDefault();
if (document.webkitIsFullScreen) {
document.webkitExitFullscreen();
}
// 关键：阻止 Safari 因 iframe 退出而执行 history.back()
history.pushState(null, '', location.href); // 重置历史栈顶
});
}
3. 补充 CSS（确保按钮可见且不干扰）
.ios-only-btn {
position: absolute;
top: 16px;
left: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
color: white;
border: none;
font-size: 20px;
cursor: pointer;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
}
.ios-only-btn:hover {
background: rgba(0,0,0,0.9);
}
⚠️ 注意事项
-
不要尝试隐藏原生「X」按钮：iOS Safari 不允许通过 CSS（如
::webkit-full-screen:-webkit-full-screen::-webkit-resizer）可靠隐藏原生控件，强行覆盖易失效。 -
避免重复引入 jQuery：题中同时加载了
https://code.jquery.com/和cdnjs.cloudflare.com两个 jQuery 版本，会造成冲突，建议保留一个（推荐 CDNJS）。 -
history.pushState是关键防护：它在全屏退出前“锚定”当前 URL，使后续history.back()不再跳转到上一页，而是刷新当前页（无感知）。 - 测试验证：务必在真机 iOS Safari（iOS 15+）下测试，模拟器可能无法复现该行为。
此方案兼顾兼容性与用户体验，无需修改后端视频托管逻辑，也无需服务端渲染干预，是目前最稳定、零依赖的前端修复方式。
