作者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