CN102314471A

CN102314471A - 一种实现滚动条同步的方法

Info

Publication number: CN102314471A
Application number: CN2011100600045A
Authority: CN
Inventors: 胡加明
Original assignee: Suzhou Codyy Network Technology Co Ltd
Current assignee: Suzhou Codyy Network Technology Co Ltd
Priority date: 2010-09-17
Filing date: 2011-03-14
Publication date: 2012-01-11

Abstract

本发明属于网络技术领域，具体涉及一种实现滚动条同步的方法，包括以下步骤：用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域滚动条的高度到数组变量中，当鼠标弹起时停止记录，同时程序定时从数组变量中获取n条记录通过调用Flash的Socket接口发送到其它需要同步的网页端，并从数组中清除这n条记录，被同步网页端收到消息，把滚动区域的滚动条高度值设置成对消息解析所得到的高度值，便实现滚动条的同步。此方法可快速对网页中的滚动条进行同步，具有很强的及时性、准确性、高效性。

Description

一种实现滚动条同步的方法

技术领域

本发明属于网络技术领域，尤其涉及一种实现滚动条同步的方法。

背景技术

互联网技术的发展使我们可以足不出户就实现了即时通讯，与好友聊天，与合作伙伴谈判等等。目前，基于需要下载安装的即时通讯工具，如MSN，QQ，网易泡泡已经深受大家的喜爱，它为人们的沟通、信息交流提供了新的途径，是除了手机、固话、电子邮件之外的又一种重要的信息交流方式。借助这些工具，用户可以实现单人或者多人视频，可以召开网络视频会议，可以进行网络远程教育，还可以让人和人之间的交流成本大大降低，且提高了效率。

文本通讯、音频通讯、视频通讯是即时通讯最重要的三大功能。随着商业信息化的飞速发展，人们利用互联网进行商务交流也逐步普及，如演示论文成果、企业计划书、难题解决方案书等，借助电子白板演示文件往往不能完整地展现给他人观看，基本上都要借助滚动条展示全文。

现行具备内容演示功能的产品比较多，演示文件内容均可同步至其他用户，但当演示者拉动滚动条时，其他参与人员的滚动条无法同步，所呈现的文件内容区域也不同，这样就会造成信息获取的偏差，影响的交流的效果。而且，这些软件均需下载安装，对硬件、费用等都有一定的要求。

发明内容

本发明提供了一种实现滚动条同步的方法，实现了无需下载任何控件，网页上滚动条同步。

为达到上述目的，本发明的技术方案为：

一种网页上实现滚动条同步的方法，包括以下步骤：

1)用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到数组变量中，当鼠标弹起时停止记录；

2)在记录的过程中同时，程序定时从数组变量中获取n条记录，通过调用Flash的Socket接口发送消息到其它需要同步网页端，并从数组中清除这n条记录；

3)被同步网页端Flash收到消息后，通过程序解析消息得到传递过来的滚动条高度值，并将被同步区域的滚动条高度设置成这个高度值，便实现滚动同步。

上述技术方案中，其中步骤1)包含如下过程：

1a)用户打开网页时，加载Flash插件，Flash插件使用XMLSocket类自动建立与服务器连接，用于发送和接收滚动条同步消息；

1b)用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到网页JavaScript数组变量中，当鼠标弹起时停止记录。

上述技术方案中，其中步骤2)包含如下过程：

2a)在记录的过程中，网页定时使用JavaScript从数组变量中获取n条记录，并使用JavaScript调用Flash接口并传入这n条记录；

2b)Flash使用XMLSocket类将传递过来的n条记录组装成消息发送到其它需要同步的网页端；

2c)并使用JavaScript从数组变量中清除这n条记录。

上述技术方案中，其中步骤3)包含如下过程：

3a被同步网页端打开时，加载Flash插件，Flash插件使用XMLSocket类自动建立与服务器的连接，用于发送和接收滚动条同步信息；

3b)当同步端发送消息成功后，被同步网页端便可收到这条消息，通过Flash的XML类及字符串处理函数对收到的消息进行处理，获得传递过来的滚动条高度；

3c)Flash使用ExternalInterface类的call函数调用JavaScript函数，传入解析出的滚动条高度，JavaScript再通过改变滚动区域的scrollTop值来改变滚动区域的滚动条位置，实现滚动条的同步。

本发明与现有技术相比具有以下的优点：

1)不需要下载任何控件，即可在网页上滚动条的同步。

2)同步端和被同步端的滚动条一模一样，从而保证了内容在显示上的一致性，而且同步及时、高效。

3)对软、硬件要求比较低，能够很方便嵌入其它系统中进行应用。

4)技术实现简单、思路清晰，运用门槛低，技术上很容易普及和被接受。

一种网页上实现滚动条同步的方法，旨在解决网页上滚动条同步的问题；该发明无需下载任何控件、高速高效、方便实用；完全在网页上即可实现，是一种真正意义上能够普及大众的技术，并且实现原理简单，能够很方便地嵌入各种网络会议、远程教育等应用中。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是本发明实施例1的详细流程图；

图2是本发明实施例2的详细流程图。

具体实施方式

以下将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

