将 Owl Carousel 与 iFrame 一起使用时 iPhone 崩溃答案

【问题标题】：iPhone crashing when using Owl Carousel with iFrames将 Owl Carousel 与 iFrame 一起使用时 iPhone 崩溃
【发布时间】：2021-05-18 16:21:28
【问题描述】：

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

当我在 iPhone 上打开它时，它会在 99/100 情况下崩溃（有时它不会崩溃）。我真的在墙上跑，因为我不知道如何调试它。首先，iPhone 会尝试重新加载页面，直到我收到错误“A problem...

JsFiddle

Android 和其他一切都运行良好。

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

$('.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,
            nav:true,
            dots:true,
            margin: 100,
            loop:true
        },
        1000:{
            items:1,
            margin: 100,
            dots:true,
            nav:true,
            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>

【问题讨论】：

标签： javascript html css iframe owl-carousel

【解决方案1】：

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

【讨论】：