Tengo un documento HTML que, en la parte inferior, contiene un iframe.
En este caso, el iframe incrusta una hoja de cálculo de Google, con el código:
<iframe id="gsheet-group" width="100%" height="400" src="https://docs.google.com/spreadsheets/d/<!----DOCUMENT_KEY----->/edit?usp=sharing&rm=minimal&gid=0&single=true&widget=false&chrome=false&headers=false">Loading sheet..</iframe>Creo que este iframe contiene algún javascript que hace que su ventana principal se desplace hacia la parte superior en ciertos eventos, como cuando se completa su carga o se navega por su contenido de ciertas maneras. (Este comportamiento persiste si el iframe está incrustado dentro de un segundo iframe).
Si no puedo modificar directamente el código fuente del iframe, ¿puedo evitar que javascript manipule una ventana principal en el contenido incrustado en iframe?
Agradezco a los comentaristas por las sugerencias, ninguna de las cuales lamentablemente ha resuelto el problema:
sandbox="allow-scripts allow-forms allow-pointer-lock allow-same-origin" al elemento <iframe> (para eliminar allow-top-navigation ; @CBroe).window.scrollTo (@Ryano)Una de esas API que permitiría incluso que los iframes de origen cruzado se desplacen por el documento superior es Element#scrollIntoView() . No verifiqué que es realmente lo que estaba haciendo su página incrustada, pero parece una explicación muy plausible.
Aquí hay un ejemplo mínimo. Reproducir:
(También puede hacer clic en el iframe de resultados para llamar a scrollIntoView nuevamente, 2 segundos más tarde).
onclick = e => setTimeout(() => { document.body.scrollIntoView(); }, 2000); onclick(); Scroll to the top of the top page and wait 2s. Después de investigar las especificaciones, me temo que no existe una solución lista para usar para evitar este comportamiento...
Sin embargo, una cosa notable es que Chrome no se desplazará a elementos fijos en un iframe . Esto significa que en realidad podemos modificar este error para definir una capa de "parada de desplazamiento": puede envolver el iframe de destino en otro iframe, establecer la posición de este iframe interno en fijo y para que cubra completamente el iframe envolvente. Esto evitará que Chrome desplace los ancestros de este iframe:
iframe { position: fixed; top: 0; width: 100vw; height: 100vh; border: none; padding: 0; margin: 0; } <iframe srcdoc=" <script> onclick = e => setTimeout(() => { document.querySelector('h1').scrollIntoView(); }, 2000); onclick(); </script> <h1 style='margin-top: 100vh' >I still scroll into view, but not the top page.</h1> "></iframe> Sin embargo, esto es un truco completo, es básicamente un error de explotación, obviamente no funciona en otros navegadores web e incluso puede fallar en una versión futura de Chrome, si solucionan el problema.
Pero eso es lo único que pude encontrar por ahora.
Sin embargo, lo que te invito a hacer es expresar tu punto de vista en el repositorio de Github del grupo de trabajo de CSS del W3C para que consideren agregar una propiedad que permitiría esta función oficialmente.
Después de seguir el consejo de @Kaiido de hacer un seguimiento de esto en el W3C, los comentarios allí confirmaron que el comportamiento deseado no es compatible con los estándares actuales. Si se acepta, una propuesta permitirá deshabilitar el desplazamiento vertical a través de:
<iframe src="..." allow="vertical-scroll 'none'"></iframe>El estado de la propuesta se puede seguir aquí .