JS cold door knowledge

Monitor network status

navigator.onLine Method

The code is as follows:

/* Monitor network status */
    let that = this;
    window.addEventListener('online',  that.update, true);
    window.addEventListener('offline', that.update, true);
/* Listener method */
update (){
    let that = this;
    that.onLineInfo = navigator.onLine ? "online" : "offline";

Page Editable: Content Editable

Browsers can be turned into editors

The code is as follows:

/* Enter in the browser address bar */
data:text/html,<html contenteditable>

You can also edit the text of the current page (add/delete)

/* Input in console console */

The distance between an element in a page and the browser window

Use the getBoundingClientRect() method to get the left, top, right and bottom positions of an element in the page relative to the browser window, respectively. Documents are not rolled up. This function returns an object object with eight attributes: top, right, buttom, left, width, height, x, y.

The code is as follows:

/* Monitoring head fixation */
<div class="pride_tab_fixed" ref="pride_tab_fixed">	
    <div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''">	
export default {	
        titleFixed: false	
      this.titleFixed = false;	
      window.addEventListener('scroll', this.handleScroll);	
    methods: {	
      handleScroll: function () {	
        let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;	
        this.titleFixed = offsetTop < 0;	

Whether the listening element is in the visible area of the device

The use of Intersection Observer can be used to monitor whether elements enter the visible area of the device without frequent computations.

So we can use this feature to deal with exposure buried points, instead of using getBoundingClientRect().top, which is a more lossy way to deal with performance.

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]	
    } else {	
        window.addEventListener('scroll', _.throttle(function(){	
            let offsetTop = ele.getBoundingClientRect().top;	
            self.titleFixed = offsetTop &lt; 0;	
        }, 50));	

Those who like bloggers can pay attention to it.

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

Keywords: network

Added by daprezjer on Sun, 06 Oct 2019 19:16:47 +0300