CN110619102A - 一种页面元素的监听的方法及装置 - Google Patents
一种页面元素的监听的方法及装置 Download PDFInfo
- Publication number
- CN110619102A CN110619102A CN201910608341.XA CN201910608341A CN110619102A CN 110619102 A CN110619102 A CN 110619102A CN 201910608341 A CN201910608341 A CN 201910608341A CN 110619102 A CN110619102 A CN 110619102A
- Authority
- CN
- China
- Prior art keywords
- module
- event
- page
- monitoring
- elements
- 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.)
- Granted
Links
- 238000012544 monitoring process Methods 0.000 title claims abstract description 113
- 238000000034 method Methods 0.000 title claims abstract description 31
- 238000006243 chemical reaction Methods 0.000 claims abstract description 37
- 230000001960 triggered effect Effects 0.000 claims abstract description 15
- 230000008859 change Effects 0.000 claims description 17
- 238000013519 translation Methods 0.000 claims description 6
- 230000033001 locomotion Effects 0.000 claims description 5
- 238000004458 analytical method Methods 0.000 claims description 4
- 238000005096 rolling process Methods 0.000 claims description 4
- 230000009466 transformation Effects 0.000 claims description 2
- 238000013461 design Methods 0.000 abstract description 3
- 238000005516 engineering process Methods 0.000 abstract description 2
- 238000004891 communication Methods 0.000 description 27
- 230000006870 function Effects 0.000 description 23
- 238000012545 processing Methods 0.000 description 18
- 238000007726 management method Methods 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 5
- 238000001514 detection method Methods 0.000 description 4
- 238000006073 displacement reaction Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000000903 blocking effect Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000009545 invasion Effects 0.000 description 3
- 230000010267 cellular communication Effects 0.000 description 2
- 230000001413 cellular effect Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- HBBGRARXTFLTSG-UHFFFAOYSA-N Lithium ion Chemical compound [Li+] HBBGRARXTFLTSG-UHFFFAOYSA-N 0.000 description 1
- 230000001133 acceleration Effects 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000005484 gravity Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 229910001416 lithium ion Inorganic materials 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 229910052987 metal hydride Inorganic materials 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012806 monitoring device Methods 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 229910052759 nickel Inorganic materials 0.000 description 1
- PXHVJJICTQNCMI-UHFFFAOYSA-N nickel Substances [Ni] PXHVJJICTQNCMI-UHFFFAOYSA-N 0.000 description 1
- -1 nickel metal hydride Chemical class 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000010248 power generation Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000010076 replication Effects 0.000 description 1
- 230000005236 sound signal Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000010897 surface acoustic wave method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例公开了一种页面元素的监听的方法及装置，涉及互联网技术中的网页端设计领域，能够减小监听带来的性能影响，并避免侵犯用户的隐私。本发明包括：在观察者对象中注册位置变换监听事件，其中，所注册的位置变换监听事件对应页面中的模块元素；当发生停留事件时，触发所述观察者对象的发布事件；所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上；上报出现在当前页面上的模块元素。本发明适用于对页面中的模块元素进行监听。
Description
技术领域
本发明涉及互联网技术中的网页端设计领域，尤其涉及一种页面元素的监听的方法及装置。
背景技术
对网页进行监听的目的之一，是为了节约用户浏览页面时的资源占用，避免全局刷新网页造成的卡顿。尤其是在智能手机等移动端上，一次加载过多的页面内容会造成严重的卡顿和流量消耗，尤其是在浏览购物网站等存在大量图片内容的页面时，需要对网页进行监听并逐步加载内容。
目前网页的监听做到了控件触发式的监听，监听用户的滑动、点击、图片加载等操作，目的主要是在于采集用户的浏览轨迹。这一方面会占用很多资源，造成页面浏览卡顿，另一方面又存在过度监听的情况，不利于用户的隐私保护。
也有通过网页中的图片下载来实现监听的方案，但受制于图片原链接、网络质量、本地浏览器/APP等因素影响，下载图片有可能显示失败、显示不全或者显示错误，使得这种监听方式的精准度也不高。并且在很多应用场景中(比如社交网站)，监听图片下载的过程，也会被认为是过度监听，不利于用户的隐私保护。
总的来说，受制于浏览器的资源占用和对用户的隐私保护这两方面的因素，目前缺乏更加细化的监听手段。
发明内容
本发明的实施例提供一种页面元素的监听的方法及装置，能够减小监听带来的性能影响，并避免侵犯用户的隐私。
为达到上述目的，本发明的实施例采用如下技术方案：
第一方面，本发明的实施例提供的页面元素的监听的方法，包括：
在观察者对象中注册位置变换监听事件，其中，所注册的位置变换监听事件对应页面中的模块元素；
当发生停留事件时，触发所述观察者对象的发布事件；
所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上；
上报出现在当前页面上的模块元素。
第二方面，本发明的实施例提供的页面元素的监听的装置，包括：
监听模块，用于在观察者对象中注册位置变换监听事件，其中，所注册的位置变换监听事件对应页面中的模块元素；
发布模块，用于当发生停留事件时，触发所述观察者对象的发布事件；
分析模块，用于所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上；
上报模块，用于上报出现在当前页面上的模块元素。
本实施例中，通过创建一个观察者对象去管理事件页面时间，来判断模块元素是否出现在页面上，从而完成对模块元素是否出现在页面上的监听。且由于监听的对象是局部的模块元素而非页面的全局变量，可以采用异步调用的逻辑实现对不同的模块元素的监听，减小监听带来的性能影响。又由于监听的是局部的模块元素的位移，而并不会对模块元素的实际内容进行采集、提取，因此也就不存在过度监听的问题，从而避免了侵犯用户的隐私。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1为本发明实施例提供的一种可能的硬件环境的示意图；
图2为本发明实施例提供的方法流程示意图；
图3、图4、图5为本发明实施例提供的具体实例的示意图；
图6为本发明实施例提供的装置结构的示意图。
具体实施方式
为使本领域技术人员更好地理解本发明的技术方案，下面结合附图和具体实施方式对本发明作进一步详细描述。下文中将详细描述本发明的实施方式，所述实施方式的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施方式是示例性的，仅用于解释本发明，而不能解释为对本发明的限制。本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本发明的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的任一单元和全部组合。本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样定义，不会用理想化或过于正式的含义来解释。
本发明所揭示的方案，具体可以实现在一种终端设备上。该终端设备可以实作成单独一台装置，或整合于各种不同的媒体数据播放装置中，诸如智能手机平板电脑(TabletPersonal Computer)、膝上型电脑(Laptop Computer)、个人电脑(PC)、工作站等。
具体的，图1所示为根据本发明一个具体实施方式的终端设备。所述终端设备包括输入单元、处理器单元、输出单元、通信单元、存储单元、外设单元等组件。这些组件通过一条或多条总线进行通信。本领域技术人员可以理解，图中示出的终端设备的结构并不构成对本发明的限定，它既可以是总线形结构，也可以是星型结构，还可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
输入单元用于实现用户与终端设备的交互和/或信息输入到终端设备中。例如，输入单元可以接收用户输入的数字或字符信息，以产生与用户设置或功能控制有关的信号输入。在本发明具体实施方式中，输入单元可以是触控面板，也可以是其他人机交互界面，例如实体输入键、麦克风等，还可是其他外部信息撷取装置，例如摄像头等。触控面板，也称为触摸屏或触控屏，可收集用户在其上触摸或接近的操作动作。比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或接近触控面板的位置的操作动作，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸操作，并将检测到的触摸操作转换为电信号，以及将所述电信号传送给触摸控制器；触摸控制器从触摸检测装置上接收所述电信号，并将它转换成触点坐标，再送给处理单元。所述触摸控制器还可以接收处理单元发来的命令并执行。此外，可以采用电阻式、电容式、红外线(Infrared)以及表面声波等多种类型实现触控面板。在本发明的其他实施方式中，输入单元所采用的实体输入键可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。麦克风形式的输入单元可以收集用户或环境输入的语音并将其转换成电信号形式的、处理单元可执行的命令。
在本发明的其他一些实施方式中，所述输入单元还可以是各类传感器件，例如霍尔器件，用于侦测终端设备的物理量，例如力、力矩、压力、应力、位置、位移、速度、加速度、角度、角速度、转数、转速以及工作状态发生变化的时间等，转变成电量来进行检测和控制。其他的一些传感器件还可以包括重力感应计、三轴加速计、陀螺仪等。
处理器单元为终端设备的控制中心，利用各种接口和线路连接整个终端设备的各个部分，通过运行或执行存储在存储单元内的软件程序和/或模块，以及调用存储在存储单元内的数据，以执行终端设备的各种功能和/或处理数据。所述处理器单元可以由集成电路(Integrated Circuit，简称IC)组成，例如可以由单颗封装的IC所组成，也可以由连接多颗相同功能或不同功能的封装IC而组成。举例来说，处理器单元可以仅包括中央处理器(Central Processing Unit，简称CPU)，也可以是GPU、数字信号处理器(Digital SignalProcessor，简称DSP)、及通信单元中的控制芯片(例如基带芯片)的组合。在本发明实施方式中，CPU可以是单运算核心，也可以包括多运算核心。
所述通信单元用于建立通信信道，使终端设备通过所述通信信道以连接至远程服务器，并从所述远程服务器下媒体数据。所述通信单元可以包括无线局域网(WirelessLocal Area Network，简称wireless LAN)模块、蓝牙模块、基带(Base Band)模块等通信模块，以及所述通信模块对应的射频(Radio Frequency，简称RF)电路，用于进行无线局域网络通信、蓝牙通信、红外线通信及/或蜂窝式通信系统通信，例如宽带码分多重接入(Wideband Code Division Multiple Access，简称W-CDMA)及/或高速下行封包存取(HighSpeed Downlink Packet Access，简称HSDPA)。所述通信模块用于控制终端设备中的各组件的通信，并且可以支持直接内存存取(Direct Memory Access)。
在本发明的不同实施方式中，所述通信单元中的各种通信模块一般以集成电路芯片(Integrated Circuit Chip)的形式出现，并可进行选择性组合，而不必包括所有通信模块及对应的天线组。例如，所述通信单元可以仅包括基带芯片、射频芯片以及相应的天线以在一个蜂窝通信系统中提供通信功能。经由所述通信单元建立的无线通信连接，例如无线局域网接入或WCDMA接入，所述终端设备可以连接至蜂窝网(Cellular Network)或因特网(Internet)。在本发明的一些可选实施方式中，所述通信单元中的通信模块，例如基带模块可以集成到处理器单元中。射频电路用于信息收发或通话过程中接收和发送信号。例如，将基站的下行信息接收后，给处理单元处理；另外，将设计上行的数据发送给基站。通常，所述射频电路包括用于执行这些功能的公知电路，包括但不限于天线系统、射频收发机、一个或多个放大器、调谐器、一个或多个振荡器、数字信号处理器、编解码(Codec)芯片组、用户身份模块(SIM)卡、存储器等等。此外，射频电路还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System ofMobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA(Code Division Multiple Access，码分多址)、WCDMA(WidebandCode Division Multiple Access,宽带码分多址)、高速上行行链路分组接入技术(HighSpeed Uplink Packet Access，HSUPA)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(Short Messaging Service，短消息服务)等。
输出单元包括但不限于影像输出单元和声音输出单元。影像输出单元用于输出文字、图片和/或视频。所述影像输出单元可包括显示面板，例如采用LCD(Liquid CrystalDisplay，液晶显示器)、OLED(Organic Light-Emitting Diode，有机发光二极管)、场发射显示器(field emission display，简称FED)等形式来配置的显示面板。或者所述影像输出单元可以包括反射式显示器，例如电泳式(electrophoretic)显示器，或利用光干涉调变技术(Interferometric Modulation of Light)的显示器。所述影像输出单元可以包括单个显示器或不同尺寸的多个显示器。在本发明的具体实施方式中，上述输入单元所采用的触控面板亦可同时作为输出单元的显示面板。例如，当触控面板检测到在其上的触摸或接近的手势操作后，传送给处理单元以确定触摸事件的类型，随后处理单元根据触摸事件的类型在显示面板上提供相应的视觉输出。虽然在图1中，输入单元与输出单元是作为两个独立的部件来实现终端设备的输入和输出功能，但是在某些实施例中，可以将触控面板与显示面板集成一体而实现终端设备的输入和输出功能。例如，所述影像输出单元可以显示各种图形化用户接口(Graphical User Interface，简称GUI)以作为虚拟控制组件，包括但不限于窗口、卷动轴、图标及剪贴簿，以供用户通过触控方式进行操作。在本发明具体实施方式中，影像输出单元包括滤波器及放大器，用来将处理单元所输出的视频滤波及放大。音频输出单元包括数字模拟转换器，用来将处理单元所输出的音频信号从数字格式转换为模拟格式。
存储单元可用于存储软件程序以及模块，处理单元通过运行存储在存储单元的软件程序以及模块，从而执行终端设备的各种功能应用以及实现数据处理。存储单元主要包括程序存储区和数据存储区，其中，程序存储区可存储操作系统、至少一个功能所需的应用程序，比如声音播放程序、图像播放程序等等；数据存储区可存储根据终端设备的使用所创建的数据(比如音频数据、电话本等)等。在本发明具体实施方式中，存储单元可以包括易失性存储器，例如非挥发性动态随机存取内存(Nonvolatile Random Access Memory，简称NVRAM)、相变化随机存取内存(Phase Change RAM，简称PRAM)、磁阻式随机存取内存(Magetoresistive RAM，简称MRAM)等，还可以包括非易失性存储器，例如至少一个磁盘存储器件、电子可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)、闪存器件，例如反或闪存(NOR flash memory)或是反及闪存(NAND flash memory)。非易失存储器储存处理单元所执行的操作系统及应用程序。所述处理单元从所述非易失存储器加载运行程序与数据到内存并将数字内容储存于大量储存装置中。所述操作系统包括用于控制和管理常规系统任务，例如内存管理、存储设备控制、电源管理等，以及有助于各种软硬件之间通信的各种组件和/或驱动器。在本发明实施方式中，所述操作系统可以是Google公司的Android系统、Apple公司开发的iOS系统或Microsoft公司开发的Windows操作系统等，或者是Vxworks这类的嵌入式操作系统。所述应用程序包括安装在终端设备上的任何应用，包括但不限于浏览器、电子邮件、即时消息服务、文字处理、键盘虚拟、窗口小部件(Widget)、加密、数字版权管理、语音识别、语音复制、定位(例如由全球定位系统提供的功能)、音乐播放等等。
电源用于给终端设备的不同部件进行供电以维持其运行。作为一般性理解，所述电源可以是内置的电池，例如常见的锂离子电池、镍氢电池等，也包括直接向终端设备供电的外接电源，例如AC适配器等。在本发明的一些实施方式中，所述电源还可以作更为广泛的定义，例如还可以包括电源管理系统、充电系统、电源故障检测电路、电源转换器或逆变器、电源状态指示器(如发光二极管)，以及与终端设备的电能生成、管理及分布相关联的其他任何组件。
本而发明所揭示的页面元素的监听方法，则可以通过计算机程序代码的形式实现相应的功能单元(即可以理解为作为虚拟装置的页面元素的监听装置)页面元素的监听方法主要涉及数据的处理，多数会与其他的设备发生关系，其中存储单元用于存储实现页面元素的监听方法的程序代码及页面数据等；处理单元用于执行程序代码；输出单元用于呈现处理结果，比如将出现在当前页面上的模块元素展示在终端设备的显示器上。
本发明实施例提供一种页面元素的监听的方法，如图2所示，包括：
S101，在观察者对象中注册位置变换监听事件。
其中，所注册的位置变换监听事件对应页面中的模块元素。
观察者对象指的是：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。该观察者对象拥有事件缓存池、订阅事件对象、发布事件对象和移除事件对象。主要功能是实现添加监听和发布事件的功能。在具体实现上，观察者对象可以实现为嵌入网页数据中的一段代码。
具体的，所述模块元素包括：模块层中的模块和元素层中的元素。其中，页面在所述模块层上被划分为至少两个区域，每一个区域作为一个模块并分配模块id。每一个模块中配置至少1个坑位，每个坑位中填充元素。举例来说，所述元素的类型至少包括字符、图案、动图、音频和视频等多媒体数据。
S102，当发生停留事件时，触发所述观察者对象的发布事件。
其中，发布事件，用于通知所有添加了位置变换监听事件的模块元素执行判断函数。
S103，所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上。
S104，上报出现在当前页面上的模块元素。
进一步的，在步骤S101之前，还包括：
S100，创建观察者对象，并为所述观察者对象分配事件缓存池、订阅事件对象、发布事件对象和移除事件对象。其中，事件缓存池、订阅事件对象、发布事件对象和移除事件对象等可以通过嵌入网页的代码实现，比如通过js对象事件(订阅/发布)实现。
步骤S101所述在观察者对象中注册位置变换监听事件，具体包括：获取页面上的模块元素，并在所述观察者对象上为所获取的模块元素注册位置变换监听事件。
在创建观察者对象后，获取页面上所有模块元素，并在观察者对象上注册位置变换监听事件。其中，页面中的模块包括了带有指定属性或样式的元素。
在目前的页面监听方案中，浏览器都没有提供当元素出现在页面上、或者离开页面的API接口，只提供了页面位置信息发生变化的接口。这样就导致无法做到监听元素是否出现在页面上并停留，也就无法判断当前页面上展示给用户的元素有哪些。而直接使用页面的滚动事件会导致事件触发太过频繁，影响用户体验等问题。
本实施例可以应用在网页元素出现和离开页面的通知方法。针对部分浏览器无元素出现在可视视图(展示给用户的，可以看到的浏览器窗口)或离开可视视图的接口，设计了监听方案。本实施例中，通过创建一个观察者对象去管理事件页面时间，来判断模块元素是否出现在页面上，从而完成对模块元素是否出现在页面上的监听。且由于监听的对象是局部的模块元素而非页面的全局变量，可以采用异步调用的逻辑实现对不同的模块元素的监听，减小监听带来的性能影响。又由于监听的是局部的模块元素的位移，而并不会对模块元素的实际内容进行采集、提取，因此也就不存在过度监听的问题，从而避免了侵犯用户的隐私。
在本实施例中，所注册的位置变换监听事件对应页面中的模块。例如：页面中的模块包括：页面标题、广告区、商品展示区等模块，则可以针对这些模块在观察者对象中注册位置变换监听事件。
或者，所注册的位置变换监听事件对应页面中的模块中的至少一个元素。例如：模块中的元素包括：页面标题中的LOGO图片，广告区中的字符、商品图片，商品展示区中的字符、商品图片等，可以针对这些模块中的具体元素，也在观察者对象中注册位置变换监听事件。
具体的，步骤S102中所述当发生停留事件时，触发所述观察者对象的发布事件，包括：
添加页面滚动监听事件，并监听页面滚动。若出现在指定时间内页面未发生滚动，或者在指定时间内页面中的模块元素的移动距离不超过预设值时，判定发生所述停留事件。例如：添加页面滚动监听事件后，监听页面滚动。实现只有在1s内页面未发生滚动或者相对移动距离不超过150像素(可设定)时，认为此时页面发生一次停留事件，触发观察者对象的发布事件，通知所有添加了监听事件的模块或者元素执行函数，判断当前模块或者元素是否出现在页面上。
在本实施例的优选方案中，所述指定时间小于1秒。所述预设值小于且等于150像素。
在本实施例中，步骤S103所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上，包括：
所述发布事件被触发后，检测页面中的模块元素是否在所述监听对象中注册过位置变换监听事件。
若否，则对页面中的模块元素在所述监听对象中注册过位置变换监听事件。
若是，则当前页面中的模块元素执行位置变换监听事件，并判断模块元素是否出现在当前页面上，若是则执行回调函数，向所述监听对象通知模块元素出现在当前页面上。
例如：图3所示的伪代码形式的判断逻辑的执行流程，当模块元素监听到出现在页面时，先判断模块元素是否在发布监听对象中注册过事件，如果没有则注册位置变化事件。获取模块下所有非嵌套的，需要监听位置的元素去取监听模块元素注册的位置变化事件，如果已经注册过，则执行位置事件，并判断当前元素是否显示于页面上。判断为出现在页面时，则执行回调函数，通知元素出现在页面上。
本实施例的逻辑过程如图4所示的，其中：
1、创建一个观察者对象(释义：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新)。该对象拥有事件缓存池、订阅事件对象、发布事件对象和移除事件对象。主要功能是实现添加监听和发布事件的功能。在实际的编程工作中，编程人员也会将“元素”称之为“子元素”。
2、获取页面上所有模块元素(模块：带有指定属性或样式的元素)，并在观察者对象上注册位置变换监听事件。
3、添加页面滚动监听事件，监听页面滚动。实现只有在1s内页面未发生滚动或者相对移动距离不超过150像素(可设定)时，认为此时页面发生一次停留事件，触发观察者对象的发布事件，通知所有添加了监听事件的模块执行函数，判断当前模块是否出现在页面上
4、当模块元素监听到出现在页面时，先判断模块元素是否在发布监听对象中注册过事件，如果没有则注册位置变化事件
5、获取模块下所有非嵌套的，需要监听位置的元素去取监听模块元素注册的位置变化事件，如果已经注册过，则执行位置事件，并判断当前元素是否显示于页面上。判断为出现在页面时，则执行回调函数，通知元素出现在页面上。
以购物页面的监听为例：
假设页面：有A、B、C三个模块，对应的模块id分别为a、b、c。图中蓝色遮盖部分为定义的第一层，即模块层。红色框内为添加监听的元素，为定义第二层，即元素。例如图6所示的
当页面加载完成以后，js首先创建发布监听控制对象(EventCon：后文以这个指代控制对象，不再赘述)。
获取所有模块对象(A、B、C)，并在EventCon中注册监听事件(Scroll:下文已这个指代模块监听事件名称)。
添加页面滚动监听事件(window.scorll)，监听页面位置变化。1秒内，当页面未滚动或者上下滚动距离未超过150像素时，通知EventCon发布Scroll事件。
A、B、C分别收到通知，以A为例。A收到通知，开始检查自身是否在页面上(不在页面下方或者页面上方即认为出现在页面上)。未显示在页面上，不做任何处理。出现在页面上，则进入第6步。
A出现在页面上：在EventCon中注册事件名为a的事件，并让A下面的所有需要监听位置的元素订阅a事件。如果在EventCon中已经订阅过了，则不再订阅。
A通知EventCon发布a事件，所有添加过监听的元素开始判断是否在页面上，如果在页面上则调用传入的回调函数，通知元素出现在页面上。如果不再页面上则不处理。
即通过浏览器中的局部变量，EventCon和Scroll实现模块元素的曝光。避免了对页面上所有的元素同时进行监听就会很卡的问题。而观察者对象作为页面代码的一部分，是页面一进入就有的，与页面一并存在。
本实施例的设计思路在于创建一个发布监听对象去管理事件，页面分2层(第一层定义为模块层，第二层定义为模块下添加监听的元素)来判断元素是否出现在页面上。尤其是：
一、通过js节流的方式，即在1s内页面的滚动距离不超过指定距离(150像素)，减少函数执行的频率。
二、通过分为2层的方式去监听页面元素的方式减小对页面性能的影响。
三、可以通过三层的定时器(第一层为节流定时器，第二层为模块延时执行定时器，第三层为监听元素延时执行定时器)，异步运行所有的业务逻辑，减少代码可能对页面产生的阻塞。
本实施例的方案还实现了兼容一些低版本浏览器无页面元素是否出现在页面上情况，实现在这些浏览器中监听元素是否出现在页面上，同时为了降低页面的性能开销所有的逻辑都是在定时器中执行，使用浏览器的空白时间，来减小对性能的影响。
本实施例还提供一种页面元素的监听的装置，如图6所示的，包括：
监听模块，用于在观察者对象中注册位置变换监听事件，其中，所注册的位置变换监听事件对应页面中的模块元素。
发布模块，用于当发生停留事件时，触发所述观察者对象的发布事件。
分析模块，用于所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上。
上报模块，用于上报出现在当前页面上的模块元素。
进一步的，还包括：对象创建模块，用于创建观察者对象，并为所述观察者对象分配事件缓存池、订阅事件对象、发布事件对象和移除事件对象。
所述监听模块，具体用于获取页面上的模块元素，并在所述观察者对象上为所获取的模块元素注册位置变换监听事件。
其中，所述模块元素包括：模块层中的模块和元素层中的元素。页面在所述模块层上被划分为至少两个区域，每一个区域作为一个模块并分配模块id。每一个模块中配置至少1个坑位，每个坑位中填充元素，所述元素的类型至少包括字符、图案、动图、音频和视频。
所注册的位置变换监听事件对应页面中的模块。或者所注册的位置变换监听事件对应页面中的模块中的至少一个元素。
具体的，所述发布模块，具体用于添加页面滚动监听事件，并监听页面滚动。若出现在指定时间内页面未发生滚动，或者在指定时间内页面中的模块元素的移动距离不超过预设值时，判定发生所述停留事件。
所述分析模块，具体用于所述发布事件被触发后，检测页面中的模块元素是否在所述监听对象中注册过位置变换监听事件。若否，则对页面中的模块元素在所述监听对象中注册过位置变换监听事件。若是，则当前页面中的模块元素执行位置变换监听事件，并判断模块元素是否出现在当前页面上，若是则执行回调函数，向所述监听对象通知模块元素出现在当前页面上。
本实施例可以应用在网页元素出现和离开页面的通知方法。针对部分浏览器无元素出现在可视视图(展示给用户的，可以看到的浏览器窗口)或离开可视视图的接口，设计了监听方案。本实施例中，通过创建一个观察者对象去管理事件页面时间，来判断模块元素是否出现在页面上，从而完成对模块元素是否出现在页面上的监听。且由于监听的对象是局部的模块元素而非页面的全局变量，可以采用异步调用的逻辑实现对不同的模块元素的监听，减小监听带来的性能影响。又由于监听的是局部的模块元素的位移，而并不会对模块元素的实际内容进行采集、提取，因此也就不存在过度监听的问题，从而避免了侵犯用户的隐私。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。
Claims (10)
1.一种页面元素的监听的方法，其特征在于，包括：
在观察者对象中注册位置变换监听事件，其中，所注册的位置变换监听事件对应页面中的模块元素；
当发生停留事件时，触发所述观察者对象的发布事件；
所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上；
上报出现在当前页面上的模块元素。
2.根据权利要求1所述的方法，其特征在于，所述模块元素包括：模块层中的模块和元素层中的元素；
其中，页面在所述模块层上被划分为至少两个区域，每一个区域作为一个模块并分配模块id；
每一个模块中配置至少1个坑位，每个坑位中填充元素，所述元素的类型至少包括字符、图案、动图、音频和视频。
3.根据权利要求2所述的方法，其特征在于，所注册的位置变换监听事件对应页面中的模块；
或者所注册的位置变换监听事件对应页面中的模块中的至少一个元素。
4.根据权利要求1所述的方法，其特征在于，还包括：
创建观察者对象，并为所述观察者对象分配事件缓存池、订阅事件对象、发布事件对象和移除事件对象；
所述在观察者对象中注册位置变换监听事件，包括：获取页面上的模块元素，并在所述观察者对象上为所获取的模块元素注册位置变换监听事件。
5.根据权利要求1所述的方法，其特征在于，所述当发生停留事件时，触发所述观察者对象的发布事件，包括：
添加页面滚动监听事件，并监听页面滚动；
若出现在指定时间内页面未发生滚动，或者在指定时间内页面中的模块元素的移动距离不超过预设值时，判定发生所述停留事件；
优选的，所述指定时间小于1秒；
所述预设值小于且等于150像素。
6.根据权利要求1所述的方法，其特征在于，所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上，包括：
所述发布事件被触发后，检测页面中的模块元素是否在所述监听对象中注册过位置变换监听事件；
若否，则对页面中的模块元素在所述监听对象中注册过位置变换监听事件；
若是，则当前页面中的模块元素执行位置变换监听事件，并判断模块元素是否出现在当前页面上，若是则执行回调函数，向所述监听对象通知模块元素出现在当前页面上。
7.一种页面元素的监听的装置，其特征在于，包括：
监听模块，用于在观察者对象中注册位置变换监听事件，其中，所注册的位置变换监听事件对应页面中的模块元素；
发布模块，用于当发生停留事件时，触发所述观察者对象的发布事件；
分析模块，用于所述发布事件被触发后，判断添加了位置变换监听事件的模块元素是否出现在当前的页面上；
上报模块，用于上报出现在当前页面上的模块元素。
8.根据权利要求7所述的装置，其特征在于，还包括：
对象创建模块，用于创建观察者对象，并为所述观察者对象分配事件缓存池、订阅事件对象、发布事件对象和移除事件对象；
所述监听模块，具体用于获取页面上的模块元素，并在所述观察者对象上为所获取的模块元素注册位置变换监听事件；
其中，所述模块元素包括：模块层中的模块和元素层中的元素；页面在所述模块层上被划分为至少两个区域，每一个区域作为一个模块并分配模块id；每一个模块中配置至少1个坑位，每个坑位中填充元素，所述元素的类型至少包括字符、图案、动图、音频和视频；
所注册的位置变换监听事件对应页面中的模块；或者所注册的位置变换监听事件对应页面中的模块中的至少一个元素。
9.根据权利要求7所述的装置，其特征在于，所述发布模块，具体用于添加页面滚动监听事件，并监听页面滚动；若出现在指定时间内页面未发生滚动，或者在指定时间内页面中的模块元素的移动距离不超过预设值时，判定发生所述停留事件。
10.根据权利要求7所述的装置，其特征在于，所述分析模块，具体用于所述发布事件被触发后，检测页面中的模块元素是否在所述监听对象中注册过位置变换监听事件；若否，则对页面中的模块元素在所述监听对象中注册过位置变换监听事件；若是，则当前页面中的模块元素执行位置变换监听事件，并判断模块元素是否出现在当前页面上，若是则执行回调函数，向所述监听对象通知模块元素出现在当前页面上。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910608341.XA CN110619102B (zh) | 2019-07-08 | 2019-07-08 | 一种页面元素的监听的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910608341.XA CN110619102B (zh) | 2019-07-08 | 2019-07-08 | 一种页面元素的监听的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110619102A true CN110619102A (zh) | 2019-12-27 |
| CN110619102B CN110619102B (zh) | 2022-12-30 |
Family
ID=68921476
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910608341.XA Active CN110619102B (zh) | 2019-07-08 | 2019-07-08 | 一种页面元素的监听的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110619102B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112364279A (zh) * | 2021-01-14 | 2021-02-12 | 北京小米移动软件有限公司 | 图片加载方法、装置 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108089856A (zh) * | 2016-11-22 | 2018-05-29 | 北京国双科技有限公司 | 一种页面元素的监听方法及装置 |
| CN108846116A (zh) * | 2018-06-26 | 2018-11-20 | 北京京东金融科技控股有限公司 | 网页曝光数据采集方法、系统、电子设备和存储介质 |
-
2019
- 2019-07-08 CN CN201910608341.XA patent/CN110619102B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108089856A (zh) * | 2016-11-22 | 2018-05-29 | 北京国双科技有限公司 | 一种页面元素的监听方法及装置 |
| CN108846116A (zh) * | 2018-06-26 | 2018-11-20 | 北京京东金融科技控股有限公司 | 网页曝光数据采集方法、系统、电子设备和存储介质 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112364279A (zh) * | 2021-01-14 | 2021-02-12 | 北京小米移动软件有限公司 | 图片加载方法、装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110619102B (zh) | 2022-12-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10635379B2 (en) | Method for sharing screen between devices and device using the same | |
| EP2854010B1 (en) | Method and apparatus for displaying messages | |
| US9525769B1 (en) | Providing interactive alert information | |
| US20170235435A1 (en) | Electronic device and method of application data display therefor | |
| US10186244B2 (en) | Sound effect processing method and device, plug-in unit manager and sound effect plug-in unit | |
| US11337042B2 (en) | Short message processing method and apparatus, and electronic device | |
| US20140191979A1 (en) | Operating System Signals to Applications Responsive to Double-Tapping | |
| US10643021B2 (en) | Method and device for processing web page content | |
| US20140089824A1 (en) | Systems And Methods For Dynamically Altering A User Interface Based On User Interface Actions | |
| CN105975190B (zh) | 一种图形界面的处理方法、装置及系统 | |
| US11455075B2 (en) | Display method when application is exited and terminal | |
| US10691335B2 (en) | Electronic device and method for processing input on view layers | |
| EP3340155A1 (en) | Electronic device and method for displaying web page using the same | |
| CN106156097B (zh) | 一种浏览器输入记录的处理方法及装置 | |
| US10713414B2 (en) | Web page display method, terminal, and storage medium | |
| CN108780400B (zh) | 数据处理方法及电子设备 | |
| US20160291844A1 (en) | Method and apparatus for opening a data processing page | |
| US20200201923A1 (en) | Information Recommendation Method, Terminal Device, and Server | |
| CN105095259B (zh) | 瀑布流对象显示方法及装置 | |
| US20150234576A1 (en) | Method and apparatus for displaying information and electronic device adapted to the method | |
| US9742901B2 (en) | Method, apparatus and terminal device for obtaining call log | |
| CN110619102B (zh) | 一种页面元素的监听的方法及装置 | |
| CN107391196B (zh) | 一种应用程序更新方法及移动终端 | |
| WO2016145131A1 (en) | Mobile application memory profiling for custom extensions | |
| CN104951223A (zh) | 一种触摸屏实现放大镜的方法、装置及主机 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 210042 No.1, Suning Avenue, Xuanwu District, Nanjing City, Jiangsu Province Patentee after: Jiangsu Suning cloud computing Co.,Ltd. Address before: 210042 No.1, Suning Avenue, Xuanwu District, Nanjing City, Jiangsu Province Patentee before: Suning Cloud Computing Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231222 Address after: 210000, 1-5 story, Jinshan building, 8 Shanxi Road, Nanjing, Jiangsu. Patentee after: SUNING.COM Co.,Ltd. Address before: 210042 No.1, Suning Avenue, Xuanwu District, Nanjing City, Jiangsu Province Patentee before: Jiangsu Suning cloud computing Co.,Ltd. |
|
| TR01 | Transfer of patent right |