0

I have simple html

<div class="main-app"></div>
<button class="btn"> CLICKME </button>
<script src="./index.js"></script>

another html to load: contact.html:

<div class="contact">
    this is contact component
</div>

and javascript:

function load_component() {
    document.getElementsByClassName("main-app")[0].innerHTML='<object type="text/html" data="./contact.html" ></object>';
    // here is when I want to check if this particular content is ready
    var loader = setInterval(function () {
        if(document.getElementsByTagName("object")[0].readyState !== "complete") return;
        clearInterval(loader);
     }, 300);
}

document.getElementsByClassName('btn')[0].addEventListener("click", function(event) {
    load_component();
});

As you see on following screen it creates whole html dom (#document) inside our html. How can I check if that document is ready?

and here is screen from inspect element of added html:

enter image description here

KoboldMines
  • 301
  • 1
  • 3
  • 15
  • Does this answer your question? [$(document).ready equivalent without jQuery](https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) – Mike S. Jan 12 '21 at 09:03
  • @MikeS. No, I tried to use it. But this #document is something like in iFrames. It's dom inside dom... – KoboldMines Jan 12 '21 at 11:14
  • You should use an iframe not an object, the you can [do this](https://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content) – Liam Jan 12 '21 at 12:05

0 Answers0