by WebSurfer
2011年5月24日 22:40
下の画像のように、複数連続していた半角スペースが、非同期ポストバックで再描画されると 1 文字になってしまうという話です。
Label に表示する文字列の中の連続する半角スペースをブラウザ上でそのまま表示したいので、Label コントロールの CssClass に white-space: pre; と設定していたとします。さらに、その Label コントロール を UpdatePanel に配置していたとします。
初期画面では、半角スペースは設定したとおり連続してブラウザに表示されます（white-space: pre; の設定がないと、複数連続した半角スペースを Label に設定しても、ブラウザに表示された時は一個になってしまいます）。
ところが、非同期ポストバックをかけて UpdatePanel 内を部分更新すると、初期画面と同様に複数連続した半角スペースを Label に設定しても、ブラウザに表示された時は一個になってしまいます。もちろん CssClass の white-space: pre; の設定は有効な状態でです。
なお、これはブラウザに依存する問題で、IE6 と IE7 で発生します（それ以前のバージョンは未検証）。IE8, IE9, Firefox, Chrome, Safari は期待通り UpdatePanel 内を部分更新しても問題ありません。
何故でしょう？
最初は ASP.NET AJAX に関係する問題と思っていたのですが、そうではなかったです。ヒントはブラウザに依存するというところです。
原因は AJAX の部分レンダリングの際、JavaScript によって innerHTML を書き換えるとき、JavaScript が複数スペースを一個にしてしまうところにありました。
書き換えられた後は一個しかスペースがないので、いくら white-space: pre; としても複数のスペースは表示されないというわけでした。
という訳で、ASP.NET AJAX とは関係ありませんでした。IE6, IE7 で JavaScript を使って innerHTML を書き換えてやるだけで、この問題は再現できます。例えば、以下のコードのように。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rewrite innerHTML with multiple white space</title>
<script type="text/javascript">
//<![CDATA[
var str = "<h1>半角スペース> <5 文字？？</h1>";
function RewriteInnerHTML(id, innerHtml){
document.getElementById(id).innerHTML = innerHtml;
}
//]]>
</script>
</head>
<body>
<div id="div1" style="white-space: pre;">
<h1>半角スペース> <5 文字</h1>
</div>
<input type="button"
value="innerHTML 書き換え"
id="button1"
onclick="RewriteInnerHTML('div1', str);" />
</body>
</html>
上記のコードを IE6 で実行し、［innerHTML 書き換え］ボタンをクリックした時のものがこの記事の一番上に示した画像です。
9d82bcbf-06f2-4129-9439-66a516b157e8|1|4.0
Tags: AJAX
AJAX