设立iframe为可编辑状态后敲回车在各浏览器中输出的innerHTML不同-HTML教程-爱易网页

设立iframe为可编辑状态后敲回车在各浏览器中输出的innerHTML不同

日期：2014-05-17　浏览次数：21022 次

设置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 ：