无法居中从 XMLHttpRequest 生成的元素答案

【问题标题】：Can't center an element generated from XMLHttpRequest无法居中从 XMLHttpRequest 生成的元素
【发布时间】：2016-06-02 15:02:09
【问题描述】：

我正在构建一个相当复杂的网络应用程序。主页加载，然后是所有菜单项（300+）、表单提交等。通过 XMLHttpRequest 加载。我有一个基本的“面板”模板，它允许面板看起来和操作（拖动、调整大小等）就像应用程序的子窗口一样。我将所有 XMLHttpRequest 请求的页面加载到“面板”模板的内容部分。

我遇到的问题是，如果我尝试将新“面板”居中，它似乎找不到新的“面板”大小。我的代码设置为，当单击菜单项时，它运行一个调用 XMLHttpRequest 函数的函数，原始函数将回调函数传递给 XMLHttpRequest。然后回调函数克隆面板模板，因此我可以更改几个元素属性，然后将响应附加到文档片段中克隆的“面板”模板。然后将所有内容附加到显示的 HTML 中，之后我找到新的“面板”大小并尝试将其居中，但总是失败。

由于每个函数都比我上面所说的要多得多，因此希望下面是代码相关部分的准确条带化版本。

XMLHttpRequest 函数没什么异常，一旦成功响应，回调将运行“OpenPanel”函数（见下文）。

回调函数：

function OpenPanel(e, response)
{
    var rescontent = response.querySelector('.content');
    var newid = rescontent.getAttribute('data-id');
    var titlebar = rescontent.getAttribute('data-title');

    var frag = document.createDocumentFragment();
    var clonepanel = doc.getElementById('paneltemplate').cloneNode(true);
    clonepanel.id = newid;
    frag.appendChild(clonepanel);

    frag.querySelector('.titlebar').innerHTML = titlebar;
    var replacelem = frag.querySelector('.content');
    replacelem.parentNode.replaceChild(rescontent, replacelem);

    doc.getElementById('mainbody').appendChild(frag);

    var newpanel = document.getElementById(newid);
    newpanel.addEventListener('mousedown', PanelSelect, true);

    newpanel.style.cssText = PanelPosition(newpanel);
}

面板位置函数：

function PanelPosition(panel)
{
    var lh = panel.clientHeight;
    var lw = panel.clientWidth;
    var wh = panel.parentNode.clientHeight;
    var ww = panel.parentNode.clientWidth;

    var paneltoppos = (wh - lh) / 2;
    var panelleftpos = (ww - lw) / 2;

    return 'top: ' + paneltoppos + 'px; left: ' + panelleftpos + 'px;';
}

我尝试使用延迟 1 毫秒的 setTimeout，但这会导致面板在移动之前在屏幕上闪烁，位置错误。从我的角度来看，这让应用程序感觉很便宜，或者就像只付出了第二次努力。即使它没有闪现 setTimeout 看起来更像是一个 hack 而不是一个解决方案。

我已经用几个不同的“页面”（xhr 请求）尝试了这段代码，我几乎感觉到在运行回调函数时 XMLHttpRequest 尚未完成加载（我怀疑这是可能的）。例如，我把

console.log('top: '+wh+' - '+lh+'(wh - lh) left: '+ww+' - '+lw+'(ww - lw)');

在“PanelPosition”函数中，如果没有 setTimeout，面板高度 (lh) 和宽度 (lw) 介于 100 到 200 像素之间。但是使用 setTimeout，面板的高度和宽度通常超过 500 像素。当然，这会严重影响居中位置。

过去几天我尝试了几次搜索，但没有任何结果。因此，如果有描述问题和解决方案的好帖子或文章，请随时指出我。

应该注意，由于我只在 node-webkit/nw.js（chromium/webkit 浏览器）中运行网络应用程序，因此不需要跨浏览器解决方案。

【问题讨论】：

标签： javascript xmlhttprequest

【解决方案1】：

好吧，我想我会回答我自己的问题。

在寻找完全不相关的东西时，我发现了这个this SO 帖子。接受的答案提供了解释问题的线索。

不幸的是，您似乎必须将控件交还给浏览器（像您一样使用 setTimeout()）才能观察到最终尺寸；幸运的是，超时时间可能很短。

基本上，javascript 不在函数调用结束之前绘制附加元素。所以 setTimeout 是我的问题的一种解决方案。但是，还有第二种解决方案。如果我只需要等到函数结束，那么让我们做一个小（集中）函数。所以我只是将创建附加“面板”所需的所有代码移到了一个完全独立的函数中。这样做我解决了另一个悬而未决的问题。

编辑：

或者没有。显然，一个单独的功能现在不起作用，但在我发布之前它就起作用了。谁知道也许我在重新加载页面之前没有保存更改。

【讨论】：