作者vintw (陽光好青年)
看板Ajax
標題[ js ] 不同瀏覽器之間對於innerHTML的換行符號處理差異
時間Tue Jan 20 17:49:58 2009
IE在透過innerHTML寫入值時，似乎會把換行符號(\n或是\r\n)轉為空白。
一開始會發現這個問題，主要是發現某個頁面在使用ie瀏覽時會出問題，
這個頁面透過jQuery取得某些物件的內容，而這些內容之中的換行符號是有意義的。
大致的情形可以透過下面簡單的範例來重現：
============================範例一開始===============================
<html>
<script type="text/javascript" src="jquery-1.3.js"></script>
<span id="a">1st_line
2nd_line</span>
<textarea id="test"></textarea>
<input type="button" onclick="$('#test').val($('#a').text());">
</html>
============================範例一結束===============================
在這個範例中，在我的Firefox3和Opera 9.60按下按鍵後，
都可以正確的在textarea中，顯示出位在1st_line和2nd_line之間的換行；
但是使用IE7時，1st_line和2nd_line之間卻變為一個空格。
這點在jQuery 1.2.6以及1.3都是一樣的情形。
後來又做了一些實驗，發現不透過jQuery，直接使用innerHTML也會有一樣的情形。
請看下面簡單的範例：
============================範例二開始===============================
<html>
<pre id="a"></pre>
<hr>
<span id="b">1st_line
2nd_line</span>
<input type="button"
onclick="document.getElementById('a').innerHTML =
document.getElementById('b').innerHTML + '\r\n3rd_line'">
</body>
</html>
============================範例二結束===============================
Firefox和Opera可以正確的把三行之間的兩個換行符號印出，
而IE7卻會在原本應該是換行符號的位置，插入空白字元。
目前的電腦只有這三種瀏覽器，其他瀏覽器的狀況歡迎各位幫忙補完。
我沒有去實際trace過jQuery的程式碼，
因此不能確定兩者是不是一樣的原因，但是我認為很有可能。
至於解決方式，目前還沒找到，如果有的話還請各位先進指教。
(目前是在拿到資料的頁面用PHP再判斷換行/空白的情況)
基本上我認為Firefox / Opera的做法直覺上是比較正確的。
--
Sincerely.
--VinTW
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.121.196.135
1F：推 fillano:Chrome跟Safari(Webkit)結果跟ff/opera一樣。 01/20 22:09