3

Bom, eu estou com o seguinte problema: Estou construindo uma página de chat, já estou recebendo as mensagens de boa, só que ao entrar nessa página de chat eu queria que automaticamente descesse ao final da página, no caso, onde estariam as mensagens mais recentes.

Segue o código:

function ajax(){
    var req = new XMLHttpRequest();
    req.onreadystatechange = function(){
        if (req.readyState == 4 && req.status == 200) {
            document.getElementById('mensagens').innerHTML = req.responseText;
        }
    }

    req.open('GET', 'mensagens.php', true);
    req.send();
    final();
}

setInterval(function(){ajax();}, 1000);

var x = 0;

function final(){
    if(x == 0){
        parent.scroll(0, 10000);
        x++;
    }
}

Se eu retirar esse if (da função final) deixando, apenas, o parent.scroll(0, 10000); ele descerá ao final de um em um segundo, porém eu quero ir apenas na 1° vez que a página for acessada. Teria outra forma de parar essa função sem ser esta que estou usando? (Detalhe, esta forma usada por mim não está funcionando e, também, não consegui para-la com um return ou break).

4 Respostas 4

1

Use window.scrollTo() após um setTimeout:

document.addEventListener("DOMContentLoaded", function(){
   setTimeout(function(){
      window.scrollTo(0, 10000);
   }, 10);
   setInterval(ajax, 1000);
});

function ajax(){
   // aqui o código do ajax
}
Início
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Fim!

4
  • Deu certo também não Commented 18/06/2018 às 15:57
  • Obrigado a todos pela ajuda, mas estou desistindo de realizar essa função. Não sou muito bom com JS mesmo, então vou apenas deixar um botão flutuante para descer ao final quando clicado, não é bem o que eu queria, mas vai funcionar pelo menos. Commented 18/06/2018 às 15:58
  • Rode o exemplo e veja que funciona. Mas tente o seguinte: aumente o tempo de 10 para 500, ou aumente para 1000.
    – Sam
    Commented 18/06/2018 às 15:59
  • Cara, valeu aí. Seu código resolveu Commented 19/06/2018 às 10:26
0

Cara, você setou um setInterval de 1 em 1 segundo, ele vai sempre ir pro final do chat. Única coisa que você precisa fazer pra ele rodar uma vez só quando abrir a página, é tirar o setInterval e executar diretamente a função com o ajax()

4
  • Bom, preciso do setInterval para atualizar as mensagens do chat. Também já tentei chamar a função final em um onload no body, também não foi. Estou sem saber o que fazer, já que até já simulei um click de um botão invisivel para que ele vá ao final e, sim, com um click normal desse botão ele vai ao final da página. Commented 18/06/2018 às 14:53
  • Então usa a final() direto e remove ela da função ajax(). Você precisa do setInterval so pra atualizar as mensagens, não precisa pra ir pra baixo. Commented 18/06/2018 às 14:55
  • Cara, não funcionou nem com um onload no body e nem com um window.onload em JS, mas se tiver outra forma me diz aí, porque nesses outros métodos ele simplesmente ignora a existência de uma função. Commented 18/06/2018 às 15:06
  • Obrigado a todos pela ajuda, mas estou desistindo de realizar essa função. Não sou muito bom com JS mesmo, então vou apenas deixar um botão flutuante para descer ao final quando clicado, não é bem o que eu queria, mas vai funcionar pelo menos. Commented 18/06/2018 às 15:55
0

Voce pode usar a funcao onload no HTML da pagina:

<body onload="final()">

Vai executar soh quando o usuario entrar na pagina, entao voce tem que remover a chamada no codigo Ajax pra nao ficar dando load toda hora:

function ajax(){
    var req = new XMLHttpRequest();
    req.onreadystatechange = function(){
        if (req.readyState == 4 && req.status == 200) {
            document.getElementById('mensagens').innerHTML = req.responseText;
        }
    }

    req.open('GET', 'mensagens.php', true);
    req.send();
}

Link de apoio: https://www.w3schools.com/Jsref/event_onload.asp

7
  • Cara, não vai, eu estou indignado, a função está funcionando normalmente, mas ao ser chamada via onload não executa, nem com essas gambiarras que utilizei no código do início. Commented 18/06/2018 às 15:00
  • As vezes da uns errinhos por nao usar ; na chamada tipo <body onload="final();">
    – lipesmile
    Commented 18/06/2018 às 15:04
  • Eu já estava usando o ;, mas tanto com quanto sem ele dá na mesma, ele continua ignorando a função. Commented 18/06/2018 às 15:08
  • Coloquei um alert na função final só de teste mesmo e ele executou normalmente, mas a função para rolar ele ignora de todas as formas Commented 18/06/2018 às 15:09
  • Tenta declarar a variavel x dentro da funcao
    – lipesmile
    Commented 18/06/2018 às 15:19
0

Só remover o final(); de dentro do Ajax para que ele não vá para o final do chat a cada 1 segundo, e chamar o final(); após popular.

window.onload = function(){ //Quando TODO o documento for carregado. 
    function ajax(){
        var req = new XMLHttpRequest();
        req.onreadystatechange = function(){
            if (req.readyState == 4 && req.status == 200) {
                document.getElementById('mensagens').innerHTML = req.responseText;
            }
        }
        req.open('GET', 'mensagens.php', true);
        req.send();
    }
    function final(){
        ajax(); //Se certificar de que o chat está atualizado
        parent.scroll(0, 10000);
    }
    final(); //Depois de popular o chat, ir para o final.  
    setInterval(function(){ajax();}, 1000); //Atualiza a cada 1 segundo

}
9
  • Funcionou não, ele simplesmente lê as mensagens passadas pela função ajax() e pronto. Mas só uma dúvida com este teu código, eu não devo colocar um onload não, né? Apenas utilizar este seu código? Commented 18/06/2018 às 15:02
  • Melhor por o onload pois você se certifica de que todo o HTML foi carregado para só depois executar o Javascript. Commented 18/06/2018 às 15:07
  • @HigorCardoso atualizei, eu coloquei o ajax(); dentro do final, assim quando chamar final() você vai se certificar de que o conteúdo foi carregado. Commented 18/06/2018 às 15:09
  • Também não funcionou Commented 18/06/2018 às 15:13
  • @HigorCardoso você diz que n funcionou o parent.scroll(0, 10000); né ? outra coisa, antes quando era seu código, estava funcionando normal ? Commented 18/06/2018 à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 .