javascript - 在 iframe 中调用 element.focus() 将父页面滚动到 Safari iOS10 中的随机位置-6ren

javascript - 在 iframe 中调用 element.focus() 将父页面滚动到 Safari iOS10 中的随机位置

转载作者：行者123 更新时间：2023-12-03 13:01:29

25

4

iOS 10.1.1 上的 Safari 在将焦点设置在 iframe 内的元素上时似乎存在错误。

当我们调用 element.focus()在 iframe 内的元素上，Safari 将立即向下滚动父页面并将焦点元素移出屏幕(而不是将焦点元素滚动到 View 中)。

但是，只有当元素位于比设备屏幕高度高的 iframe 中时才会发生这种情况(较短的 iframe 也可以)。

因此，如果有两个元素，一个在 iframe 顶部，另一个在页面下方，第一个将很好地聚焦，但第二个将在我们设置焦点时跳出屏幕。

在我看来，Safari 是尝试将元素滚动到 View 中，但数学是错误的，它们最终滚动到页面下方的随机位置。在 iOS9 中一切正常，所以我认为这是 iOS10 中的一个新错误。

是某种防止父页面滚动的方法还是某种避免此错误的其他方法？

我整理了一个单页要点，在 iOS 10 设备或模拟器上复制了该问题。

这是一个您可以在手机上实际使用的 URL: goo.gl/QYi7OE

这是一个 plunker，因此您可以检查桌面行为:https://embed.plnkr.co/d61KtGlzbVtVYdZ4AMqb/

还有那个 plunker 的要点版本:https://gist.github.com/Coridyn/86b0c335a3e5bf72e88589953566b358

这是 gist 的可运行版本(上面的缩短的 URL 指向此处):
https://rawgit.com/Coridyn/86b0c335a3e5bf72e88589953566b358/raw/62a792bfec69b2c8fb02b3e99ff712abda8efecf/ios-iframe-bug.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <script>
    document.addEventListener('DOMContentLoaded', function(){
        document.querySelector('#frame').srcdoc = document.querySelector('#frameContent').innerHTML;
    });
    </script>
</head>
<body>
    <iframe id="frame" frameborder="1"
        style="width: 100%; height: 1200px;"
        width="100%" height="1200">
    </iframe>

    <!--
    To keep this a one-page example, the content below will be inserted into the iframe using the `srcdoc` attribute.

    The problem occurs in iOS10 regardless of using `srcdoc` or `src` (and regardless of same-domain or cross-domain content).
    -->
    <script id="frameContent" type="text/template">
