0

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

container.innerHTML = content;

このノードの以前のコンテンツを上書きしなければならない場合があります。これは、前のコンテンツがより多くの垂直スペースを占有し、新しいコンテンツが占有し、ユーザーがページを下にスクロールするまで（高さを指定すると、新しいコンテンツが許可するよりも多くスクロールする）、正常に機能します。

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

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

誰かがこれに対処する方法を知っていますか？

4

6 に答える 6

4

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

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

次に、 の内容を変更するときに、divこれを実行してブラウザをアンカー タグにジャンプさせることができます。

location.hash = 'ajax-div';

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

(最新のFFベータと最新のサファリでテスト済み)

于 2008-09-15T19:21:47.507 に答える
1

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

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

Secondly, perhaps by modifying the scroll position as suggested earlier. You could simply move the scroll back to 0 as suggested or if that is to obtrusive you could try to restore the scroll after the content change. Subtract the height of the old content node from the current scroll position (reseting the browser's scroll to the content node's 0), change the node content, then add the new node's height to the scroll position.

Palehorse is right though (I can't vote his answer up at the moment - no points) an abstraction library like jQuery, Dojo, or even Prototype can often help with these matters. Especially if you see your page / site moving beyond simple DOM manipulation you'll find the tools and enhancements provided by libraries to be a huge help.

于 2008-09-15T16:47:16.270 に答える
0

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

于 2008-09-15T17:03:34.937 に答える
0

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

于 2008-09-15T17:04:16.870 に答える
0

コンテンツを置き換える前に、スクロール位置を一番上に戻す (element.scrollTop = 0; element.scrollLeft = 0; 念のため) とうまくいきますか?

于 2008-09-15T16:01:43.900 に答える
0

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

jQueryのような軽量ライブラリを使用することをお試しください。ブラウザの違いをかなりうまく処理します。コンテナの ID を持つ div の内部 HTML を設定するには、次のように記述します。

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

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

于 2008-09-15T15:14:05.433 に答える