javascript - html（已通过ajax加载）加载后如何触发一些javascript？

Question

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

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

编辑：

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

Answer 1

一旦加载了已放入 div 的 html，如何触发 javascript？

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

例如：

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... */
    }
}