2

シンプルなフラッシュカード HTML アプリケーションを作成しましたが、Samsung Galaxy Tab2 7.0 タブレットの Android インターネット ブラウザー (デフォルト インストール) での動作に奇妙な問題が発生します。次のように、要素のスタイルが変更された場合

$(".question").css('color', '#FFFFFF')
$(".answer").css('color', '#FFFFFF')
$(".tag").css('background-color', '#FFFFFF')

ブラウザーは、表示をすぐに変更しません。コードの後半で、コンテナーのテキストを置き換え、テキストが要素に収まるようにサイズを計算しています。私はこのプロセスを目に見えないようにしたい (だからこそ、私はこのホワイト オン ホワイトをやりたいのです)。計算が機能しないため、要素を非表示にすることはできません。

Chrome と IE9 を使用した Windows 7 でこれをテストしたところ、うまく動作しました。そのため、Android ブラウザにはいくつかの問題があります。上記の行の後ろにテスト コードをalert('debug');配置すると、Android ブラウザーは要素の色を変更せずにメッセージを表示しますが、Windows 7 のブラウザーは期待どおり白地に白の要素を含むメッセージを表示します。

Android ブラウザにそのようなスタイルの変更をすぐに反映させるにはどうすればよいですか? そのために利用できるスクリプト関数、または<meta>これを修正するタグはありますか? お知らせ下さい。

4

1 に答える 1

1

「スタイルの変更をすぐに表示したい」と言うときは、スクリプトが引き続き実行され、画面を更新したいという意味だと思います。

継続を使用する必要があります。スクリプトを実行し続けるのではなく、譲歩して続行する必要があります。これを行うには、コードを複数の関数に分割し、次の部分のタイムアウトを設定して各部分を終了します。簡単な例を次に示します。これをループで行うと、すべての x が一度に表示されます。継続を使用する場合、一度に 1 つの x が表示されます。

<html>
<script>
function using_a_loop() {
   var e = document.getElementById('spot');
   for (var i = 0; i < 1000; ++i) {
      e.innerText += ' x';
   }
}

function using_continuations(i) {
   var e = document.getElementById('spot');
   i = i || 0;  // start at 0 when i not provided
   e.innerText += ' x';
   ++i;
   if (i < 1000) {
       setTimeout(function() { using_continuations(i); }, 0);
   }
}
</script>
<div id="spot">X marks the spot:</div>
<button onclick="using_a_loop()">use a loop</button>
<button onclick="using_continuations()">use continuations</button>
</html>
于 2012-10-13T05:22:15.257 に答える