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" />