<div>
    <style>
        .spacer {
            padding-top: 400px;
            padding-bottom: 400px;
        }
        .green-block {
            width: 20px;
            height: 20px;
            background-color: green;
        }
        .red-block {
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>

    <div class="green-block" tabindex="0"></div>

    <p>Scroll down and press the 'Focus Green' or 'Focus Red' button.</p>

    <h2>'Focus Green'</h2>
    <p><b>Expected:</b> should set focus on '.green-block' and scroll to the top of the page.</p>
    <p><b>Actual:</b> sets focus but does not scroll page.</p>

    <h2>'Focus Red'</h2>
    <p><b>Expected:</b> should set focus on '.red-block' and not scroll page (because element is already on-screen).</p>
    <p><b>Actual:</b> sets focus and scrolls down to the bottom of the host page.</p>

    <hr/>

    <p class="spacer">1 Filler content to force some visible scrolling 1</p>

    <div class="red-block" tabindex="0"></div>

    <div>
        <button type="button" onclick="document.querySelector('.green-block').focus();">Focus Green</button>
        <p>'Focus Green' should go to top of page, but on iOS10 the view doesn't move.</p>
    </div>
    <div>
        <button type="button" onclick="document.querySelector('.red-block').focus();">Focus Red</button>
        <p>'Focus Red' should stay here, but on iOS10 the view scrolls to the bottom of the page</p>
    </div>

    <p class="spacer">20 Filler content to force some visible scrolling 20</p>
    <p>Bottom of iframe</p>

</div>
    </script>

</body>
</html>

我们发现的东西:

该问题发生在 iOS 10+ 的 Safari 和 Chrome

问题不发生在 Safari iOS 9.3.2 上(行为与桌面浏览器一致，如预期的那样)

该问题仅在关注 时发生非输入 HTML 元素，例如DIV、SPAN、 anchor 标签等；关注 INPUT元素工作正常

桌面 Safari 工作正常

滚动的是父页面，而不是 iframe(iframe 的大小为 100%，以避免在框架内滚动)

我们尝试在父页面上调用 preventDefault :window.onscroll = (event) => event.preventDefault();但这不起作用，因为 the scroll event is not cancelable

scroll父页面上引发的事件似乎来自 Safari/Webkit 本身，因为调用堆栈中没有其他函数(使用 DevTools 和 Error.stack 检查时)

最佳答案

我在 iOS 上滚动跳跃时遇到了类似的问题。它发生在我的所有 iOS 版本上，8、9 和 10。

在真正的 iOS 10 设备上测试你的 plunker 并没有给我带来问题。我不确定我是否正确测试。

你能在 iOS 上试试这个版本的 plunker 吗？ https://embed.plnkr.co/NuTgqW/

我的问题的解决方法是确保 iframe 内容中的 body 和 html 标记具有定义的 100% 高度和宽度，以及溢出滚动。这能够强制 iframe 的尺寸。它阻止了滚动跳跃。

让我知道它是否有帮助。

关于javascript - 在 iframe 中调用 element.focus() 将父页面滚动到 Safari iOS10 中的随机位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40487279/

25

4

0

文章推荐： haskell - 有什么方法可以减轻距离跟踪的痛苦吗？

文章推荐： sql-server - Elmah.MVC + NLog - 将所有错误存储在一个地方

文章推荐： ruby-on-rails - devise_token_auth 和使用 Facebook 登录的问题？

文章推荐： python - BoundedSemaphore 在 KeyboardInterrupt 上的线程中挂起

Javascript AJAX 调用 Jquery 调用
为了让我的代码几乎完全用 Jquery 编写，我想用 Jquery 重写 AJAX 调用。这是从网页到 Tomcat servlet 的调用。我目前情况的类似代码: var http = new
Java 调用 C 调用 Java
我想使用 JNI 从 Java 调用 C 函数。在 C 函数中，我想创建一个 JVM 并调用一些 Java 对象。当我尝试创建 JVM 时，JNI_CreateJavaVM 返回 -1。所以，我想知
javascript - 调用 javascript 函数以从无法按预期工作的表单进行 AJAX 调用
环顾四周，我发现从 HTML 调用 Javascript 函数的最佳方法是将函数本身放在 HTML 中，而不是外部 Javascript 文件。所以我一直在网上四处寻找，找到了一些简短的教程，我可以根
ajax - 为什么我不能从 Angular 调用 ajax 调用
我有这个组件: import {Component} from 'angular2/core'; import {UserServices} from '../services/UserService
openssl - 如果客户端使用 BIO_* 调用，是否需要服务器上的 BIO_* 调用？
我正在尝试用 C 实现一个简单的 OpenSSL 客户端/服务器模型，并且对 BIO_* 调用的使用感到好奇，与原始 SSL_* 调用相比，它允许一些不错的功能。我对此比较陌生，所以我可能会完全错误
javascript - 根据先前的 Ajax 调用，根据用户确认执行 Ajax 调用
我正在处理有关异步调用的难题: 一个 JQuery 函数在用户点击时执行，然后调用一个 php 文件来检查用户输入是否与数据库中已有的信息重叠。如果是这样，则应提示用户确认是否要继续或取消，如果他单击
java - 验证私有(private)构造函数未使用 JMockit 调用/调用
我有以下类(class)。 public Task { public static Task getInstance(String taskName) { return new
c++ - 调用 QSound 调用，它们之间有延迟 Qt C++
嘿，我正在构建一个小游戏，我正在通过制作一个数字 vector 来创建关卡，该数字 vector 通过枚举与 1-4 种颜色相关联。问题是循环(在 Simon::loadChallenge 中)我将颜
Java 异步 api 调用 - 即发即忘 http 调用
我有一个java spring boot api(数据接收器)，客户端调用它来保存一些数据。一旦我完成了数据的持久化，我想进行另一个 api 调用(应该处理持久化的数据 - 数据聚合器)，它应该自行异
c# - 如何从 Paypal 调用 DoDirectPayment API 调用
首先，这涉及桌面应用程序而不是 ASP .Net 应用程序。我已经为我的项目添加了一个 Web 引用，并构建了各种数据对象，例如 PayerInfo、Address 和 CreditCard。但问题
f# - 如何从 FAKE 调用/调用 F# 编译器 fsc？
我如何告诉 FAKE 编译 .fs文件使用 fsc ? 解释如何传递参数的奖励积分，如 -a和 -target:dll . 编辑:我应该澄清一下，我正在尝试在没有 MSBuild/xbuild/.sl
javascript - render 没有被一个 api 调用，而是被另一个 api 调用
我使用下划线模板配置了一个简单的主干模型和 View 。两个单独的 API 使用完全相同的配置。 API 1 按预期工作。要重现该问题，请注释掉 API 1 的 URL，并取消注释 API 2 的
php - OOP 或 MySQL 调用。生成对象还是直接从 MySQL 调用？
我不确定什么是更好的做法或更现实的做法。我希望从头开始创建目录系统，但不确定最佳方法是什么。我想我在需要显示信息时使用对象，例如 info.php?id=100。有这样的代码用于显示 Game.cl
python - child 调用 parent ， parent 调用 child ......或不
from datetime import timedelta class A: def __abs__(self): return -self class B1(A):
java - 调用/调用 void 方法(Java 作业 - 生命游戏示例)
我在操作此生命游戏示例代码中的数组时遇到问题。情况: “生命游戏”是约翰·康威发明的一种细胞自动化技术。它由一个细胞网格组成，这些细胞可以根据数学规则生存/死亡/繁殖。该网格中的活细胞和死细胞通过
调用 read() 返回 0 但缓冲区已更改，调用 fread() 读取相同偏移量时不会发生
如果我像这样调用 read() 来读取文件: unsigned char buf[512]; memset(buf, 0, sizeof(unsigned char) * 512); int fd;
调用 "start"启动程序，调用 "stop"关闭 C 中的当前实例
我用 C 编写了一个简单的服务器，并希望调用它的功能与调用其他 C 守护程序的功能相同(例如使用 ./ftpd start 调用它并使用 ./ftpd stop 关闭该实例)。显然我遇到的问题是我不知
powershell - 可以从 cmd 调用 headless，但不能从 powershell 调用 headless
在 dos 中，当我粘贴此命令时它会起作用: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" https://google.
powershell - 可以从 cmd 调用 headless，但不能从 powershell 调用 headless
在 dos 中，当我粘贴此命令时它会起作用: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" https://google.
python - 调用 python3 显示错误，调用 python 启动 python2.7
我希望能够从 cmd 在我的 Windows 10 计算机上调用 python3。我已重新安装 Python3.7 以确保选择“添加到路径”选项，但仍无法调用 python3 并使 CMD 启动 P

首页

博学

6Ren·AI

商城

javascript - 在 iframe 中调用 element.focus() 将父页面滚动到 Safari iOS10 中的随机位置