最近在更新自己的网站,遇到了Javascript代码在不同浏览器中兼容性的问题,网站后台使用了iframe,并且要实现可编辑功能。可编辑的iframe,在IE中能运行出来,可以编辑网页文本,而在FireFox、Chrome中却始终无法编辑,是只读状态,解决方法很简单。
我一开始的核心代码是这样的:
<html>
<head>
</head>
<body>
<iframe id="myiframe" style="width:750px; height:400px; border:1;"></iframe>
</body>
<script language="javascript">
<!--
document.getElementById("myiframe").contentWindow.document.designMode="on";-->
</script>
</html>
这段代码在IE中完全没有问题,可以实现编辑,而在FireFox、Chrome中全无反应,是只读状态。
经过修改的代码:
<html>
<head>
</head>
<body onLoad="start()">
<iframe id="myiframe" style="width:750px; height:400px; border:1;"></iframe>
</body>
<script language="javascript">
<!--function start()
{document.getElementById("myiframe").contentWindow.document.designMode="on";
}-->
</script>
</html>
问题关键点:把designMode="on" 的代码写在onload事件里就可以解决。
来源:http://www.cnitblog.com/CoffeeCat/archive/2010/01/07/26236.aspx