javascript - 如何在加载 html(已通过 ajax 加载)后触发​​一些 javascript？

Question

我正在通过 ajax 加载 html，然后将该 html 放入一个 div 中。加载到 div 中的 html 后如何触发 javascript？

我不知道 onload 事件是否是我正在寻找的，或者它是否可以与 div 元素一起使用。请记住，此 html 将异步放入 div。

编辑:

html 有一个嵌入的 youtube 视频，所以它必须加载一个图像。

Answer 1

How do I trigger javascript once the html that has been put into the div has been loaded?

您只需在将上下文放入 div 后，在 XMLHttpRequest 提供的 onreadystatechange 回调(或您正在访问的任何库提供的“完成”回调)中执行此操作使用)。

例如:

var xhr = new XMLHttpRequest(/* ... */);
// ...
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 299) {
        /* ...put the content in the div...*/

        /* ...call your function... */
    }
};
xhr.send();

您还没有说明如何将内容放入 div，但它已立即放在那里，因此不需要回调。

---

一些评论提出了一个有用的问题:加载的内容中的图像等如何处理？那更复杂。

将内容放入 div 后(假设您将 div 放在一个创造性地命名为 div 的变量中)，您需要知道有多少不完整的图像(考虑到竞争条件，因为虽然浏览器上的 JavaScript 是单线程的，但 浏览器 不是)，然后触发您的代码一次所有图像都已加载。

有点像(假设这一切都在一个函数中，也许是 onreadystatechange 处理程序):

var images = div.querySelectorAll('img'),
    img, i, done = false;

for (i = 0; i < images.length; ++i) {
    img = images[i];
    img.onload = img.onerror = checkDone;
}
checkDone();

function checkDone() {
    var x, completed = 0;

    if (done) {
        return;
    }

    for (x = 0; x < images.length; ++x) {
        if (images[x].complete) {
            ++completed;
        }
    }

    if (completed === images.length) {
        done = true;

        /* ...call your "load" function here... */
    }
}