如何判断元素是否已呈现？

问题描述

我有简单的 html

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

要加载的另一个 html：contact.html：

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

和 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();
});

正如您在以下屏幕上看到的那样，它在我们的 html 中创建了整个 html dom（#document）。如何检查该文档是否已准备就绪？

这是来自添加的 html 的检查元素的屏幕：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）