Stack Overflow em Português Asked by Costamilam on September 27, 2021
Eu estou criando uma página que será utilizada como um iframe em outras aplicações, para testar como ela se comportava em diferentes tamanhos, criei uma página e adicionei diversos iframes para a página que estava fazendo, porém com tamanhos diferentes.
Nessa página há uma opção "Fullscreen" que entra em modo tela cheia, ao entrar em tela cheia e depois sair, mesmo sem navegar pelo iframe, a página que embeda o iframe rola um pouco para cima, esse comportamento ocorre apenas testando diretamente no celular, no desktop, mesmo emulando um mobile, isso não ocorre
Para entender o que poderia estar fazendo isso, fiz um teste com o mínimo para iniciar o fullscreen, criei uma pagina com apenas um iframe:
<iframe
src="data:text/html;base64,PGJ1dHRvbiBvbmNsaWNrPSJkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQucmVxdWVzdEZ1bGxzY3JlZW4oKSI+ZnM8L2J1dHRvbj4="
frameborder="0"
allowfullscreen
style="margin: 50vh 10%; width: 80%; height: 35vh;"
></iframe>
Conteúdo do iframe em base64:
<button onclick="document.documentElement.requestFullscreen()">fs</button>
Fiz os mesmos testes, recarreguei a página, rolei para baixo, cliquei no botão e saí do fullscreen (tecla "esc" no desktop e o voltar do Android), dessa fez, sempre (mobile, desktop e desktop emulando mobile) rolava a página para cima
Fiz mais alguns testes para verificar se o código que inicia o fullscreen, alguma meta tag ou o estilo do html e do body poderiam afetar esse comportamento, porém, os resultados continuaram igual
Testei em Android com o Chrome 83 e em Linux com Chromium 83
A página que estou criando ocupa sempre 100% do tamanho do device, nenhum pixel a mais ou a menos, então ela não possui scroll, todos os elementos possuem o position: fixed
ou seu container o possui. O código que controla o fullscreen é esse:
const requestFullscreen =
document.documentElement.requestFullscreen ||
document.documentElement[
Object.keys(document.documentElement).find(key =>
key.endsWith("RequestFullscreen")
)
]
function force() {
if (document.fullscreenElement === null) setTimeout(() => enter(), 500)
}
function enter() {
if (document.fullscreenEnabled && requestFullscreen)
requestFullscreen
.call(document.documentElement)
.then(() => force())
.catch(() => force())
}
const exitFullscreen =
document.exitFullscreen ||
document[
Object.keys(document).find(
key => key.endsWith("ExitFullscreen") || key.endsWith("CancelFullscreen")
)
]
function exit() {
if (exitFullscreen) exitFullscreen.call(document)
}
function toggle() {
document.fullscreenElement !== null ? exit() : enter()
}
O que causa e como impedir esse rolamento na página que embeda o iframe?
Uma possível solução será:
<iframe src="" scrolling="no"></iframe>
e no css:
iframe {
overflow: hidden;
}
Answered by Guilherme Pereira on September 27, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP