将 Owl Carousel 与 iFrames 一起使用时 iPhone 崩溃

编程问答 2022-05-01

问题描述

我为这个问题搜索了很长时间，但我找不到另一个有同样问题的人。 我创建了这个 Jsfiddle 来演示这个问题。

当我在 iPhone 上打开它时，它会在 99/100 的情况下崩溃（有时不会）。 我真的在这方面陷入困境，因为我不知道如何调试它。 首先，iPhone 会尝试重新加载页面，直到我收到错误“在...上重复出现问题”并且没有更多错误消息。

JsFiddle

Android 和其他一切正常。

PS：给它一些时间来加载 iFrame

$('.carousel2').owlCarousel({
    loop:true,autoplay:false,dotsEach: true,responsiveClass:true,mouseDraggable: false,navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],responsive:{
        0:{
            items:1,margin: 10,dots:true,nav:true,loop:true
        },600:{
            items:1,margin: 100,1000:{
            items:1,loop:true
        }
    }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HRexmsZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />







<div class="carousel2 owl-carousel owl-theme">
  <div class="item products_3_img">
    <iframe class="myIframe1" style="width: 800px; height: 800px;" src="https://hajimewatanabe.jp/portfolio/" data-src="" ></iframe>
  </div>
  <div class="item products_3_img">
    <iframe class="myIframe2" style="width: 800px; height: 800px;" src="https://cabbi.bo/" data-src=""></iframe>
  </div>
  <div class="item products_3_img">
    <iframe class="myIframe3" style="width: 800px; height: 800px;" src="https://renaultespace.littleworkshop.fr" data-src=""></iframe>
  </div>
</div>






<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

解决方法

我在 iphone 8 上测试过，可以确认问题。

htmliframeiframejavascriptowl-carousel