javascript - sirve - Al llamar a element.focus() en iframe se desplaza la página principal a una posición aleatoria en Safari iOS10
javascript focus not working (2)
En mi situación, una página contenía un iframe con una entrada. En la carga de la página la entrada tiene el foco. Esto hizo que la página principal se desplazara a la posición de la entrada. Sucedió en todos los navegadores.
Solución: cuando la página comenzó a desplazarse, establezca la posición de desplazamiento en la parte superior.
Debido a que el problema sucedió solo una vez, usé un evento con espacios de nombre para eliminar a un oyente tan pronto como se evitó el desplazamiento no deseado.
$(function() {
if ($(''#iframe'').length) {
var namespace = ''myNamespace'';
$(window).on(''scroll.'' + namespace, function() {
$(window).scrollTop(0).off(''scroll.'' + namespace);
});
}
});
Safari en iOS 10.1.1 parece tener un error al establecer el enfoque en un elemento dentro de un iframe.
Cuando llamamos a element.focus() en un elemento dentro de un iframe, Safari inmediatamente desplazará la página principal hacia abajo y moverá el elemento enfocado fuera de la pantalla (en lugar de desplazar el elemento enfocado a la vista).
Sin embargo, solo sucede si el elemento está en un iframe que es más alto que la altura de la pantalla del dispositivo (los iframes más cortos están bien).
Entonces, si hay dos elementos, uno en la parte superior del iframe y otro más abajo en la página, el primero enfocará bien pero el segundo saltará fuera de la pantalla cuando configuremos el enfoque.
Para mí, parece que Safari está intentando desplazar el elemento para que se vea, pero los cálculos son incorrectos y terminan desplazándose a una posición aleatoria más abajo en la página. Todo funciona bien en iOS9, así que creo que este es un nuevo error en iOS10.
¿Hay alguna forma de evitar que la página principal se desplace o alguna otra forma de evitar este error?
He reunido una idea de una página que reproduce el problema en dispositivos con iOS 10 o en el simulador.
Aquí hay una URL que puede usar en un teléfono: goo.gl/QYi7OE
Aquí hay un plunker para que pueda comprobar el comportamiento del escritorio: https://embed.plnkr.co/d61KtGlzbVtVYdZ4AMqb/
Y una versión esencial de ese plunker: https://gist.github.com/Coridyn/86b0c335a3e5bf72e88589953566b358
Aquí hay una versión ejecutable de la gist (la URL acortada arriba señala aquí): 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>
Cosas que hemos encontrado:
- El problema ocurre en iOS 10+ tanto en Safari como en Chrome
- El problema no ocurre en Safari iOS 9.3.2 (el comportamiento coincide con el navegador de escritorio, como se esperaba)
- El problema solo ocurre cuando se enfoca en elementos HTML sin entrada , por ejemplo, DIV, SPAN, etiquetas de anclaje, etc .; Establecer el enfoque en los elementos de
INPUTfunciona correctamente - Desktop Safari funciona bien
- Es la página principal la que se está desplazando, no el iframe (el iframe está dimensionado al 100% de su contenido para evitar el desplazamiento dentro del marco)
- Hemos intentado llamar a preventDefault en la página principal con:
window.onscroll = (event) => event.preventDefault();pero esto no funciona porque el evento descrollno es cancelable - El evento de
scrollgenerado en la página principal parece provenir de Safari / Webkit en sí mismo porque no hay otras funciones en la pila de llamadas (cuando se inspecciona con DevTools y Error.stack)
Tuve un problema similar con el salto de desplazamiento en iOS. Estaba sucediendo en todas las versiones de iOS para mí, 8, 9 y 10.
Probar su plunker en un dispositivo iOS 10 real no me causó el problema. No estoy seguro si he probado correctamente.
¿Puedes probar esta versión de tu plunker en iOS? https://embed.plnkr.co/NuTgqW/
Mi solución para mi problema fue asegurarme de que el cuerpo y la etiqueta html en el contenido del iframe tuvieran una altura y un ancho definidos del 100%, y un desplazamiento de desbordamiento. Esto fue capaz de forzar la dimensión del iframe. Evitó que el pergamino saltara.
Déjame saber si ayuda.