2

JavaScript でダイアグラム コンポーネントを作成しています。前景と背景の 2 つのレイヤーが別々にレンダリングされます。

背景の必要なサイズを決定するには:

  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 はいつレンダリングを実行し、フォアグラウンド レンダリングが完了するまでバックグラウンド生成を遅らせるにはどうすればよいですか? またはフォアグラウンド要素の高さを決定する別の方法はありますか?

[Dan の回答をテストした後に追加 (thanx Dan)]

コールバック メソッドの本体内 ( setTimeout(...))I can see, のレンダリングinnerHTMLはまだ完了していません。

4

2 に答える 2

2

次のコード行によってレンダリングされる DOM に挿入したばかりのものに決して依存するべきではありません。すべてのブラウザーは、これらの変更をある程度グループ化するため、いつ、どのような理由で変更を行うかを判断するのは難しい場合があります。

これに対処する最善の方法は、何らかのイベントに応答して 2 番目の部分を実行することです。そのような状況で使用できる良いものがあるようには見えませんが、それが失敗した場合は、次の方法で 2 番目の部分をトリガーできます。

setTimeout(renderBackground, 0)

これにより、コードの 2 番目の部分が実行される前に、現在のスレッドが確実に完了します。

于 2008-10-03T20:31:10.167 に答える
0

parentDiv.children[0] (children は FF3 では有効なプロパティではありません) は必要ないと思いますが、parentDiv.childNodes[0] が必要ですが、これには高さのないテキスト ノードが含まれることに注意してください。次のように、parentDiv の子孫がレンダリングされるのを待ってループを試すことができます。

関数 getRenderedHeight(parentDiv) {
if (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 に答える