javascript - Wait for document.body existence

Question

Welcome To Ask or Share your Answers For Others

javascript - Wait for document.body existence

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Wait for document.body existence

I wrote a Chrome extension that works before the page is loaded (using the attribute "run_at": "document_start"). The problem is that I want to add a div tag to the web page body as soon as it is created. Before that document.body is null so I can't append tags to it.

I don't care about full load of the body, I just need it to be existent.

I am trying to find the best way to be alerted when the body tag in html is created (not loaded fully, just created). Is there any event handler for this case that I can write?

Also, I don't want to use jQuery or any other non built-in library.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:52:31+0000

You could use a mutation observer on document.documentElement listening for changes to its childList and looking to see whether the thing that got added is body.

Example: Live Copy

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

      var observer = new MutationObserver(function() {
        if (document.body) {
          // It exists now
          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>

Categories

javascript - Wait for document.body existence

javascript - Wait for document.body existence

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags