2

我正在用 JavaScript 构建图表组件。它有两层分别渲染：前景和背景。

要确定所需的背景大小：

  1. 渲染前景
  2. 测量结果的高度
  3. 一起渲染前景和背景

在代码中它看起来像这样：

var foreground = renderForegroundIntoString();
parentDiv.innerHTML = foreground;
var height = parentDiv.children[0].clientHeight;
var background = renderBackgroundIntoString(height);
parentDiv.innerHTML = foreground + background;

使用IE7，这是小菜一碟。但是，Firefox2 并不太愿意立即渲染parentDiv.innerHTML，因此我无法读出前景高度。

Firefox 何时执行渲染以及如何延迟我的背景生成直到前景渲染完成，或者有没有其他方法来确定我的前景元素的高度？

[在测试丹的答案后附加（谢谢丹）]

在回调方法的主体内（setTimeout(...))我可以看到回调方法的渲染innerHTML还没有完成。

4

2 回答 2

2

你永远不应该依赖你刚刚插入到由下一行代码呈现的 DOM 中的东西。所有浏览器都会在一定程度上将这些更改组合在一起，要弄清楚何时以及为什么会变得很棘手。

处理它的最好方法是执行第二部分以响应某种事件。虽然在那种情况下看起来没有一个好的可以使用，所以如果失败了，你可以触发第二部分：

setTimeout(renderBackground, 0)

这将确保当前线程在代码的第二部分执行之前完成。

于 2008-10-03T20:31:10.167 回答
0

我认为您不需要 parentDiv.children[0]（无论如何，children 在 FF3 中都不是有效属性），而是您需要 parentDiv.childNodes[0]，但请注意，这包括可能没有高度的文本节点。您可以尝试循环等待 parentDiv 的后代呈现如下：

函数 getRenderedHeight(parentDiv) {
如果（parentDiv.childNodes）{
  变量 i = 0;
  while (parentDiv.childNodes[i].nodeType == 3) { i++; }
  //现在 parentDiv.childNodes[i] 是你的第一个非文本子节点
  返回 parentDiv.childNodes[i].clientHeight;
  //你的其他代码在这里...
} 别的 {
  setTimeout("isRendered("+parentDiv+")",200);
}
}

然后通过设置innerHTML后调用：getRenderedHeight(parentDiv)。

无论如何，希望能给一些想法。

于 2008-10-04T15:45:28.420 回答