How To Check If An Element Has Been Loaded On A Page Before Running A Script?

December 27, 2023 Post a Comment

So I am creating my page in my companies template, which only allow us access to the body of the page. We don't have access to the head tag and there are scripts loaded on a lower

Solution 1:

Sounds like a job for MutationObserver!

A MutationObserver is like an event listener: you can attach it to any DOM element to listen for changes:

var observer = newMutationObserver(function (mutationRecords) {
    console.log("change detected");
});

The callback is passed an array of MutationRecords, which hold different lists of added/deleted/modified nodes.

Then, we attach the observer to any node:

observer.observe(document.body, {childList: true});
// second argument is a config: in this case, only fire the callback when nodes are added or removed

Note: IE support is not amazing. (surprise, surprise) Only works on IE 11. (Edge supports it, though.)

Here's another SO question about detecting changes to the DOM: Detect changes in the DOM

Snippet:

document.querySelector("button").addEventListener("click", function () {
  document.body.appendChild(document.createElement("span"));
});

var observer = newMutationObserver(function (m) {
  if (m[0].addedNodes[0].nodeName === "SPAN")
    document.querySelector("div").innerHTML += "Change Detected<br>";
});

observer.observe(document.body, {childList: true});

<button>Click</button><div></div>

Solution 2:

2022 Version, with MutationObserver

Rewrote the 2020 code to use a MutationObserver instead of polling.

/**
 * Wait for an element before resolving a promise
 * @param {String} querySelector - Selector of element to wait for
 * @param {Integer} timeout - Milliseconds to wait before timing out, or 0 for no timeout              
 */functionwaitForElement(querySelector, timeout){
  returnnewPromise((resolve, reject)=>{
    var timer = false;
    if(document.querySelectorAll(querySelector).length) returnresolve();
    const observer = newMutationObserver(()=>{
      if(document.querySelectorAll(querySelector).length){
        observer.disconnect();
        if(timer !== false) clearTimeout(timer);
        returnresolve();
      }
    });
    observer.observe(document.body, {
      childList: true, 
      subtree: true
    });
    if(timeout) timer = setTimeout(()=>{
      observer.disconnect();
      reject();
    }, timeout);
  });
}

waitForElement("#idOfElementToWaitFor", 3000).then(function(){
    alert("element is loaded.. do stuff");
}).catch(()=>{
    alert("element did not load in 3 seconds");
});

2020 version, with promises

This code will poll the DOM 10x/second and resolve a promise if it's found before the optional timeout.

/**
 * Wait for an element before resolving a promise
 * @param {String} querySelector - Selector of element to wait for
 * @param {Integer} timeout - Milliseconds to wait before timing out, or 0 for no timeout              
 */functionwaitForElement(querySelector, timeout=0){
    const startTime = newDate().getTime();
    returnnewPromise((resolve, reject)=>{
        const timer = setInterval(()=>{
            const now = newDate().getTime();
            if(document.querySelector(querySelector)){
                clearInterval(timer);
                resolve();
            }elseif(timeout && now - startTime >= timeout){
                clearInterval(timer);
                reject();
            }
        }, 100);
    });
}


waitForElement("#idOfElementToWaitFor", 3000).then(function(){
    alert("element is loaded.. do stuff");
}).catch(()=>{
    alert("element did not load in 3 seconds");
});

Original answer

functionwaitForElement(id, callback){
    var poops = setInterval(function(){
        if(document.getElementById(id)){
            clearInterval(poops);
            callback();
        }
    }, 100);
}

waitForElement("idOfElementToWaitFor", function(){
    alert("element is loaded.. do stuff");
});

Solution 3:

I would recommend against using MutationObserver. This approach has many drawbacks: it slows page loading, has poor browser support. There are situations when this is the only approach to solve the problem at hand.

A better approach is to use the onload DOM event. This event works on tags such as iframe and img. For other tags, this is the pseudo code you can take inspiration from:

<body><script>functiondivLoaded(event){
  alert(event.target.previousSibling.previousSibling.id);
}
</script><divid="element_to_watch">This is an example div to watch it's loading</div><iframestyle="display: none; width: 0; height: 0"onload="divLoaded(event)"/></body>

NOTE: The trick is to attach an iframe or img element after every element you want to watch for their loading.

Solution 4:

Here's a function written in ClojureScript which invokes some function whenever a condition is met.

(require '[cljs.core.async :as a :refer [<!]]
         '[cljs-await.core :refer [await]])
(require-macros '[cljs.core.async.macros :refer [go]])

(defn wait-for-condition
  [pred-fn resolve-fn & {:keys [reject-fn timeout frequency]
                         :or {timeout 30 frequency 100}}]

  (let [timeout-ms (atom (* timeout 1000))]
    ;; `def` instead of `let` so it can recurse
    (def check-pred-satisfied
      (fn []
        (swap! timeout-ms #(- % frequency))
        (if (pred-fn)
          (resolve-fn)
          (if (pos? @timeout-ms)
            (js/setTimeout check-pred-satisfied frequency)
            (when reject-fn
              (reject-fn))))))

    (go (<! (await (js/Promise. #(js/setTimeout check-pred-satisfied frequency)))))))

Then you could do something like

wait_for_condition((id) =>document.getElementById(id), () =>alert("it happened"))

(wait-for-condition #(js/document.getElementById id)
                    #(js/alert "it happened")
                    :frequency 250
                    :timeout 10)

Solution 5:

Expanding on @i-wrestled-a-bear-once's solution. With this js code, we can disable the popup as well when the target component is not present in the DOM anymore.

It can be used for the cases when you're asking for a file input from for a request, and don't want to display the file after he's done with the request.

// Call this to run a method when a element removed from DOMfunctionwaitForElementToUnLoad(querySelector) {
    const startTime = newDate().getTime();
    returnnewPromise((resolve, reject)=>{
        const timer = setInterval(()=>{
            const now = newDate().getTime();
            if(!document.querySelector(querySelector)) {
                clearInterval(timer);
                resolve();
            }
        }, 1000);
    });
}

// Call this to run a method when a element added to DOM, set timeout if required.// Checks every second.functionwaitForElementToLoad(querySelector, timeout=0) {
    const startTime = newDate().getTime();
    returnnewPromise((resolve, reject)=>{
        const timer = setInterval(()=>{
            const now = newDate().getTime();
            if(document.querySelector(querySelector)){
                clearInterval(timer);
                resolve();
            }elseif(timeout && now - startTime >= timeout){
                clearInterval(timer);
                reject();
            }
        }, 1000);
    });
}

// Removing onclose popup if no file is uploaded.functionexecuteUnloadPromise(id) {
  waitForElementToUnLoad(id).then(function(){
      window.onbeforeunload = null;
      executeLoadPromise("#uploaded-file");
  });
}

// Adding onclose popup if a file is uploaded.functionexecuteLoadPromise(id) {
  waitForElementToLoad(id).then(function(){
      window.onbeforeunload = function(event) { 
        return"Are you sure you want to leave?"; 
      }
      executeUnloadPromise("#uploaded-file");
  });
}

executeLoadPromise("#uploaded-file");

Would love suggestions on how I can make this better.

Free Interactive Html5 Tutorial