iframeのサイズ変更の問題に取り組んでいたときに、この問題が発生しました。私が望んでいたのは、の高さに変化があるたびに親ページに伝えることでしたdocument
.
私が見つけたのは、jQuery がそのような機能を直接提供していないことです。これの主な理由は、DOM を監視しているときに表示されないアクティビティが多すぎるためです ( bind
)。ただし、ドキュメント上でのマウスの移動などの特定のプロパティを監視することはできます。
$(document).mousemove(function(e){
console.log(e.pageY);
console.log(e.pageX);
});
しかし、これはユーザーがあなたのページを操作していることを意味するものではありません。これは、ユーザーがあなたのページにいて、マウスが動いていることを意味するだけです。また、ユーザーはマウスを動かさず、キーボードを使用してページを操作している可能性もあります。そのため、キーボードの操作にも注意する必要があります。
$(document).keyup(function(e){
console.log('active');
});
これらを使用して、設定された時間間隔の後にフラグをチェックするカウントダウン関数を作成できます。ユーザーがアクティビティを行う場合、フラグを設定できます。そして、その関数が一定時間経過した後、「noactivity()」関数 ID フラグは設定されていません。
ドキュメントのアクティビティを監視するもう 1 つの方法は、変更されている DOM サブツリーを監視することです。
jQuery(document).bind('DOMSubtreeModified', function() {
console.log('active');
});
これは Chrome/FireFox/IE8+ では機能しますが、Opera (すべてのバージョン) では機能しません。主な理由は、ブラウザのリソースに対して操作が重すぎるためです。また、DOM 変更イベントをリッスンするとパフォーマンスが低下する可能性があり、関連する W3C ワーキング グループはこれを行うためのより良い方法を見つけようとしており、この理由で DOM 変更イベントを廃止しようとしているため、このアプローチの使用はお勧めしません。パフォーマンスの高い実装。
上記の他のオプションも良いと言っているわけではありません。また、監視している場合はコストのかかる操作document
であり、避ける必要があります。これらのオプションのもう 1 つの問題は、iframe コンテンツが特にあなたの一部ではdocument
なく、ユーザーが iframe コンテンツを操作している場合、これらのオプションが機能しないことです。
つまり、W3C は、ユーザーがドキュメント サブツリーの変更を監視できる安価な方法をまだ最終決定していないということです。