JS 冷门知识

最新推荐文章于 2021-08-18 15:38:30 发布

蚂蚁上的大象

最新推荐文章于 2021-08-18 15:38:30 发布

阅读量440

点赞数 2

分类专栏： JavaScript api 前端的那些事文章标签： javascript JS 前端冷知识 JS方法集

本文链接：https://blog.csdn.net/Jensen_Yao/article/details/100781048

版权

JavaScript 同时被 3 个专栏收录

76 篇文章 2 订阅

订阅专栏

前端的那些事

28 篇文章 7 订阅

订阅专栏

api

4 篇文章 0 订阅

订阅专栏

监听网络状态

navigator.onLine 方法

代码如下：

/* 监听网络状态 */
mounted(){
    let that = this;
    window.addEventListener('online',  that.update, true);
    window.addEventListener('offline', that.update, true);
},
/* 监听方法 */
update (){
    let that = this;
    that.onLineInfo = navigator.onLine ? "online" : "offline";
},

页面可编辑：contentEditable

可以让浏览器变成编辑器

代码如下：

/* 在浏览器地址栏输入 */
data:text/html,<html contenteditable>

还可以让你编辑当前页面的文字（增 / 删）

/* 在 console 控制台输入 */
document.body.contentEditable=true

页面中某个元素相对浏览器视窗上下左右的距离

使用 getBoundingClientRect() 方法：用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。不包含文档卷起来的部分。该函数返回一个 object 对象，有8个属性：top，right，buttom，left，width，height，x，y

代码如下：

/* 监听头部固定 */
<div class="pride_tab_fixed" ref="pride_tab_fixed">	
    <div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''">	
        //header
    </div>	
</div>	
export default {	
    data(){	
      return{	
        titleFixed: false	
      }	
    },	
    activated(){	
      this.titleFixed = false;	
      window.addEventListener('scroll', this.handleScroll);	
    },	
    methods: {	
      handleScroll: function () {	
        let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;	
        this.titleFixed = offsetTop < 0;	
      }	
    }	
  }

监听元素是否进入了设备的可视区域之内

使用 IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。

所以我们可以用这个特性来处理曝光埋点，而不是用 getBoundingClientRect().top 这种更加损耗性能的方式来处理。

IntersectionObserverFun: function() {	
    let self = this;	
    let ele = self.$refs.pride_tab_fixed;	
    if( !!IntersectionObserver ){	
        let observer = new IntersectionObserver(function(){	
            let offsetTop = ele.getBoundingClientRect().top;	
            self.titleFixed = offsetTop &lt; 0;	
        }, {	
            threshold: [1]	
        });	
        observer.observe(document.getElementsByClassName('title_box')[0]);	
    } else {	
        window.addEventListener('scroll', _.throttle(function(){	
            let offsetTop = ele.getBoundingClientRect().top;	
            self.titleFixed = offsetTop &lt; 0;	
        }, 50));	
    }	
},

喜欢博主的可以点赞关注一下

--------------------------------------------------------------- END ------------------------------------------------------------------

蚂蚁上的大象

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 冷门知识

监听网络状态navigator.onLine 方法代码如下：/* 监听网络状态 */mounted(){ let that = this; window.addEventListener('online', that.update, true); window.addEventListener('offline', that.update, true);...
复制链接

扫一扫

专栏目录