iframe编辑器designMode在IE下on/off切换时的问题
今天有个网友在“Firefox Iframe 编辑器光标问题”中留言问是否能点击某个按钮进行iframe编辑状态的切换，所以进行了下调试，结果在IE下iframe状态如果从on-->off-->on-->off时，当iframe中初始化时有内容，则html编辑器的内容变为当前页面的html代码。如果初始化时没有内容，在on状态下输入信息，当designMode切换到off状态时，iframe里面的内容就丢失了，⊙﹏⊙b汗~
测试代码如下，在IE6/IE7下都出现相同问题，在FIrefox下状态切换不会出现问题。
为了兼容性起见，还是在转换designMode状态在off时使用一个div来显示iframe中的内容，然后隐藏iframe，当on时显示iframe，隐藏div，代码如下
原创文章，转载请注明出处：iframe编辑器designMode在IE下on/off切换时的问题
测试代码如下，在IE6/IE7下都出现相同问题，在FIrefox下状态切换不会出现问题。
+展开
-HTML
<iframe id="ed" name="ed" style="border:solid 1px black;width:400px;height:200px;display:block;" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<input type="button" value="关闭编辑状态" onclick="StateOp(this)"/>
<script type="text/javascript">
var win,doc,cacheHTML='',isIE=!!document.all;
window.onload=function(){
win=isIE?document.frames['ed']:document.getElementById('ed').contentWindow;
doc=win.document;
doc.designMode='On';
/*
1)如果v不为空，则在IE下在第二次设置designMode为Off时iframe中的内容竟然是当前页面的内容
2)如果v为空，则ie下输入内容转换designMode为off时内容会被清空
*/
var v='11111';
if(v){
doc.open();
doc.writeln('<html><head><meta http-equiv="content-type" content="text/html;charset=gb2312"/></head><body>'+v+'<body></html>');
doc.close();
}
}
function StateOp(btn){
btn.value=btn.value=='关闭编辑状态'?'开启编辑状态':'关闭编辑状态';
doc.designMode=doc.designMode.toLowerCase()=='on'?'Off':'On';
document.title=doc.designMode;
}
</script>
<input type="button" value="关闭编辑状态" onclick="StateOp(this)"/>
<script type="text/javascript">
var win,doc,cacheHTML='',isIE=!!document.all;
window.onload=function(){
win=isIE?document.frames['ed']:document.getElementById('ed').contentWindow;
doc=win.document;
doc.designMode='On';
/*
1)如果v不为空，则在IE下在第二次设置designMode为Off时iframe中的内容竟然是当前页面的内容
2)如果v为空，则ie下输入内容转换designMode为off时内容会被清空
*/
var v='11111';
if(v){
doc.open();
doc.writeln('<html><head><meta http-equiv="content-type" content="text/html;charset=gb2312"/></head><body>'+v+'<body></html>');
doc.close();
}
}
function StateOp(btn){
btn.value=btn.value=='关闭编辑状态'?'开启编辑状态':'关闭编辑状态';
doc.designMode=doc.designMode.toLowerCase()=='on'?'Off':'On';
document.title=doc.designMode;
}
</script>
为了兼容性起见，还是在转换designMode状态在off时使用一个div来显示iframe中的内容，然后隐藏iframe，当on时显示iframe，隐藏div，代码如下
+展开
-HTML
<iframe id="ed" name="ed" style="border:solid 1px black;width:400px;height:200px;display:block;" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<div id='dvHTML' style="border:solid 1px black;width:400px;height:200px;display:none;"></div>
<input type="button" value="关闭编辑状态" onclick="StateOp(this)"/>
<script type="text/javascript">
var oIfr,doc;
window.onload=function(){
oIfr=document.getElementById('ed');
doc=oIfr.contentWindow.document;
doc.designMode='On';
/*
1)如果v不为空，则在IE下在第二次设置designMode为Off时iframe中的内容竟然是当前页面的内容
2)如果v为空，则ie下输入内容转换designMode为off时内容会被清空
*/
var v='11111';
if(v){
doc.open();
doc.writeln('<html><head><meta http-equiv="content-type" content="text/html;charset=gb2312"/></head><body>'+v+'<body></html>');
doc.close();
}
}
function StateOp(btn){
var dv=document.getElementById('dvHTML');
if(btn.value=='关闭编辑状态'){
btn.value='开启编辑状态';
oIfr.style.display='none';
dv.style.display='block';
dv.innerHTML=doc.body.innerHTML;
}
else{
btn.value='关闭编辑状态';
oIfr.style.display='block';
dv.style.display='none';
}
}
</script>
<div id='dvHTML' style="border:solid 1px black;width:400px;height:200px;display:none;"></div>
<input type="button" value="关闭编辑状态" onclick="StateOp(this)"/>
<script type="text/javascript">
var oIfr,doc;
window.onload=function(){
oIfr=document.getElementById('ed');
doc=oIfr.contentWindow.document;
doc.designMode='On';
/*
1)如果v不为空，则在IE下在第二次设置designMode为Off时iframe中的内容竟然是当前页面的内容
2)如果v为空，则ie下输入内容转换designMode为off时内容会被清空
*/
var v='11111';
if(v){
doc.open();
doc.writeln('<html><head><meta http-equiv="content-type" content="text/html;charset=gb2312"/></head><body>'+v+'<body></html>');
doc.close();
}
}
function StateOp(btn){
var dv=document.getElementById('dvHTML');
if(btn.value=='关闭编辑状态'){
btn.value='开启编辑状态';
oIfr.style.display='none';
dv.style.display='block';
dv.innerHTML=doc.body.innerHTML;
}
else{
btn.value='关闭编辑状态';
oIfr.style.display='block';
dv.style.display='none';
}
}
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：iframe编辑器designMode在IE下on/off切换时的问题