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 ファイルはリモート ホストにあります。だから私は彼らがどのように働いているのか本当に知りません。

私のページの 1 つのページ タイトルに動的にリスナー カウントを含めたいと考えています。Twitter ページがフィードで利用可能な新しいツイートをカウントするのと同じように。

たとえば(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">は機能しません。しかし、少なくともページ更新コンポーネントが正しいことはわかっています。プレーンテキストで期待どおりに機能しているためです。

これら 2 つの関数をマージするにはどうすればよいですか? リスナー数が動的に更新されるようにするにはどうすればよいですか?

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 に答える