设置iframe为可编辑状态后敲回车在各浏览器中输出的innerHTML不同
测试代码如下
?
<!doctype html><html><head><title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title><meta charset="utf-8"> </head> <body><iframe frameborder="1" style="height: 330px;"></iframe><button>测试1</button><script>var ifr = document.getElementsByTagName('iframe')[0];setTimeout(function(){ifr.contentWindow.document.designMode = 'On';ifr.contentWindow.focus();}, 10);function prinf() {console.log(ifr.contentWindow.document.body.innerHTML);}var btn = document.getElementsByTagName('button')[0];btn.onclick = function() {prinf();}</script> </body></html>??
页面中的iframe，设置其document.designMode为“On”,这时开启了可编辑状态。浏览器中打开该html，光标默认定在在iframe中。这时在其内敲回车，再点击button。查看各浏览器控制台，发现一个很有趣的现象。iframe的body.innerHTML在各浏览器中输出内容均不同。
?
Firefox10 ：
?
chrome17 ：
?
?
safari5 ：
?
?
opera11 ：
?
?
IE9 ：
?
可以看到各浏览器对于回车的解析不一样（chrome和safari输出的结构一样。）
?
Firefox 中解析成 “<br>”。
?
chrome/safari 中解析成“<div><br></div>”，及会在br外再包个div。
?
opera 中解析成“<p><br></p>”，及会在br外面包个p标记。
?
IE9 中解析成“<p> </p>”，它没用用到br，是个段落p，其内是一个空格。
?
?
?
?
?
?