☰

onElementReady

detect when an element is ready

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/419640/887637/onElementReady.js 

  1. // This code from: https://gist.githubusercontent.com/zachhardesty7/ea61364567ce66b94edb81f922efecef/raw/c23ba499828992d632266194384c72ff28dfad6e/onElementReady.js
  2. // ==UserScript==
  3. // @name            Library | onElementReady ES6
  4. // @namespace       de.sidneys.userscripts
  5. // @homepage        https://gist.githubusercontent.com/zachhardesty7/b19c33e4b2cec8861d55df10be0ce162/raw/
  6. // @version         0.6.0
  7. // @description     Detect any new DOM Element by its CSS Selector, then trigger a function. Includes Promise- & Callback interface. Based on ES6 MutationObserver. Ships legacy waitForKeyElements interface, too.
  8. // @author          sidneys
  9. // @icon            https://i.imgur.com/nmbtzlX.png
  10. // @include         *://*/*
  11. // ==/UserScript==
  12.  
  13. /**
  14.  * ESLint
  15.  * @exports
  16.  */
  17. /* exported onElementReady */
  18. /* exported waitForKeyElements */
  19.  
  20.  
  21. /**
  22.  * @private
  23.  *
  24.  * Query for new DOM nodes matching a specified selector.
  25.  *
  26.  * @param {String} selector - CSS Selector
  27.  * @param {{ findFirst: boolean, findOnce: boolean }} options - Stop querying after first successful pass, find each el only a single time
  28.  * @param {function=} callback - Callback
  29.  */
  30. let queryForElements = (selector, options = { findFirst: false, findOnce: true }, callback) => {
  31.     // Remember already-found elements via this attribute
  32.     const attributeName = 'was-queried'
  33.  
  34.     // Search for elements by selector
  35.     let elementList = document.querySelectorAll(selector) || []    
  36.     elementList.forEach((element) => {
  37.         if (element.hasAttribute(attributeName)) { return }
  38.         element.setAttribute(attributeName, 'true')
  39.         callback(element)
  40.         
  41.         // run reset after 2 seconds
  42.         if (!options.findOnce) {
  43.             setTimeout(() => {
  44.                 element.removeAttribute(attributeName)
  45.             }, 2000)
  46.         }
  47.     })
  48. }
  49.  
  50. /**
  51.  * @public
  52.  *
  53.  * Wait for Elements with a given CSS selector to enter the DOM.
  54.  * Returns a Promise resolving with new Elements, and triggers a callback for every Element.
  55.  *
  56.  * @param {String} selector - CSS Selector
  57.  * @param {{ findFirst: boolean, findOnce: boolean }} options - Stop querying after first successful pass, find each el only a single time
  58.  * @param {function=} callback - Callback with Element
  59.  * @returns {Promise<Element>} - Resolves with Element
  60.  */
  61. let onElementReady = (selector, options = { findFirst: false, findOnce: true }, callback = () => {}) => {
  62.     return new Promise((resolve) => {
  63.         // Initial Query
  64.         queryForElements(selector, options, (element) => {
  65.             resolve(element)
  66.             callback(element)
  67.         })
  68.  
  69.         // Continuous Query
  70.         const observer = new MutationObserver(() => {
  71.             // DOM Changes detected
  72.             queryForElements(selector, options, (element) => {
  73.                 resolve(element)
  74.                 callback(element)
  75.             })
  76.  
  77.             if (options.findFirst) { observer.disconnect() }
  78.         })
  79.  
  80.         // Observe DOM Changes
  81.         observer.observe(document.documentElement, {
  82.             attributes: false,
  83.             childList: true,
  84.             subtree: true
  85.         })
  86.     })
  87. }
  88.  
  89. /**
  90.  * @public
  91.  * @deprecated
  92.  *
  93.  * waitForKeyElements Polyfill
  94.  *
  95.  * @param {String} selector - CSS selector of elements to search / monitor ('.comment')
  96.  * @param {function} callback - Callback executed on element detection (called with element as argument)
  97.  * @param {{ findFirst: boolean, findOnce: boolean }} options - Stop querying after first successful pass, find each el only a single time
  98.  * @returns {Promise<Element>} - Element
  99.  */
  100. let waitForKeyElements = (selector, callback, options) => onElementReady(selector, options, callback)