javascript - 在某些 iOS 设备上使用触摸 yt iframe 阻止网页 java-scripts 滑动，如何解决？

Question

我正在开发门户网站，包括一些来自 yt 的视频，但遇到了问题，导致它在某些 iOS 设备上无法使用。为了这个问题，我简化了它。

我有一个简单的网页，其中粘贴了从 youtube 页面共享菜单中获取的 iframe 代码。在某些 ios 设备上滚动或只是滑动页面后手指触摸视频其他页面 javascripts 停止工作。

我已经尝试过使用不同的视频和不同的 iframe 属性集，但我得到了相同的行为。

我想出了简单的codepen https://codepen.io/Poziomka/pen/wvwjMZx（https://codepen.io/Poziomka/full/wvwjMZx -全屏） - 它包含随机视频和按钮显示和隐藏一些文本点击。

html

<section class="article__container">
    <h1 class="article__title">Ios iframe scroll bug</h1>
    <iframe src="https://www.youtube.com/embed/bltXlWpkDpg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <p>When you swipe touching the video on some ios, it blocks java script on the page</p>
    <button class="js-button">Show hiden text</button>
    <span class="article__text-to-toggle js-text">Text toggled by button</span>  
</section>

js

const text = document.querySelector(".js-text");
const button = document.querySelector(".js-button");

button.addEventListener("click", () => {
    text.classList.toggle("article__text-to-toggle--visible");
});

在带有 iOS 11.4.1 的 iPhoneSE、带有 iOS 11.4 的 iPadMini、带有 iOS 12.2 的 iPhone7 上的 Safari 中，滚动后，视频被触摸，按钮停止工作，我无法再隐藏或显示文本。在装有 iOS 11.1.2 的 iPadAir 上的 Safari 中不会出现此问题。

在 iPhone 7 iOS 上的浏览​​器堆栈上调试此问题时，页面加载时 v12 有时会出现错误：“尝试从没有正确的 'allow' 属性的框架调用 enumerateDevices。” 但是当按钮被阻止时没有其他错误。它似乎与问题有关，但每次按钮都会阻塞，而错误只是有时发生。

如何解决？

标签： javascriptiframeyoutube-api