0

Gmail Web チャットまたはその他の Web チャットで、新しいテキストが入力されたことをどのように検出できますか

gmailでは、要素を検査するときの属性です

  <div chat-dir="f" class="km" role="chatMessage" aria-live="assertive">
  <div class="kk">
  ...
  ...
  </div>
  </div>

  <div chat-dir="t" class="km" role="chatMessage" aria-live="assertive">
  <div class="kk">
  ...
  ...
  </div>
 </div>

以下を使用しましたが、alert() が表示されません。テキストは以前の html に追加されているため、処理するチャット データを取得するにはどうすればよいですか

$("div.km").bind("DOMSubtreeModified", function() {
  alert("tree changed");
});

または、chat-dir 属性を使用してデータを取得できますか

EDIT 1:

Gmailチャットで次のことを試しましたが、一度でもアラートが表示されませんでした()

$(".AD").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});
$("div.kk").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

$('div.kk').on('webkitAnimationEnd animationend', 'div', function(e){
    console.log(e.target.tagName.toLowerCase() + ' added!');
    alert("heree")
});


$(document).ready(function() {
  alert("hello world in ready");  
    $('div.no').on('webkitAnimationEnd animationend', 'div', function(e){
        console.log(e.target.tagName.toLowerCase() + ' added!');
        alert("heree")
});
$('div.no').change(function() {
    alert('Handler for .change() called.');
});
$('div.kk').change(function() {
   alert('Handler for .change() called.');
});
$('.kk').change(function() {
  alert('Handler for .change() called.');
});
alert($('.kk').val());
$('km').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
    alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
    alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
});
4

1 に答える 1

1

最も簡単な方法 (ただし、CSS をサポートするブラウザーでのみ機能します@keyframes) は、CSS アニメーションを使用して、新しく追加されたコンテンツを (ただし短時間で) アニメーション化し、animationend(または、Webkit ではキャメル ケースのWebkitAnimationEnd) イベントを検出することです。次の HTML を使用した単純な概念実証:

<button id="add">Add more content</button>
<div id="holder"></div>

jQuery:

$('#holder').on('webkitAnimationEnd animationend', 'div', function(e){
    console.log(e.target.tagName.toLowerCase() + ' added!');
});

$('#add').click(function(){
    var addTo = $('#holder');
    $('<div />', {text: addTo.children().length})
    .appendTo(addTo);
});

CSS:

@-webkit-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#holder div {
    /* Firefox */
    -moz-animation: newContentAdded;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 0.1s;
    /* Chrome, Chromium, Webkit (future-opera?) */
    -webkit-animation: newContentAdded;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.1s;
}

JS フィドルのデモ。

参考文献:

于 2013-03-22T12:23:27.007 に答える