为CONTENTdiff中所指定的当前文 本内谷。
[0093]HTML差异
[0094] 如果数目、类型或子节点的值发生变化则适用第三类差异，即HTMLdiff。HTML diff的JSON表示的示例为：
[0095] {
[0096] "diff": "HTML",
[0097] ''path": "#anid"，
[0098] "data":"abc〈b>def〈/b>ghi"
[0099] }
[0100] 其中，"data"是由#anid识别要素内的当前HTML标记。目前，当检测到HTMLdiff 时，访问者的JavaScript会发送新的完全更新。备选地，一些HTMLdiff可作为差异更新 来被处理。
[0101] 累积差异
[0102] 随着DOM发生变化，访问者向Cserver发送这些变化的JSON表示。Cserver将增 量变化转发给已接收到访问者页面并与Cserver具有开放式WebSocket连接的任何代理。 为了确保尚未检索到访问者页面或尚未与Cserver建立WebSocket连接的任何代理都能得 到整组的变化，Cserver必须存储自访问者首次发送页面起出现的累积差异集合。通常情况 下，如在marquis的示例中，网页DOM进行多次改变。在发生这种情况时，Cserver可通过 要应用的增量的任意长列表来终止。代理加入会话将需要下载并采用这个长列表。这可能 表现欠佳并可能导致代理视图的闪烁。相同的页面要素通常每次以相同的方式来变化（例 如，<img>标签的"src"属性会在一系列图像中旋转），这导致针对同一要素的一序列ATTR diff。为防止增量DOM变化的积累，访问者的JavaScript不仅会发送最新的增量变化，而 且还会发送合并的累积变化（累积差异）的集合。如果相同的要素具有适用于它的相同的 改变类型，那么最新变化将覆盖累积差异中的旧变化。
[0103]例如，
[0104] {
[0105] "diff" ： "ATTR"，
[0106] " path " ： " #ane I ement i d ''，
[0107] "data" ： { "style" ： " color :red" }
[0108] }
[0109] 后面是：
[0110] {
[0111] "diff" ： "ATTR"，
[0112] "path'，：'，#aneIementid'，，
[0113] "data" ： { "style" ：'，color :blue" }
[0114] }
[0115] 将合并到单个累积差异中：
[0116] {
[0117] "diff" ："ATTR"，
[0118] " path " ： " #ane I ement i d "，
[0119] "data" ： { "style" ： " color :blue" }
[0120] }
[0121] 在将累积差异收集并合并在访问者端的实施例中，当代理查看网页时，查看器将 检索并显示初始的页面HTML。然后，查看器通过WebSocket连接来检索当前的累积差异集 合，然后将这些差异应用于视图。随着增量的差异从访问者端到来，通过WebSocket连接来 接收后续的所有增量差异。
[0122] 另一种实施方案是将增量差异合并到服务器端。这将不需要访问者上传具有每次 DOM变化的全套累积差异，但却增大了CServer的负载量。
[0123] DOM树差异算法
[0124] 访问者的JavaScript存储了每次向Cserver发送更新的DOM树的副本。当发 送新的更新时，访问者的JavaScript将当前DOM树与发送的具有前一更新的DOM树进 行比较，计算ATTRdiff、CONTENTdiff和HTMLdiff的集合。图21示出了比较算法 Diff(eleml,elem2)。注意，图21所示的Diff()算法是递归方法，其初始由分别作为eleml 和elem2的先前DOM树和当前DOM树的文件要素根调用。
[0125] 在HTML文件中，HTML要素可以既包含要素又包含文本子节点。要素是嵌套式HTML 要素，其相应可包含其他节点或要素，而文本子节点则包含文本跨距。如果要素不包含其 他要素（并仅有一个或零个文本节点）的话，那么文本节点中的文本变化可以由CONTENT diff来表示。如果要素即包含要素又包含文本节点的话，那么任何文本节点中的文本变化 都将由母要素的HTML变化来表示。
[0126] 如图21所示，比较算法Diff(eleml,elem2) (2100)开始于通过检查来确定是否存 在ATTRdiff，从而确定要素1的属性是否与要素2的属性不相匹配（2102)。如果属性上 存在差异，那么该算法用要素2的属性创建ATTRdiff。
[0127] 该算法下一步比较子要素的数量和类型（2104)。如果子要素不同，则算法将用要 素2的内部HTML来添加HTMLdiff(2106)。此时，算法已经检测到了HTML差异并相应停止 递归（2108)，并且转发更新后的HTML。
[0128]如果子要素的数量和类型被确定为相同（2104)，则该算法将确定是否存在零个子 要素（2110)。如果不存在子要素，则该节点为纯文本节点。该算法因此将对要素1的文本 内容和要素2的文本内容（2112)进行比较。如果这两个要素的文本相同，则这两个要素之 间没有差异，算法将停止递归（2114)。如果这两个要素之间存在差异，则算法将用要素2的 文本内容创建CONTENTdiff(2116)。
[0129] 如果存在多于零个的子要素（2110)，则该算法将比较每个子节点的数量、类型以 及节点值（nodeValue) (2118)。如果这些值不同，那么算法将用要素2的内部HTML添加HTML diff(2106)。此时，算法已经检测到了HTML差异并相应停止递归（2108)，并且转发更新后 的HTML。
[0130] 如果算法未检测到HTML差异（2118)，那么它针对要素1和要素2的每一对相应子 要素进行递归（2120)，以寻找DOM树中更低级要素的变化。通过这种方式，对整个DOM树进 行递归以寻找DOM的增量更新，该增量更新可用来创建用于转发至协同浏览会话的更新。
[0131]iFrame要素
[0132] 访问者的网页可能包含引用了客户网站上的另一页面的iframe要素（框架要 素）。当访问者的Cobrowse,js将页面呈现为HTML时，iframe要素将呈现为〈iframesrc = "iframurl"/>。iframe页面的内容不包括在内。然而，Cobrowse,js的单独副本却如同 客户网站上的所有其他协同浏览网页那样地包含在iframe源页面中。当iframe页面进行 加载时，iframe中的Cobrowse,js将iframe页面数据作为主会话的"子会话"而上传给协 同浏览服务。iframe中的鼠标的位置、姿态、输入、滚球位置、鼠标点击等都如同主会话那样 上传至Cserver0
[0133] 当上传网页HTML时，访问者用iframe子会话的URL来替代iframe src属性。在代 理端，iframe将检索子会话视图。代理iframe视图也将包含代理查看器JavaScript (agent viewer JavaScript) CobrowseViewer. js的额外拷贝，这将基于来自Cserver的更新而持 续地更新视图。
[0134] 代理视图
[0135] 代理此时使用标准网络浏览器或者可能使用以插件或一些其他手段强化的网络 浏览器（用于提高性能）来登录到协同浏览服务中。代理浏览器请求客户页面的代理视图。 提供给代理的页面包含与客户浏览器（如图1所示）具有相同尺寸的iframe。iframe src URL通过〈script〉标签引用嵌入在其中的"cobrowseviewer. js"，来检索由协同浏览服务 使用的具有客户发送的头部HTML和主体HTML的页面。如果访问者滚动了页面，那么协同 浏览服务会将<div>插入到已经相对于页面左上角偏移了滚球偏移量的页面中。div具有 标识符"glance_scroll"并且iframe src URL包括相对部分"#glance_scroll"，由此使得 当页面加载到框架中时页面会立即偏移，以使得<div>位于框架的左上角。这种做法使得 无需等待网页上的JavaScript来滚动代理视图，代理视图就能立即定位在正确的滚球偏 移量处。
[0136] Cobrowseviewer. js运行在代理浏览器上，并且定期地从协同浏览服务检索增量 DOM变化、滚秋偏移量、鼠标位置、浏览器尺寸、要素焦点、选择框状态以及输入字段值。如果 存在可用于网页HTML的完整更新，那么协同浏览服务还将通知代理。Cobrowseviewer. js 执行以下操作：
[0137] 1?如果存在用于网页HTML的完整更新，则Cobrowseviewer.js刷新整个框架以利 用当前HTML获得新的视图。（备选地，该页面可使用更新后的头部HTML和主体HTML自己 进行重建）
[0138] 2.否则，cobrowseviewer. js :
[0139] a.将任何的增量变化应用到D0M;
[0140] b.将窗口（该窗口在iframe内）滚动至与客户的浏览器窗口相同的偏移处；
[0141] c.在与客户的鼠标光标相同的坐标处显示图像以代表客户鼠标；和
[0142] d.将输入字段的值设置为指定值；
[0143] e.如果代理浏览器的窗口是桌面上的活动窗口，则将焦点设置到访问者的焦点要 素；
[0144] f.如果访问者打开了选择框，则在代理视图中打开相同的选择框。
[0145] 姿态示意
[0146] 在一个实施例中，代理所采取的行动被cobrowseviewer.js捕获并传送给协同浏 览服务。相应地，协同浏览服务向访问者中继所捕捉的输入，以突出网站的方面或者采取其 他行动与显示在对访问者浏览器10上的网站14相连。
[0147] 图19-20示出了实施例中的示例，其中当代理在网站的代理视图要素上进行点击 时，在代理浏览器和访问者浏览器10中会出现周围相应要素绘制的方框。在图19-20所示 的实施例中，图19示出了代理视图。在本示例中，代理点击了"Firstname"下的空白字段， 这使得该字段在代理视图中被突出。具体来说，这导致代理视图中出现了包围要素的橙色 圆角矩形1900。
[0148] 图20示出了当代理点击了"Firstname"字段时访问者的网站视图。具体地，如 图20所示，当代理点击此对象时，所述服务指示访问者视图来绘制围绕访问者浏览器中的 相应要素的矩形2000。在一个实施例中，绘制在访问者视图中的矩形涂为红色。访问者DOM 的矩形变化不会发送到Cserver作为增量更新。
[0149] 尽管在本示例中当代理点击在要素上时绘制出了红色框，也可以使用在视觉上对 要素引起注意的其他方式。例如，针对框可采用不同颜色，或者可将固体半透明颜色叠加在 要素上以突出该要素。任选