测试代码如下
<!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，其内是一个空格。
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
