js如何实现元素曝光上报


Posted in Javascript onAugust 07, 2019

进行数据上报的时候,经常会遇到列表数据曝光上报的问题,只对在当前可视范围内的数据内容进行曝光上报,而对于未在可视范围内的数据不进行曝光上报,等待用户滚动页面或者区域使元素出现在可视范围内时才进行曝光上报。

解决方案

目前针对此类问题,主要有两种解决方案。

方案一:监听页面或者区域scroll事件,通过getBoundingClientRect接口取元素的位置与可视窗口进行判断。

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  var width_st = rect.width / 2,
    height_st = rect.height / 2;

  var innerHeight = window.innerHeight,
    innerWidth = window.innerWidth;


  if (  rect.top <=0 && rect.height > innerHeight 
    || rect.left <= 0 && rect.width > innerWidth
  ) {
    return rect.left * rect.right <= 0
      || rect.top * rect.bottom <= 0
  }

  return (
      rect.height > 0 
    && rect.width > 0 
    && ( ( rect.top >= 0 && rect.top <= innerHeight - height_st )
      || ( rect.bottom >= height_st && rect.bottom <= innerHeight ) )
    && ( ( rect.left >= 0 && rect.left <= innerWidth - width_st )
      || ( rect.right >= width_st && rect.right <= innerWidth ) )
  );
}

var nodes = document.querySelectorAll(".item")
function report(node) {
  // 上报的逻辑
}
window.onscroll = function() {
  nodes.forEach(node => {
    if( isElementInViewport(node) ) {
      report(node)
    }
  })
  
}

优点:兼容性好

缺点:

  • 需要关注页面或者区域的scroll事件
  • 频繁的scroll事件,性能问题

方案二:通过 IntersectionObserver 监听元素是否处于可视范围

function report(node) {
  // 上报的逻辑
}
var intersectionObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if( entry.intersectionRatio > 0 ) {
      report(entry.target)
    }
  })
})
var nodes = document.querySelectorAll(".item")
nodes.forEach(node => {
  intersectionObserver.observe(node)
})

优点:

  • 无须关注 scroll
  • 回调是异步触发,不会频繁触发,性能好

缺点:兼容性不好?

实际上,针对兼容性问题,w3c 官方提供了对应 polyfill, 因此intersectionObserver用于生产是可行的。

总结

笔者在实际运用中,通过 IntersectionObserver 封装了一个简单的调用库,应用于可视化埋点 sdk 中,用于解决元素曝光问题,如下

require('intersection-observer'); // polyfill

class Exposure {
  constructor(callback) {
    if (!callback || typeof callback !== 'function') {
      throw new Error("need callback or selector param")
      return
    }
    this.intersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach(item => {
        if (item.intersectionRatio > 0) {
          if (item.target) {
            callback(item.target, item)
            this.intersectionObserver.unobserve(item.target)
          }
        }
      })
    });
  }

  observe(selector, ignoreExposured) {
    if (!this.intersectionObserver || !selector) {
      return
    }
    let nodes = []
    if( this.isDOM(selector) ) { // dom节点
      nodes = [selector]
    }else { // 选择器
      nodes = document.querySelectorAll(selector)
    }
    if (!nodes.length) {
      return
    }
    nodes.forEach(node => {
      if (!ignoreExposured && node.__wg__tracker__exposured__) {
        return
      }
      node.__wg__tracker__exposured__ = true
      // 开始观察
      this.intersectionObserver.observe(
        node
      );
    })
  }

  disconnect() {
    if (!this.intersectionObserver) {
      return
    }
    this.intersectionObserver.disconnect()
  }

  isDOM(obj) {
    if( !obj ) {
      return false
    }
    if( typeof HTMLElement === 'object' ) {
      return obj instanceof HTMLElement
    }
    if( typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string' ) {
      return true
    }
    return false
  }
}

export default Exposure

调用方法:

function report() {}
var exposurer = new Exposure((node) => {
  report(node)
})
exposurer.observe(".item)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 #Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 #Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 #Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 #Javascript
vue 集成jTopo 处理方法
Aug 07 #Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 #Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 #Javascript
You might like
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP解决中文乱码
2017/04/28 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
vue中组件的3种使用方式详解
2019/03/23 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
入职担保书怎么写
2014/05/12 职场文书
运动会方阵口号
2014/06/07 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
房屋所有权证明
2014/10/20 职场文书
个人贷款收入证明
2014/10/26 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书