时间戳

首页 > 解决方案 > 使用 iPhone Safari 的 YouTube iframe 页面上的链接和按钮响应较慢

html - 使用 iPhone Safari 的 YouTube iframe 页面上的链接和按钮响应较慢

问题描述

我有一个使用 YouTube iframe 的 RoR 网页，该网页在桌面浏览器上完全正常工作，但由于某种原因，在 iPhone 上使用 Safari 时，页面上的其他按钮和链接响应速度不快，并且可能需要多次“点击”拇指注册。该页面在大多数情况下仍然可以正常工作，但我希望确保最佳的移动用户体验。iframe 或 YouTube 链接是否与 iPhone 同一页面上的其他按钮/链接的“可点击”程度相混淆？为简洁起见，我不会分享我页面的完整源代码，但这里是 iframe 和父 DIV 元素的片段。

    <div class="m-auto m-width-800">
      <div class="embed-responsive embed-responsive-16by9 workout-video">
        <iframe class="workout-iframe embed-responsive-item" src="https://youtube...blah" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>

同样，一切仍然有效，我只是想知道为什么在 iPhone safari 的页面上单击其他链接和按钮会很困难？我的整个 Web 应用程序中唯一在 iPhone 上出现这种奇怪行为的页面是带有 YouTube iframe 元素的页面，所以我觉得这一定是原因……有什么想法吗？

标签： htmlruby-on-railsiframeyoutubemobile-safari

解决方案

我在开始问基本相同的问题时偶然发现了这一点。我会以这种形式来构建我的初始答案，因为我已经写了它:grin:。

我有一个网站，其中包含一些内容、一些链接，然后在页面的中途有一个 iframe 中嵌入的 Google 表单。

在移动设备上（我只测试过 iPhone），我发现最初点击链接只需要“软”点击。但是，在点击 iframe 然后向上滚动到链接后，这些链接需要“更硬”的点击。

（一开始我以为我的手指一定有问题！）

我可以通过将以下 JavaScript 添加到页面来解决此问题：

<script>(function(d){
  // fix "hard" link clicks caused by iphone fixation on iframe
  d.getElementsByTagName("BODY")[0].ontouchstart = function() {
        d.getElementsByTagName("BODY")[0].focus()
      }
}(document))</script>

<body>每当您触摸<body>时，焦点都会返回到。这行得通，但这是一个好的解决方法吗？有更好的解决方法吗？

https://iframe-iphone-focus.glitch.me/演示了问题和修复。

推荐阅读