Question

我需要使用以下代码将HTML5视频添加到页面中：

document.querySelector("#mydiv").appendChild(video);
console.debug(document.querySelector("video").clientWidth);

我的问题是，第二行返回0，因为video标记需要一段时间才能加载要播放的视频。如果我在加载页面后手动在控制台中键入第二行，我会得到实际值。是否有更好的方法来获得此值而不是使用超时来定期检查值是否已更新？

Answer 1

Javascript是单线程的。你应该把代码放到事件循环中，这样就可以让js与DOM一起工作。

试试看：

document.querySelector("#mydiv").appendChild(video);
setTimeout(function(){
  console.debug(document.querySelector("video").clientWidth);
});

Answer 2

向元素添加video.onloadstart事件。

video.onloadstart(getClientWidth);
document.querySelector("#mydiv").appendChild(video);
function getClientWidth() {
    console.debug(document.querySelector("video").clientWidth);
}

了解更多here。

Answer 3

我需要做类似的事情并且偶然发现了这个问题，因为我也许对此有一个回调。原来没有。因此，这是使用Window.requestAnimationFrame()的另一种方法。

它看起来像这样：

// Prepare the new element
let video = document.createElement('video');

// Add the element to the DOM. Works with any element
document.querySelector("#mydiv").appendChild(video);

// Updateing the DOM will cause a re-render, which we can hook into
window.requestAnimationFrame(() => {
  console.debug(document.querySelector("video").clientWidth);
});

<div id="mydiv">Video goes here:</div>

检查控制台以查看其工作情况。

Javascript appendChild回调？

3 个答案: