Question

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

我遇到的问题是，如果我试图将新的＆＃34;面板＆＃34;它似乎没有找到新的＆＃34;面板＆＃34;尺寸。设置我的代码，以便在单击菜单项时运行调用XMLHttpRequest函数的函数，原始函数将XMLHttpRequest传递给回调函数。然后回调函数克隆面板模板，因此我可以更改多个元素属性，然后将响应附加到克隆的＆＃34;面板＆＃34;模板，在文档片段中。然后将所有内容附加到显示的HTML上，然后我找到新的＆＃34;面板＆＃34;大小，并尝试居中，但它总是失败。

由于每个功能都有很多功能，而不仅仅是我上面所说的内容，因此希望是代码相关部分的精确条纹版本。

XMLHttpRequest函数没有什么异常，一旦响应成功，回调就会运行＆＃34; OpenPanel＆＃34;功能（见下文）。

回调功能：

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);
}

PanelPosition函数：

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似乎也不仅仅是一种解决方案。

我已尝试使用一些不同的＆＃34;页面＆＃34; （xhr请求）我几乎感觉到XMLHttpRequest在回调函数运行时没有完成加载（我怀疑是可能的）。例如，我把

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

在＆＃34; PanelPosition＆＃34;中的

;函数，没有setTimeout，面板高度（lh）和宽度（lw）介于100和200像素之间。但是使用setTimeout，面板的高度和宽度通常超过500像素。当然，这在中心位置会产生严重影响。

我在过去几天尝试了几次搜索，但没有发现任何事情。因此，如果有一篇好文章或文章描述问题和解决方案，请随意指出。

应该注意，当我在node-webkit / nw.js（chromium / webkit浏览器）中专门运行Web应用程序时，不需要跨浏览器解决方案。

Answer 1

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

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

不幸的是，在观察到最终尺寸之前，您似乎必须将控件移回浏览器（使用setTimeout（））;幸运的是，超时时间可能很短。

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

编辑：

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

无法将XMLHttpRequest

1 个答案: