1

Tenho uma página de rádio e preciso que a capa da música atual mude automaticamente, atualizando-a de 5 em 5 segundos, pegando a imagem de um arquivo externo que chamo de lista-musicas.php que retorna a tag:

<img src="url-da-imagem" /> 

Eu tentei usar este código na página principal:

<script type="text/javascript">
    function atualiza_dados(){
        document.getElementById("tocando-agora").load("_includes/lista-musicas.php");
    }
    window.setInterval("atualiza_dados()", 4000);
</script>

<body onload="atualiza_dados()">
    <div id="tocando-agora"></div>
</body>

Porém, a requisição não funciona e a tag <img> não é carregada...
Eu comecei a aprender javascript há 2 dias, porém estou querendo resolver isso e não consigo, alguém me pode ajudar?

2 Respostas 2

4

Estás a misturar JavaScript com a Framework jQuery. O método .load() de jQuery serve precisamente para o que pretendes, mas em "Vanilla JS" as coisas funcionam de uma forma diferente.

Com jQuery:

$( "#minhaId" ).load( "ficheiro.html" );

A tua função ficaria:

function atualiza_dados(){

  // ler conteúdo do ficheiro para dentro do elemento indicado
  $( "minhaId" ).load( "ficheiro.html" );

  // esperar 4 segundos e chamar
  setTimeout( atualiza_dados, 4000 );
}

// executar código quando o DOM estiver pronto
$(function(){

  atualiza_dados(); // primeira chamada
});

Com JavaScript:

De forma rápida podemos carregar o HTML numa tag <object/> definindo o seu conteúdo como text/html:

document.getElementById("minhaId").innerHTML='<object type="text/html" data="ficheiro.html" ></object>';

De notar que este método está a tornar-se obsoleto.

A tua função ficaria:

function atualiza_dados(){

  // inserir um objeto na página a apontar para o ficheiro
  document.getElementById("minhaId").innerHTML='<object type="text/html" data="ficheiro.html" ></object>';

  // esperar 4 segundos e chamar
  setTimeout( atualiza_dados, 4000 );
}

// executar código quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function(){ 
  atualiza_dados(); // primeira chamada
}, false);

De forma elaborada e mais funcional deverias fazer uso de uma <iframe/> para garantires que o HTML que vais carregar na página não vai interferir com a mesma.

A tua função poderia ficar da seguinte forma:

function atualiza_dados() {

   var con = document.getElementById('minhaId')
   ,   xhr = new XMLHttpRequest();

   xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
     con.innerHTML = xhr.responseText;
    }
   }

 xhr.open("GET", "http://www.example.com/ficheiro.html", true);
 xhr.setRequestHeader('Content-type', 'text/html');
 xhr.send();
}

Mudar imagem

Se o teu objetivo é única e exclusivamente atualizar a imagem de capa, podes simplificar bastante o processo se o teu script no lado do servidor estiver a enviar apenas a imagem pretendida.

O teu código poderia ficar da seguinte forma:

function atualiza_dados() {

  // localizar a imagem
  var img = document.getElementById("imagem");

  // alterar a imagem com novo timestamp
  img.src = (img.src).split('?')[0] + '?' + new Date().getTime();

  // esperar 4 segundos e chamar novamente
  setTimeout(atualiza_dados, 4000);
}

// executar código quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function() {

  // primeira chamada
  setTimeout(atualiza_dados, 4000);

}, false);

E o teu script em PHP:

<?php

// apanhar nova capa de forma XPTO aqui ...

// enviar imagem para navegador
$file = '../caminho/para/ficheiro.jpg';
$type = 'image/jpeg';
header('Content-Type:'.$type);
readfile($file);
?>

Exemplo

Neste exemplo, podes ver a imagem a mudar, particularmente o número contido nela.

var contador = 1;

function atualiza_dados() {

  // localizar a imagem
  var img = document.getElementById("imagem");

  // alterar a imagem
  img.src = img.src.replace("Zuul+" + contador, "Zuul+" + (contador + 1));

  contador++;

  // esperar 4 segundos e chamar novamente
  setTimeout(atualiza_dados, 4000);
}

// executar código quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function() {

  // primeira chamada
  setTimeout(atualiza_dados, 4000);

}, false);
<img id="imagem" src="https://placeholdit.imgix.net/~text?txtsize=14&bg=333333&txtclr=ffffff&txt=Zuul+1&w=200&h=200" alt="BuBu" />

2

Seria de certo modo desajeitado converter o método .load() do JQuery que você está tentando utilizar para o javascript puro.

Você pode converter sua necessidade para 100% JQuery. Experimente:

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

(...)

<div id="tocando-agora"></div>

(...)

JavaScript

$(document).ready(function()
{
    setInterval(function()
    {
        $("#tocando-agora").load("_includes/lista-musicas.php");
    }, 4000);
});

Demo

JSFIDDLE

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 .