Fatal编程技术网

录制和重播Javascript

javascript

录制和重播Javascript,javascript,dom-events,Javascript,Dom Events,我知道可以记录鼠标移动、滚动和按键。但是对文档的更改呢？如何记录对文档的更改 这是我的尝试。必须有更好更简单的方法来存储所有事件吗 我很感谢所有我能得到的提示 <!DOCTYPE html> <html> <head> <title>Record And replay javascript</title> </head> <body id="if_no_other_id_exist"> <div styl

我知道可以记录鼠标移动、滚动和按键。但是对文档的更改呢？如何记录对文档的更改

这是我的尝试。必须有更好更简单的方法来存储所有事件吗

我很感谢所有我能得到的提示

<!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>


录制和重播javascript
点击我
点击我
点击我
点击我
$（文档）.ready（函数（）{
var时间文档是新日期（）.getTime（）；
var_replay=''；
$（'div'）.live（“单击”），函数（）{
var\u visit的\u length\u=new Date（）.getTime（）-文档\u是\u redy；
//检查单击的元素是否具有id
if（this.id）
{
重播=
重播
+
“设置超时（\”$（'#）”
+
这是我的身份证
+
“）。触发器（'click'）\”
+
访问的时间
+
");"
;
警觉的(
“以下javascript将包含在重播版本的文件中：\n\n”
+ 
重播
)//结束警报
}//如果结束，则结束
//如果没有id，请检查单击的元素是否有类
else if（this.className）
{
//查找最接近的id以更好地定位元素（我的应用程序中需要）
var NESSECEST_div_和_id=$（this）.NESSECEST（'[id]'）.attr（'id'）；
重播=
重播
+
“设置超时（\”$（'#）”
+
最近的\u div\u与\u id
+
" ."
+
这个.className
+
“）。触发器（'click'）\”
+
访问的时间
+
");"
;
警觉的(
“以下javascript将包含在重播版本的文件中：\n\n”
+ 
重播
)//结束警报
}//如果结束，则结束
});
//如果没有其他id，请后退
$（'body'）.attr（'id'，'if\u no\u other\u id\u exist'）；
//在重播版本中如何工作的示例
setTimeout（“$”（“#test1”）.trigger（'click'）”，10000）；
});
我相信您正在寻找突变事件

以下是一些供您参考的资源：

更新：

作为对评论的回应，一个非常非常基本的实现：

//callback function
function onNodeInserted(){alert('inserted')}
//add listener to dom(in this case the body tag)
document.body.addEventListener ('DOMNodeInserted', onNodeInserted, false); 
//Add element to dom 
$('<div>test</div>').appendTo('body')

//回调函数
函数onNodeInserted（）{alert（'inserted'）}
//将侦听器添加到dom（在本例中为body标记）
document.body.addEventListener（'DOMNodeInserted'，onNodeInserted，false）；
//向dom添加元素
$（'test'）。附录（'body'））
正如WTK所说，您正在进入一个复杂的领域。

仅使用Javascript重放用户操作是一个复杂的问题

首先，您不能移动鼠标光标，也不能模拟鼠标悬停。因此，大部分用户与页面的交互都消失了

第二，动作一旦被记录下来，在大多数情况下，它们必须在不同于最初记录的环境中重放。我的意思是，你可以在屏幕上以更小的分辨率、不同的客户端浏览器、基于浏览器cookies的不同服务内容等重放操作

如果您花点时间研究可用于记录网站访问者操作的可用服务（，仅举几例），您会发现没有一个能够完全重放用户操作，尤其是在鼠标盖、ajax和复杂的JS小部件方面

至于您关于检测对DOM所做的更改的问题，正如Chris Biscardi在他的回答中所说的，有一些是专门为此而设计的。但是，请记住，它们并不是在每个浏览器中都实现的。也就是说，IE不支持它们（根据msdn上的这篇博文，从IE9开始，它们将得到支持）

依赖这些事件可能适合您，具体取决于用例

至于“存储所有事件的更好更简单的方法”。还有其他方法（语法方面）监听您选择的事件，但是处理（=存储）它们不能用简单的方法来处理，除非您想序列化整个事件对象，如果您要将这些事件的信息发送到某个服务器来存储它们，这将不是一个好主意。您必须意识到这样一个事实，即在使用网站时会出现大量事件，因此需要存储/发送大量潜在数据到服务器

我希望我说清楚了，你会发现其中一些信息很有用。我自己也参与了一个项目，这个项目的目标是做你们想做的事情，所以我知道一旦你们开始深入这个主题，它会变得多么复杂。

我对这个问题感到好奇，并在这里实施了一个概念证明

使用演示
  • 尝试按record，单击周围，再次按record，然后单击play
  • Play创建一个
    ，注入原始HTML并重播用户事件
  • 要更改缩放，请更改源代码中的
    REPLAY\u SCALE
    变量
  • 要更改播放速度，请更改源代码中的
    speed
    变量
  • NB I仅在chrome 56上测试jsbin
实施详情：
  • 它支持鼠标移动、单击和键入。我省略了其他内容（滚动、窗口大小调整、悬停、聚焦等），但应该很容易扩展
  • 事件侦听器在侦听文档上的事件时使用捕获绕过任何
    event.stopPropagation（）
  • 使用
    zoom
    CSS3以不同分辨率显示播放
  • 可以覆盖透明画布来绘制鼠标的轨迹线。我只使用一个简单的div，所以没有跟踪线
考虑事项：
  • 想象我们正在一个真实的网站上捕捉用户事件。由于从现在起到回放期间，所服务的页面可能会发生变化，因此在iframe中回放录制时，我们不能依赖客户端的服务器。相反，我们必须快照html、所有ajax请求以及录制过程中发出的资源请求。在演示中，为了简单起见，我只对HTML进行了快照。然而，实际上，所有额外的请求都必须实时存储在服务器上，因为它们是在客户端页面上下载的。此外，在回放期间，使用用户感知到的相同时间线回放请求非常重要。模拟请求t