JavaScript での innerHTML の操作

Question

私はWebページのコードを開発しています。このコードは、サーバーからコンテンツを動的に取得し、次のようなものを使用してこのコンテンツをコンテナノードに配置します。

container.innerHTML = content;

場合によっては、このノード内の以前のコンテンツの一部を上書きする必要があります。これは、以前のコンテンツが新しいコンテンツよりも多くの垂直方向のスペースを占有し、ユーザーがページを下にスクロールするまでは正常に機能します。新しいコンテンツの高さの範囲内で許容される量を超えてスクロールしました。

この場合、ページは正しく再描画されません。古いコンテンツのアーティファクトがいくつか残ります。これは問題なく動作し、ブラウザを最小化して復元する (または別の方法でウィンドウを強制的に再描画する) ことでアーティファクトを取り除くこともできますが、これはあまり便利ではないようです。

私はこれを Safari でのみテストしています (これは iPhone に最適化された Web サイトです)。

これに対処する方法を知っている人はいますか?

Answer 1

私が見つけた最も簡単な解決策は、アンカータグを配置することです <a> の上部にある div あなたが編集しているのは：

<a name="ajax-div"></a>

次に、その内容を変更すると、 div, 、これを行うと、ブラウザがアンカー タグにジャンプするようになります。

location.hash = 'ajax-div';

これを使用して、コンテンツを更新するときにユーザーが下にスクロールしすぎないようにし、そもそも問題が発生しないようにします。

(最新のFFベータ版と最新のsafariでテスト済み)

Answer 2

Safari の Webkit レンダリング エンジンが最初はコンテンツの変更を認識していないようです。少なくとも以前の HTML コンテンツを削除できるほど完全には認識していないようです。ウィンドウを最小化して復元すると、ブラウザのレンダリング エンジンで再描画イベントが開始されます。

私は 2 つの方法を検討すると思います。まず、現在の「コンテンツ」ノードの代わりに iframe を使用できますか?ブラウザーは IFrame が変更されることを期待していますが、ご覧のとおり、ブラウザーは DIV やその他の要素のコンテンツを変更するのが必ずしも得意ではありません。

2 番目に、おそらく、前に提案したようにスクロール位置を変更します。提案されているように、単純にスクロールを 0 に戻すこともできますが、それが邪魔な場合は、コンテンツの変更後にスクロールを復元してみることもできます。現在のスクロール位置から古いコンテンツ ノードの高さを減算し (ブラウザのスクロールをコンテンツ ノードの 0 にリセット)、ノードのコンテンツを変更してから、新しいノードの高さをスクロール位置に追加します。

ただし、Palehorse 氏の意見は正しいです (現時点では彼の回答に賛成票を投じることはできません。ポイントはありません) jQuery、Dojo、さらには Prototype などの抽象化ライブラリがこれらの問題に役立つことがよくあります。特に、ページやサイトが単純な DOM 操作を超えたものになっている場合は、ライブラリによって提供されるツールや拡張機能が非常に役立つことがわかります。

Answer 3

ブラウザ自体に問題があるようです。この問題は 1 つのブラウザでのみ発生しますか?

試してみるかもしれないことの 1 つは、次のような軽量ライブラリを使用することです。 jQuery. 。ブラウザの違いをかなりうまく処理します。ID を持つ div の内部 HTML を設定するには 容器 単に次のように書くだけです:

$('#container').html( content );

これはほとんどのブラウザで機能します。それがあなたの問題を具体的に解決するかどうかはわかりませんが、試してみる価値はあるかもしれません。

Answer 4

スクロール位置を先頭に戻すと機能しますか (element.scrollTop = 0;要素.scrollLeft = 0;暗記して) コンテンツを置き換える前に?

Answer 5

innerHTML を更新するたびに、要素の CSS 高さを「auto」に設定します。

Answer 6

私はcontainer.innerHTML = '';を実行してみます。コンテナ.innerHTML = コンテンツ;