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

The Java.lang.finalize heap became too large during the Hadoop URL parsing task

Utilizing Node.js, delete the author from the database and then use a GET request to display all

The null error occurs when rendering with React's state array

An issue has arisen with NextJS Link where it is failing to populate an anchor tag

Difficulty encountered when trying to obtain div height automatically

How to dynamically add events to a JQuery FullCalendar using a loop

If the value of the "Global Region" field in the PDF form is not empty, then execute the following JavaScript code:

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Mobile devices offer a seamless vertical scrolling experience

Retrieving Ajax Data Using C#

"Switching from vertical to horizontal time line in @devexpress/dx-react-scheduler-material-ui: A step-by-step guide

Slideshow elements removed

Applying CSS borders with circular corners

Guide to setting up Date Range Validator within MVC 4

What are the steps to determine if a radio has been examined through programming?

What is the best way to exclude certain values from Objects in Javascript?

Issue with border radius in MUI 5 affecting table body and footer elements

Operating on a duplicate of the array is necessary for mapping an array of objects to function properly

Creating a button in ReactJS with text displayed under an icon

Functionality of multiple sliders