Обновить страницу заголовок каждые 10 секунд - Javascript

Question

Я в настоящее время пытается освежить заголовок страницы каждые 10 секунд, чтобы убедиться, что информация песня меняется здесь:

Но после того, как изменения песни, я оставил с одной и той же страницы название:

функция My JavaScript setInterval не работает правильно.

Вот мой код (что должно было сработать):

<script type="text/javascript"> 
function songToTitle() { 
    document.title = "BDR | <?php echo $radio_info['now_playing']; ?>"; 
} 
songToTitle(); 
setInterval(songToTitle, 10000); 
</script> 
<title>BDR | Loading Song Title...</title> 

Я действительно не знаю, что здесь.

Он правильно импортирует имя песни, но не обновляется.

Может ли кто-нибудь помочь мне с этим?

EDIT:

Я попытался использовать это тоже:

<script type="text/javascript"> 
function songTitle(){ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.title.innerHTML = xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","http://www.x86cam.com/wp-content/plugins/songTitle.php",true); 
xmlhttp.send(); 
} 
songTitle(); 
setInterval(songTitle, 5000); 
</script> 

Это не будет даже загрузить название.

Answer 1

Хорошо. Я понял. Я положил это в моем коде:

<script type="text/javascript"> 
function songTitle(){ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.title=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","songTitle.php",true); 
xmlhttp.send(); 
} 
songTitle(); 
setInterval(songTitle, 5000); 
</script> 

В моей songTitle.php, он запрашивает название песни с сервера Icecast и отображает только что.

Всякий раз, когда песня меняется сейчас, она также меняет название.

Мне просто нужно было интегрировать XMLHTTPRequest, как я сделал, с тем, как я отображал информацию о песне на странице.

Answer 2

Вы не можете использовать этот php-код там, он не будет выполняться, когда функция запускается, потому что PHP работает на сервере, код теперь запущен в вашем браузере, поэтому, как только песня изменится, эта строка все еще будет той же самой строкой, когда браузер запросил ваш сервер для этого .html-файла

Вам нужно будет спросить у своего сервера, что текущий заголовок использует xhr-вызов за X секунд, а затем обновить заголовок на основе на том.

Answer 3

Вы обновляете статическую информацию. Чтобы получить новую информацию, вы должны использовать AJAX.

PHP загружен перед открытием браузера.

Другими словами ...

<?php echo $radio_info['now_playing']; ?> 

превращается в

'Song Name' 

так, когда Javascript смотрит на него, он видит только Song Name и тем не мудрее.

AJAX Reference - полная ссылка на API с примерами на странице, на которой вы можете отключить. Также должна быть запрограммирована ваша ответная страница для правильной реакции. Обычно я предлагаю JSON, но вы, вероятно, можете просто использовать перенос текста, так как это так мало данных.

Вы можете отправить данные с помощью POST и файл PHP может иметь что-то вроде этого на вершине:

<?php if ($_POST['songcheck'] === true) { echo $songName; return; }; ?> 

PS - освежающий каждые 10 секунд не очень эффективным.Когда песня загружена, вместо этого используйте длину песни +2 или +3 секунды. Намного лучше :)

Answer 4

Я думаю, вам нужно сделать вызов ajax или послушать какое-либо событие, чтобы получить обновленное название песни. Строка document.title = "BDR | <?php echo $radio_info['now_playing']; ?>"; генерируется при начальной загрузке страницы.