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: