3

私は複雑なウェブアプリに取り組んでいます。

その中に、更新されるdivがあります。それは次のようなものを印刷します

[1/4]
[2/4]
[3/4]
[4/4]

おそらくどこかのjavascriptが次のようなもので更新されています：

div.innerHTML = "[2/4]";

私の質問は：

どういうわけか、innerHTMLの変更をインターセプト/（リッスン）して、それらにかかる時間を監視できるようにすることはできますか？

私はJavaScriptを挿入できる立場にあり、次のようなものを収集したいと思います。

console.log("1/4 has been called at timestamp");
console.log("2/4 has been called at timestamp");
console.log("3/4 has been called at timestamp");
...
4

1 に答える 1

3

対象のブラウザがミューテーションイベントをサポートしている場合は、ミューテーションイベントを使用してこれを行うことができる場合があります。これは、ミューテーションイベントをサポートするブラウザで動作するはずの小さなjsFiddleデモです。Chrome23でこれをテストしました

JavaScript：

var observable = document.getElementById('observable');

observable.addEventListener('DOMSubtreeModified', function(ev) {
  console.log(ev.target.nodeValue, ev.timeStamp);
}, false);

var i = 0;

observable.addEventListener('click', function(ev) {
    observable.innerHTML = ++i;
    return false;
}, false);​

HTML：

​&lt;div id="observable">click me and look at the console</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

​#observable {
    background-color:lightblue;
    height:42px;
}​
于 2012-09-14T09:31:35.220 に答える