Pause until the existence of document.body is confirmed

Question

Pause until the existence of document.body is confirmed

Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, at that point, document.body is null so I can't append any tags to it.

I am not concerned with waiting for the full loading of the body, I just need it to exist.

I am currently exploring ways to be notified when the body tag in HTML is created (not necessarily fully loaded, just created). Are there any event handlers available for this specific scenario that I could implement?

In addition, I would prefer not to rely on jQuery or any other third-party library and instead utilize built-in functions.

javascript html css event-handling dom-events

Answer 1

Answer №1

If you want to track changes in the DOM structure, you can utilize a mutation observer on the document.documentElement element. This way, you can monitor for any additions to its child elements, particularly checking if a new body element is created.

Check out this sample: Live Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <script>
    (function() {
      "use strict";

      var observer = new MutationObserver(function() {
        if (document.body) {
          // Body element now exists
          document.body.insertAdjacentHTML(
            "beforeend",
            "<div>Found <code>body</code></div>"
          );
          observer.disconnect();
        }
      });
      observer.observe(document.documentElement, {childList: true});
    })();
  </script>
</head>
<body>
  <div id="foo"></div>
</body>
</html>

Answer 2

If you want to track changes in the DOM structure, you can utilize a mutation observer on the document.documentElement element. This way, you can monitor for any additions to its child elements, particularly checking if a new body element is created.

Check out this sample: Live Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <script>
    (function() {
      "use strict";

      var observer = new MutationObserver(function() {
        if (document.body) {
          // Body element now exists
          document.body.insertAdjacentHTML(
            "beforeend",
            "<div>Found <code>body</code></div>"
          );
          observer.disconnect();
        }
      });
      observer.observe(document.documentElement, {childList: true});
    })();
  </script>
</head>
<body>
  <div id="foo"></div>
</body>
</html>

Answer 3

Answer №2

If you need to wait for the entire document to load, you can utilize the DOMContentLoaded event which functions similarly to $(document).ready()

document.addEventListener("DOMContentLoaded", function(event) {
   console.log("DOM fully loaded and parsed");
});

According to MDN, the DOMContentLoaded event is triggered when the browser has finished parsing the document entirely, even before stylesheets, images, and subframes have completed loading (the load event can be used for detecting a fully-loaded page).

Answer 4

If you need to wait for the entire document to load, you can utilize the DOMContentLoaded event which functions similarly to $(document).ready()

document.addEventListener("DOMContentLoaded", function(event) {
   console.log("DOM fully loaded and parsed");
});

According to MDN, the DOMContentLoaded event is triggered when the browser has finished parsing the document entirely, even before stylesheets, images, and subframes have completed loading (the load event can be used for detecting a fully-loaded page).

Pause until the existence of document.body is confirmed

Answer №1

Answer №2

Similar questions

Interactive Autocomplete Component

"Encountering a Node.js error while trying to open an image for the second

Executing intricate MongoDB collection queries using Node.js

What is the best way to utilize the isset method in PHP to check for the existence of two different

What is the process for removing a key from an object and replacing it with its corresponding value?

Adjust the size of the frame by dragging the mouse cursor to change both the width

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

The error message "Google Heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined" was encountered while using the

Self-referencing object identifier

How can one retrieve every element within nested associative arrays?

No feedback received after sending keys using Selenium

The specified function 'isFakeTouchstartFromScreenReader' could not be located within the '@angular/cdk/a11y' library

Get information collectively in node.js

What could be causing the position sticky to not function properly in my script?

Breaking free from JavaScript snippet within a PHP function in WordPress

Utilize unconventional characters in Marionette and Underscore templates to enhance your design

The Form button in my PHP email code is failing to produce any output when submitted

Jumbling a word by shuffling its letters into a random order

What is the best way to organize columns on the front end?

Tips for displaying and concealing a toggle button based on screen size changes