每10秒刷新页面标题 - Javascript

Question

我目前正在尝试每隔10秒刷新一次页面标题，以确保歌曲信息在此处更改：

但是在歌曲改变之后，我留下了相同的页面标题：

我的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>

我真的不知道这里有什么。

它正确导入歌曲名称，但不刷新。

任何人都可以帮我吗？

修改

我也尝试过使用它：

<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

你不能在那里使用那个php代码，当函数运行时它不会执行，因为PHP在服务器上运行，代码现在在浏览器中运行，所以一旦歌曲改变，那个字符串仍然会运行与浏览器向服务器询问该.html文件时的字符串完全相同

您必须询问服务器当前标题使用xhr调用的时间是X秒，然后根据该标题刷新标题。

Answer 2

您正在刷新一条静态信息。要获取新信息，您必须使用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 3

我猜你应该做一个ajax调用或者听一些事件来检索更新的歌曲标题。 document.title = "BDR | <?php echo $radio_info['now_playing']; ?>";字符串是在初始页面加载时生成的。

Answer 4

好。我想到了。 我把它放在我的代码中：

<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以及如何在页面上显示歌曲信息。