Question

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

我不知道onload事件是否是我正在寻找的，或者如果它甚至可以用于div元素。请记住，这个html将异步放入div。

编辑：

html包含嵌入的YouTube视频，因此必须加载图片。

Answer 1

如果已经加载了放入div的html，我该如何触发javascript？

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

E.g：

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

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

1 个答案: