preface

The following apis simplify some of our interactions in Web development.

Fullscreen API

Sometimes we want full-screen preview effects, such as image preview, slide show, etc. The full-screen API is a good choice.

Basic usage

  • Open the full screen
   element.requestFullscreen().then(() = > {
       // Successful processing
   }).catch(err= > {
       // Failed processing
   })
Copy the code
  • Exit full screen
   element.exitFullscreen().then(() = > {
       // Successful processing
   }).catch(err= > {
       // Failed processing
   })
Copy the code
  • The event

Fullscreenchange Monitors the change of elements in fullscreen or out of fullscreen. Fullscreenerror failed to listen to a full-screen request.

Matters needing attention

In iframe, if you were to call the fullscreen API manually, you might get the error Document is not active because you did not give the fullscreen permission to the iframe element. You should add the attribute allowFullScreen to iframe.

MutationObserver

MutationObserver is currently a DOM change monitor. There are two main reasons:

  1. Asynchronous listeningDOMChanges do not affect page performance
  2. Fine grained listeningDOMContent changes, changes in elements, attributes, and text can be detected and the difference between old and new values can be compared

To a certain extent, it can be used to undo and redo document content.

Basic usage

  • instantiation

var observerInstance = new MutationObserver(function (mutations, observer) {
    // mutations describes the content of the change
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });
});

Copy the code

Every time the DOM changes, the callback method in the instantiation is triggered

  • methods
  1. Add Element Listener
// Listen for changes in the body element
observerInstance.observer(document.body, {
    attributes: true./ / property
    characterData: true./ / text
    childList: true./ / child nodes
    subtree: true.// Descendant node
    attributeOldValue: true.// Attribute old value
    characterDataOldValue: true / / the old text
})
Copy the code
  1. Remove Element Listener
observerInstance.disconnect()
Copy the code

When this method is called, it stops listening on the added elements

  1. Clear change record
observerInstance.takeRecords()
Copy the code

Because listening is asynchronous, not every DOM change is triggered in real time, and this method is called to clear the history cache of changes.

IntersectionObserver

IntersectionObserver and MutationObserver have similar usage methods and principles, but the former mainly monitors changes in the visibility of elements while the latter mainly monitors changes in DOM. Both are asynchronous operations and do not affect page performance. Using this API, it is very easy to implement a drop-down list refresh and drop down to load more.

Basic usage

  • instantiation

var observerInstance = new IntersectionObserver(function (entries) {
    // intersectionRatio represents the visible ratio of elements, which is greater than 0 and less than or equal to 0
    if (entries[0].intersectionRatio <= 0) return;

    loadItems(10);
}, {
    threshold: [0.0.25.0.5.0.75.1] // The ratio of the cross area to the boundary area of the listener. The default is 0
  });

Copy the code
  • methods
  1. Add Element Listener
// Listen for a particular element. Each call adds a new element listener
observerInstance.observer(document.getElement('item1'))
Copy the code
  1. Remove Element Listener
observerInstance.disconnect()
Copy the code

When this method is called, it stops listening on the added elements

  1. Returns an array of all observed targets
let IntersectionObserverEntryList = observerInstance.takeRecords()
Copy the code
  1. Stop looking at specific elements
observerInstance.unobserver()
Copy the code

Refer to the file

  • Fullscreen API
  • MutationObserver
  • IntersectionObserver