0

Estou com problema ao tratar o evento scroll de um iFrame usando JavaScript/jQuery no navegador Safari do iOS.

Estava inicialmente tentando pegar o evento scroll, mas não funciona. Pesquisando, vi que existe o evento touchend, como está implementado no código abaixo, mas também não está funcionando.

    <iframe src="doc.html" id="f" style="width: 100%; height: 600px; border: 0;"></iframe>

    <div id="s"></div>

    <script>
        function scroll_handler() {
            if ($(this).scrollTop() >= ($(this).height() - f.height())) {
                $('#s').text('OK');
            }
        }

        var f = $('#f');
        f.ready(function () {
            if ('ontouchstart' in window) {
                $(f.contents()).on('touchend', scroll_handler);
            } else {
                $(f.contents()).scroll(scroll_handler);
            }
        });
    </script>

Alguém tem alguma ideia de como consigo pegar o evento scroll de um iFrame?

Valeu!

1 Resposta 1

-1

Acredito que a melhor solucao para esse problema seria voce utilizar a API do postMessage.

A propria pagina desta API via MDN contem exemplos de como criar este canal de comunicacao.

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Com este voce pode mandar uma mensagem ao iframe ("ping") para executar algum commando, e assim como o iframe responder ("pong") a algum comando enviado.

Voce tambem pode utilizar a MessageChannel API para criar esse canal de forma mais simples.

https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel

Espero ter ajudado!

3
  • Obrigado pela resposta. Mas não consegui entender como essa API poderia ajudar com meu problema, já que quero apenas manipular o evento scroll. Testei meu código com sucesso no Chrome, Edge e IE para Windows, Chrome e Firefox para Linux, e Chrome para Android. Apenas no Safari no iOS ele não está funcionando. Commented 30/03/2020 às 15:58
  • Okay. Mas o que eu nao consegui entender entao eh? porque vc nao aplica o codigo que quer dentro do doc.html ao invez de deixar seu codigo relativamente complexo fazendo isso pelo parent window?
    – Caio Koiti
    Commented 31/03/2020 às 1:22
  • Oi Caio, eu não tenho controle sobre o conteúdo do iframe, por isso o código deve ficar na página que contém o iframe. A ideia é a seguinte: quero que um conteúdo esteja disponível apenas quando o usuário rolar o iframe até o fim (é o que o método scroll_handler faz de forma simplificada). O problema está no tratamento do evento scroll no navegador Safari no iOS, que o funcionamento é intermitente. Commented 31/03/2020 às 15:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .