录制和重播javascript [英] Record and replay javascript
问题描述
我知道可以录制鼠标移动，滚动和击键。但是对文档的更改呢？如何记录对文档的更改？
这是我的尝试。必须有一个更简单的方法来存储所有事件吗？
我感谢所有我能得到的提示！
<！DOCTYPE html>
< html>
< head>
< title>记录和重播javascript< / title>
< / head>
< body id =if_no_other_id_exist>
< div style =height：100px; background：＃0F0id =test1>点击我< / div>
< div style =height：100px; background：＃9F9class =test2>点击我< / div>
< div style =height：100px; background：＃3F9id =test3>点击我< / div>
< div style =height：100px;背景：＃F96id =test4>点击我< / div>
< script src =http://code.jquery.com/jquery-latest.min.js>< / script>
< script>
$（document）.ready（function（）{
var the_time_document_is_redy = new Date（）。getTime（）;
var the_replay ='';
$（'div'）。live（click，function（）{
var the_length_of_visit = new Date（）。getTime（） - the_time_document_is_redy;
//检查点击的元素是否具有id
if（this.id）
{
the_replay =
the_replay
+
setTimeout（\$（'＃
+
this.id
+
'）。turigger（'click'）\ ，
+
the_length_of_visit
+
）;
;
alert（
The以下javascript将包含在重播版本的文件中：\ n \ n
+
the_replay
）//结束提醒
} //结束如果
//如果它没有id，检查点击的元素是否具有类
else if（this.className）
{
//找到最接近的id来更好地定位元素（在我的应用中需要）
var最接近_div_with_id = $（this）.closest（'[id]'）。attr（'id'）;
the_replay =
the_replay
+
setTimeout（\$（'＃
+
nearest_div_with_id
+
。
+
this.className
+
'）。strigger（'click'）\，
+
the_length_of_visit
+
）;
;
alert（
以下javascript将包含在重播版本的文件中：\ n \ n
+
the_replay
）//结束提醒
} //结束如果
}）;
//如果没有其他id的
$（'body'）则回退。 （ 'ID'， 'if_no_other_id_exist'）;
//在重播版本中如何工作的示例
setTimeout（$（'＃test1'）。trigger（'click'），10000）;
}）;
< / script>
< / body>
< / html>
仅使用Javascript重播用户操作复杂的问题。
首先，你无法移动鼠标光标，也无法模拟鼠标悬停/悬停。因此，用户与页面的交互很大程度上消失了。
其次，一旦录制了动作，大多数时候它们必须以不同的方式重放环境比他们首先记录的要多。我的意思是你可以用较小的分辨率，不同的客户端浏览器，基于重放浏览器cookie等的不同内容重播屏幕上的操作。
如果你花时间学习可用的话使您能够记录网站访问者操作的服务（ http://clicktale.com ， http://userfly.com/ 仅举几例），您会看到没有一个能够完全重播用户操作，尤其是在鼠标悬停时，ajax复杂的JS小部件。
关于检测对DOM所做更改的问题 - 正如Chris Biscardi在答案中所述，有突变事件，专为此而设计。但是，请记住，它们并未在每个浏览器中实现。也就是说，IE不支持它们（根据msdn上的博客条目，它们将在IE 9中受支持http://blogs.msdn.com/b/ie/archive/2010/03/26/dom-level-3-events- support-in-ie9.aspx ）。
根据用例，依赖这些事件可能适合您。
至于更简单的方式来存储所有事件。还有其他方法（语法方面），监听您选择的事件，但处理（=存储）它们不能以简单的方式处理，除非您想序列化整个事件对象，这不是一个好主意，如果您要将有关这些事件的信息发送到某个服务器来存储它们。您必须意识到这样一个事实，即在使用网站时会出现大量事件，因此需要存储大量潜在数据/发送到服务器。
<我希望我清楚自己，你会发现其中一些信息很有用。我自己参与了旨在做你想要做的事情的项目，所以我知道一旦你开始深入研究这个主题，它会变得多么复杂。
I know it is possible to record mouse movements, scrolling and keystrokes. But what about changes to the document? How can I record changes to the document?
Here is my try out. There must be a better more simple way to store all events?
I am thankfull for all tips I can get!
<!DOCTYPE html>
<html>
<head>
<title>Record And replay javascript</title>
</head>
<body id="if_no_other_id_exist">
<div style="height:100px;background:#0F0" id="test1">click me</div>
<div style="height:100px;background:#9F9" class="test2">click me</div>
<div style="height:100px;background:#3F9" id="test3">click me</div>
<div style="height:100px;background:#F96" id="test4">click me</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
var the_time_document_is_redy = new Date().getTime();
var the_replay = '';
$('div').live("click", function (){
var the_length_of_visit = new Date().getTime() - the_time_document_is_redy;
// check if the element that is clicked has an id
if (this.id)
{
the_replay =
the_replay
+
"setTimeout(\"$('#"
+
this.id
+
"').trigger('click')\","
+
the_length_of_visit
+
");"
;
alert (
"The following javascript will be included in the file in the replay version:\n\n"
+
the_replay
) // end alert
} // end if
// if it does not have an id, check if the element that is clicked has an class
else if (this.className)
{
// find the closest id to better target the element (needed in my application)
var closest_div_with_id = $(this).closest('[id]').attr('id');
the_replay =
the_replay
+
"setTimeout(\"$('#"
+
closest_div_with_id
+
" ."
+
this.className
+
"').trigger('click')\","
+
the_length_of_visit
+
");"
;
alert (
"The following javascript will be included in the file in the replay version:\n\n"
+
the_replay
) // end alert
} // end if
});
// fall back if there are no other id's
$('body').attr('id','if_no_other_id_exist');
// example of how it will work in the replay version
setTimeout("$('#test1').trigger('click')",10000);
});
</script>
</body>
</html>
Replaying user actions with just Javascript is a complex problem.
First of all, you can't move mouse cursor, you can't emulate mouseover/hovers also. So there goes away a big part of user interactions with a page.
Second of all, actions, once recorded, for most of the time they have to be replayed in different environment than they were recorded in the first place. I mean you can replay the actions on screen with smaller resolutions, different client browser, different content served based on replaying browser cookies etc.
If you take a time to study available services that enable you to record website visitors actions ( http://clicktale.com, http://userfly.com/ to name a few), you'll see that none of them are capable of fully replaying users actions, especially when it comes to mouseovers, ajax, complex JS widgets.
As to your question for detecting changes made to the DOM - as Chris Biscardi stated in his answer, there are mutation events, that are designed for that. However, keep in mind, that they are not implemented in every browser. Namely, the IE doesn't support them (they will be supported as of IE 9, according to this blog entry on msdn http://blogs.msdn.com/b/ie/archive/2010/03/26/dom-level-3-events-support-in-ie9.aspx).
Relying on those events may be suitable for you, depending on use case.
As to "better more simple way to store all events". There are other ways (syntax wise), of listening for events of your choice, however handling (= storing) them can't be handled in simple way, unless you want to serialize whole event objects which wouldn't be a good idea, if you were to send information about those event to some server to store them. You have to be aware of the fact, that there are massive amount of events popping around while using website, hence massive amount of potential data to be stored/send to the server.
I hope I made myself clear and you find some of those information useful. I myself have been involved in project that aimed to do what you're trying to achive, so I know how complicated can it get once you start digging into the subject.
这篇关于录制和重播javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
