测试代码如下
<!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，其内是一个空格。
- 大小: 11.8 KB
- 大小: 6.6 KB
- 大小: 7.5 KB
- 大小: 14.2 KB
- 大小: 5.1 KB
分享到：
相关推荐
各个浏览器对响应的缓存策略有所不同 浏览器存在跨域获取限制 前两个问题可以通过封装 XMLHTTPRequest 对象来解决，第三个问题的解决方法有很多中，兼容性和移植性比较好的就是在本域服务器上放置一个中转 ...
原因：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下： 对于IE，首先, script 标签必须带 defer 属性，其次,在插入时刻，innerHTML 的所属节点必须在 DOM 树中. 对于 Firefox 和Opera，...
innerHTML的简单应用
NULL 博文链接：https://wuzhengxuan.iteye.com/blog/1263906
解决ajax返回innerHTML中javascript不能运行问题
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
js中innerHTML与innerText的用法与区别js中innerHTML与innerText的用法与区别
博文链接：https://aideqianfang.iteye.com/blog/246585
js中innerHTML与innerText的用法与区别
svg-innerhtml 在不受支持的浏览器上的SVG节点上的innerHTML的polyfill 基于 。
简单日历和innerHTML使用 javascript的简单应用实例 可以自定义Css
当在DIV中输入”a[回车][任意个空格]a”时，HTML呈现Chrome和IE是一样的。 innerHTML属性 IE是3个字符，在两个a中间加了个空格。 Chrome则是原始输入的样子，将回车解析为\n。 HTML标记 当在DIV中输入”a<Br>a” ...
调用innerHTML之后，onclick失效了，这也是在意料之中的，因为innerHTML是以文本形式插入的button，所以无法识别onclick事件
在Ajax横道的今天，我们在页面交互上有了更高的要求，动态生成HTML毫无疑问是其中的一种。动态生成HTML的方式多种多样，最终通过一定的方法输出给用户innerHTML、documentWrite等方式
IE下得标签BUG有很多，这次是用innerHTML写入的iframe 不显示，在网上查了很久，终于找出了元凶，标签的href属性导致了BUG无法显示，这个属性去掉就好了，以后遇到在IE下得标签BUG，先尝试去掉href这个属性，说不定...
超全面javaweb第4天-_08_innerHTML属性
网站中使用了一个js插件，设置innerHTML时，在IE8下报错“未知运行时错误”： <a> -->报错处 第三方插件内容… 原因： 所设置的innerHTML的对象是一个,是由于的对象包容性的比较低，当浏览器运行这段脚本...
但不幸的是，Moziila/Firefox 和 Opera 可不吃这一套，不管 script 标签有没有设置 defer 属性，这些浏览器都不会向 IE 那样去执行插入到 innerHTML 中的脚本。 但不管脚本是否被执行了，有一点我们可以肯定，那就是...
innerHTML-outerHTML-innerTEXT