iframe编辑器designMode在IE下on/off切换时的问题--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > iframe编辑器designMode在IE下on/off切换时的问题=

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下状态切换不会出现问题。

-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> 

　　为了兼容性起见，还是在转换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> 

类别：JavaScript/Ajax　作者：波波　日期：2010-06-03　【评论：0】　

上一篇：检查textarea每行的内容是否符合要求　
下一篇：模仿163/qq图片浏览效果js文件说明

暂时没有评论！

发表留言

百度赞助