0

我有 AJAX 代码

<!-- Body Code -->
Listeners: <span id="cc_stream_info_listeners"></span>

<!-- Footer Code -->   
<script type="text/javascript" src="http://mysite.com/system/streaminfo.js"></script>
<script type="text/javascript" src="http://mysite.com/js.php/radio/streaminfo/rnd0"></script>

它返回在线广播流的动态听众计数。此代码工作正常，但 js 文件位于远程主机上。所以我真的不知道它们是如何工作的。

我希望我的一个页面的页面标题动态包含侦听器计数。就像推特页面计算您的提要中可用的新推文一样。

例如(5) My Dashboard | My Site Name，其中数字是来自 AJAX 函数的动态侦听器计数。

这是我到目前为止所拥有的。

<!-- START: PAGE TITLE LISTENER CONTENT -->
<script>
function updatetitle() {
  var txt1 = "(";
  var txt2 = "5";
  var txt3 = ") My Dashboard | My Site Name";
  var n = txt1.concat(txt2,txt3);
  document.title = n;
}
</script>

<script>
window.onload = function() {
  updatetitle();
};
</script>

简单地替换文本“5”<span id="cc_stream_info_listeners">是行不通的。但至少我知道我的页面更新组件是正确的。因为它使用纯文本按预期工作。

如何合并这两个函数 - 以便动态更新侦听器计数？

4

1 回答 1

2

您可以使用 MutationObserver 检查元素何时#cc_stream_info_listeners被修改：https ://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

你选择一个节点来观察。对于您的项目，您应该遵守cc_stream_info_listeners. 然后，只要 dom 发生变化，就会触发回调。这减少了 setInterval 对浏览器造成的压力，因为它仅在事件实际发生时才被调用。

从文档修改：http: //jsfiddle.net/E5Rrc/

    // select the target node
    var title_tag = document.querySelector('title');
    var cc_stream_info_listeners = document.querySelector('#cc_stream_info_listeners');

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
          title_tag.innerHTML = '('+cc_stream_info_listeners.innerHTML+') My Dashboard | My Site Name';
      });    
    });

    // configuration of the observer:
    var config = { childList: true, characterData: true, subtree: true };

    // pass in the target node, as well as the observer options
    observer.observe(cc_stream_info_listeners, config);

    // this is just for testing, to show that it works.
    setInterval(function() {
        cc_stream_info_listeners.innerHTML++;
    }, 500);
于 2013-09-15T17:41:23.777 回答