iPhone端退出iframe嵌入的S3视频时页面自动回退的解决方法

点击全屏视频左上角的X按钮关闭视频时，网站自动回退一页。该问题仅在iPhone设备上出现，Android设备及笔记本端浏览器无此异常（未测试MacBook）。

相关代码片段 #

视频容器HTML代码 #

<div class="container-fluid first-cont">
   <div class="container columns"> 
       <div class="iframe-container">
           <iframe src="{{ user.video_url }}" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0"></iframe>
       </div>
   </div>
</div>

HTML头部资源 #

<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

• 阻止全屏退出的默认事件触发：iPhone Safari在视频退出全屏时，会误触发popstate事件导致页面回退。监听webkitfullscreenchange事件，在退出全屏时阻止默认行为并停止事件冒泡，同时重置历史记录避免后续异常：

  document.addEventListener('webkitfullscreenchange', function(e) {
      if (!document.webkitIsFullScreen) {
          e.preventDefault();
          e.stopPropagation();
          history.pushState(null, null, window.location.href);
      }
  }, false);
  

  把这段代码放在页面底部，确保视频元素已加载完成。

• 补充iOS全屏兼容属性：给iframe添加webkitallowfullscreen属性，明确支持iOS的全屏功能，避免控件兼容性问题：

  <iframe src="{{ user.video_url }}" 
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen 
          webkitallowfullscreen 
          frameborder="0"></iframe>
  

• 移除重复的jQuery引用：头部同时引入了两个相同版本的jQuery，重复引用可能引发事件绑定冲突，删掉其中一个即可（比如保留code.jquery.com的版本，移除cdnjs的）。

• 排查事件绑定冲突：检查页面中其他监听popstate或全屏事件的脚本，暂时注释后测试，找出是否有脚本和视频退出全屏事件冲突。

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