CN102314471A - 一种实现滚动条同步的方法 - Google Patents
一种实现滚动条同步的方法 Download PDFInfo
- Publication number
- CN102314471A CN102314471A CN2011100600045A CN201110060004A CN102314471A CN 102314471 A CN102314471 A CN 102314471A CN 2011100600045 A CN2011100600045 A CN 2011100600045A CN 201110060004 A CN201110060004 A CN 201110060004A CN 102314471 A CN102314471 A CN 102314471A
- Authority
- CN
- China
- Prior art keywords
- record
- scroll bar
- bar
- scroll
- webpage
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
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的详细流程图。
具体实施方式
以下将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。
一种网页上实现滚动条同步的方法，包括以下步骤：
1)用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到数组变量中，当鼠标弹起时停止记录；
2)在记录的过程中，同时程序定时从数组变量中获取n条记录，通过调用Flash的Socket接口发送消息到其它需要同步网页端，并从数组中清除这n条记录；
3)被同步网页端Flash收到消息后，通过程序解析消息得到传递过来的滚动条高度值，并将被同步区域的滚动条高度设置成这个高度值，便实现滚动同步。
下面进一步详细说明本发明所述的方法：
参见说明书附图中的附图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 (10)
1.一种实现滚动条同步的方法，其特征在于，包括以下步骤：
1)用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到数组变量中，当鼠标弹起时停止记录；
2)在记录的过程中同时，程序定时从数组变量中获取n条记录，通过调用Flash的Socket接口发送消息到其它需要同步网页端，并从数组中清除这n条记录；
3)被同步网页端Flash收到消息后，通过程序解析消息得到传递过来的滚动条高度值，并将被同步区域的滚动条高度设置成这个高度值，便实现滚动同步。
2.如权利要求1所述的方法，其特征在于，其中步骤1)包含如下过程：
1a)用户打开网页时，加载Flash插件，Flash插件使用XMLSocket类自动建立与服务器连接，用于发送和接收滚动条同步消息；
1b)用户在网页区域进行操作，当鼠标按住滚动条并开始移动时，记录所滚动区域的滚动条高度到网页JavaScript数组变量中，当鼠标弹起时停止记录。
3.如权利要求1所述的方法，其特征在于，其中步骤2)包含如下过程：
2a)在记录的过程中，网页定时使用JavaScript从数组变量中获取n条记录，并使用JavaScript调用Flash接口并传入这n条记录；
2b)Flash使用XMLSocket类将传递过来的n条记录组装成消息发送到其它需要同步的网页端；
2c)并使用JavaScript从数组变量中清除这n条记录。
4.如权利要求1所述的方法，其特征在于，其中步骤3)包含如下过程：
3a)被同步网页端打开时，加载Flash插件，Flash插件使用XMLSocket类自动建立与服务器的连接，用于发送和接收滚动条同步信息；
3b)当同步端发送消息成功后，被同步网页端便可收到这条消息，通过Flash的XML类及字符串处理函数对收到的消息进行处理，获得传递过来的滚动条高度；
3c)Flash使用ExternalInterface类的call函数调用JavaScript函数，传入解析出的滚动条高度，JavaScript再通过改变滚动区域的scrollTop值来改变滚动区域的滚动条位置，实现滚动条的同步。
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条记录。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2011100600045A CN102314471A (zh) | 2010-09-17 | 2011-03-14 | 一种实现滚动条同步的方法 |
Applications Claiming Priority (3)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201010291097 | 2010-09-17 | ||
| CN201010291097.8 | 2010-09-17 | ||
| CN2011100600045A CN102314471A (zh) | 2010-09-17 | 2011-03-14 | 一种实现滚动条同步的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102314471A true CN102314471A (zh) | 2012-01-11 |
Family
ID=45427646
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2011100600045A Pending CN102314471A (zh) | 2010-09-17 | 2011-03-14 | 一种实现滚动条同步的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102314471A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102637201A (zh) * | 2012-03-14 | 2012-08-15 | 南京新与力文化传播有限公司 | 基于异步数据传输的网页加载方法 |
| CN103874971A (zh) * | 2012-10-12 | 2014-06-18 | Sk普兰尼特有限公司 | 利用网页的scrollTop属性执行滚动的系统和方法 |
| CN106372251A (zh) * | 2016-09-28 | 2017-02-01 | 北京京东尚科信息技术有限公司 | 一种返回页面显示位置的方法和装置 |
| CN110221758A (zh) * | 2019-04-29 | 2019-09-10 | 平安科技（深圳）有限公司 | 滚动条控制方法、装置、计算机设备和存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1184578C (zh) * | 2001-04-27 | 2005-01-12 | 华为技术有限公司 | 多窗口网页同步的实现方法 |
| CN101299249A (zh) * | 2007-04-30 | 2008-11-05 | 深圳华飚科技有限公司 | 在线协同幻灯片展示服务系统 |
| CN101551821A (zh) * | 2009-05-19 | 2009-10-07 | 周佺喜 | 一种在网页中进行实时信息广播的方法 |
| CN101382863B (zh) * | 2007-09-04 | 2010-07-07 | 英业达股份有限公司 | 页面控制轴产生方法及具有页面控制轴的网页浏览器 |
-
2011
- 2011-03-14 CN CN2011100600045A patent/CN102314471A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1184578C (zh) * | 2001-04-27 | 2005-01-12 | 华为技术有限公司 | 多窗口网页同步的实现方法 |
| CN101299249A (zh) * | 2007-04-30 | 2008-11-05 | 深圳华飚科技有限公司 | 在线协同幻灯片展示服务系统 |
| CN101382863B (zh) * | 2007-09-04 | 2010-07-07 | 英业达股份有限公司 | 页面控制轴产生方法及具有页面控制轴的网页浏览器 |
| CN101551821A (zh) * | 2009-05-19 | 2009-10-07 | 周佺喜 | 一种在网页中进行实时信息广播的方法 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102637201A (zh) * | 2012-03-14 | 2012-08-15 | 南京新与力文化传播有限公司 | 基于异步数据传输的网页加载方法 |
| CN103874971A (zh) * | 2012-10-12 | 2014-06-18 | Sk普兰尼特有限公司 | 利用网页的scrollTop属性执行滚动的系统和方法 |
| CN103874971B (zh) * | 2012-10-12 | 2016-05-04 | Sk普兰尼特有限公司 | 利用网页的scrollTop属性执行滚动的系统和方法 |
| US9959029B2 (en) | 2012-10-12 | 2018-05-01 | Sk Planet Co., Ltd. | System and method for performing scroll using scrolltop attribute of web page |
| CN106372251A (zh) * | 2016-09-28 | 2017-02-01 | 北京京东尚科信息技术有限公司 | 一种返回页面显示位置的方法和装置 |
| CN110221758A (zh) * | 2019-04-29 | 2019-09-10 | 平安科技（深圳）有限公司 | 滚动条控制方法、装置、计算机设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| USRE49289E1 (en) | Method and mobile terminal for processing data in message | |
| CN104243561B (zh) | 一种电子设备、信息处理方法和信息推送系统 | |
| CN105530535A (zh) | 一种多人观看视频实时互动的方法及系统 | |
| CN102307214A (zh) | 一种实现列表同步的方法 | |
| CN103198417A (zh) | 移动互联网旗帜广告及其后台发布方法、互动方法 | |
| CN110234080A (zh) | 一种信息显示方法、装置和系统 | |
| CN101350870A (zh) | 一种图文转换的方法、移动终端和ocr服务器 | |
| CN102307212A (zh) | 一种实现翻页同步的方法 | |
| CN101969463A (zh) | 一种网页上实现白板全屏同步的方法 | |
| CN103906012A (zh) | 信息发送方法及装置 | |
| CN102314471A (zh) | 一种实现滚动条同步的方法 | |
| CN103986842A (zh) | 一种联系人资料的收藏方法及装置 | |
| CN112347401A (zh) | 房屋同屏带看方法、系统、装置及计算机可读存储介质 | |
| CN103024694A (zh) | 一种多人信息发送方法、装置及移动终端 | |
| US9906485B1 (en) | Apparatus and method for coordinating live computer network events | |
| CN102315949A (zh) | 一种实现的基于p2p技术的网络会议的方法 | |
| CN106789577A (zh) | 一种自动发送微信朋友圈的方法及系统 | |
| CN104639973B (zh) | 一种信息推送方法及装置 | |
| CN103036762A (zh) | 即时通信中的信息处理方法和装置 | |
| CN110659006B (zh) | 跨屏显示的方法、装置、电子设备及可读存储介质 | |
| CN102316142B (zh) | 一种实现的基于p2p的远程视频教育的方法 | |
| CN103384293B (zh) | 分体式终端间应用协同的方法及分体式终端 | |
| CN102314235B (zh) | 一种实现电子白板同步的方法 | |
| CN103905661A (zh) | 信息转发的方法和云服务器 | |
| CN104283762A (zh) | 传输即时通讯会话内容的方法、系统、客户端及服务器 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C02 | Deemed withdrawal of patent application after publication (patent law 2001) | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20120111 |