一种网页上实现滚动条同步的方法，包括以下步骤：

2)在记录的过程中，同时程序定时从数组变量中获取n条记录，通过调用Flash的Socket接口发送消息到其它需要同步网页端，并从数组中清除这n条记录；

下面进一步详细说明本发明所述的方法：

参见说明书附图中的附图1、附图2，用户打开网页时，加载Flash插件，Flash插件使用XMLSocket类自动建立与服务器连接，用于发送和接收滚动条同步消息；用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到网页JavaScript数组变量中，当鼠标弹起时停止记录；在记录的过程中，网页定时使用JavaScript从数组变量中获取n条记录，并使用JavaScript调用Flash接口并传入这n条记录；Flash使用XMLSocket类将传递过来的n条记录组装成消息发送到其它需要同步的网页端；并使用JavaScript从数组变量中清除这n条记录；被同步网页端在打开时，加载Flash插件，Flash插件使用XMLSocket类自动建立与服务器的连接，用于发送和接收滚动条同步信息；当同步端发送消息成功后，被同步网页端便可收到这条消息，通过Flash的XML类及字符串处理函数对收到的消息中进行处理，获得传递过来的滚动条的高度；Flash使用ExternalInterface类的call函数调用JavaScript函数，传入解析出的滚动条高度，JavaScript再通过改变滚动区域的scrollTop值来改变滚动区域的滚动条位置，实现滚动条的同步。

图1是本发明实施例1的详细流程图，详细步骤如下：

步骤101：开始；

步骤102：用户在网页区域进行操作；

步骤103：鼠标按住滚动条开始移动时，记录滚动条高度到数据变量；

步骤104：鼠标弹起时停止记录；

步骤105：结束；

步骤106：程序定时获取n条坐标记录通过Flash的Socket接口发送到其它需要同步的网页端，并清除这n条数据；

步骤107：开始；

步骤108：用户打开网页，查看内容；

步骤109：网页收到Socket消息，通过处理改变滚动区域滚动条高度；

步骤110：结束。

图2是本发明实施例2的详细流程图，详细步骤如下：

步骤201：开始；

步骤202：用户打开网页；

步骤203：加载Flash插件，使用XMLSocket类建立与服务器连接；

步骤204：用户在网页区域进行操作；

步骤205：鼠标按住滚动条开始移动时，记录滚动条高度到数据变量；

步骤206：鼠标弹起时停止记录；

步骤207：结束；

步骤208：JavaScript定时获取n条坐标记录，调用Flash接口进行数据组装，Flash使用XMLSocket类发送数据到其它需要同步的网页端，并清除这n条数据；

步骤209：开始；

步骤210：用户打开网页；

步骤211：加载Flash插件，使用XMLSocket类建立与服务器连接；

步骤212：网页收到Socket消息，通过处理改变，网页滚动区域滚动条高度；

步骤213：结束。

显然，本领域的技术人员应该明白，上述的本发明的各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种实现滚动条同步的方法，其特征在于，包括以下步骤：

2.如权利要求1所述的方法，其特征在于，其中步骤1)包含如下过程：

3.如权利要求1所述的方法，其特征在于，其中步骤2)包含如下过程：

2c)并使用JavaScript从数组变量中清除这n条记录。

4.如权利要求1所述的方法，其特征在于，其中步骤3)包含如下过程：

3a)被同步网页端打开时，加载Flash插件，Flash插件使用XMLSocket类自动建立与服务器的连接，用于发送和接收滚动条同步信息；

5.一种实现滚动条同步的方法，其特征在于：用户将选择的滚动区域的滚动信息通过服务器发送给被同步网页端；所述被同步网页端通过解析所述滚动信息，实现滚动同步。

6.根据权利要求5所述的方法，其特征在于：所述用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到数组变量中，当鼠标弹起时停止记录。

7.根据权利要求6所述的方法，其特征在于：在记录的过程中同时，程序定时从所述数组变量中获取n条记录，通过调用Flash的Socket接口发送消息到所述被同步网页端，并从数组中清除这n条记录。

8.根据权利要求7所述的方法，其特征在于：所述被同步网页端Flash收到消息后，通过程序解析消息得到传递过来的滚动条高度值，并将被同步区域的滚动条高度设置成所述高度值，实现滚动条同步。

9.根据权利要求6所述的方法，其特征在于：所述用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到数组变量中，当鼠标弹起时停止记录的过程为：所述用户打开网页时，加载Flash插件，所述Flash插件使用XMLSocket类自动建立与服务器连接，用于发送和接收滚动条同步消息；所述用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到网页JavaScript数组变量中，当鼠标弹起时停止记录。

10.根据权利要求7所述的方法，其特征在于：在记录的过程中同时，程序定时从所述数组变量中获取n条记录，通过调用Flash的Socket接口发送消息到所述被同步网页端，并从数组中清除这n条记录的过程为：在记录的过程中，网页定时使用JavaScript从数组变量中获取n条记录，并使用JavaScript调用Flash接口并传入所述n条记录；Flash使用XMLSocket类将传递过来的所述n条记录组装成消息发送到被同步网页端；并使用JavaScript从数组变量中清除这n条记录。