主页 / 问题 / 663956
Accepted
Dmitry Maslennikov
Asked:2020-05-10 05:56:08 +0000 UTC2020-05-10 05:56:08 +0000 UTC

innerHTML（DOM更新）完成后如何在JS中进行函数调用？

  • 772

模态窗口有一个 div 容器，其内容通过 AJAX 加载。此外（在加载内容之后），它的高度是确定的，这取决于模态窗口对齐的位置。

document.getElementById('modal').innerHTML = ajax_html;
...
var height = document.getElementById('modal').clientHeight;

这些函数并发执行，这导致模态窗口的高度在内容加载到其中之前确定（并且 DOM 树被更新）。

这一招解决了问题，但是在代码上看起来不是很优雅。

document.getElementById('modal').innerHTML = ajax_html;
...
setTimeout(function() {
    var height = document.getElementById('modal').clientHeight;
    ...
}, 20);

如何在第一个 DOM 操作（innerHTML）完成后才调用第二个功能（高度检测）？

javascript

2 个回答

  1. Best Answer

    功能同时运行

    一切都是按顺序完成的 - HTML 放在容器中，然后根据容器内的 HTML 计算高度。另一件事是，在 HTML 中，图片可能会在加载后实际改变大小 - 如果是这种情况，图片会有图像加载事件。此外，某些脚本可以在调用后使用此 HTML，var height = ...这将导致大小发生变化：在这里您已经可以自己在代码中看到原因。但是没有同时做任何事情。

    您也可以完全在 CSS3 上制作弹出窗口 - 那么您根本不需要计算高度。

    • 2

  2. 你需要这样的东西：

    function new (node, data, callback) { 
    node = data;
    callback();
}

function callback (node){
    var height = node.clientHeight;
}
    • 0

相关问题