终于解决selection.createRange()兼容IE8问题
2010-12-06 17:10
309 查看
项目中需用户自定义表单,类似于富文本编辑器,在IE6,IE7没有问题,但在IE8下就歇菜,每每给客户演示,总遇到该问题,再三向客户解释并承诺尽快解决。
但要解决这个问题,谈何容易。
曾花了一周多时间也没有解决该问题,郁闷啊。
忽有一日,网上曾见一文,解决思路:当点击插入点后,马上把该点作一个锚点,选中控件后把控件html贴于上述锚点。该方案一直被我奉为圭臬,然而可能终不得其法,故均无功而返,甚为狼狈。
再次发扬蚂蚁啃骨头的精神,终于在下文的帮助下解决了这个顽疾!
selection.createRange() not working in IE8的解决方法
[ 预备警司.10078 @ 2009-09-26 09:35:55 ]
selection.createRange() not working in IE8的解决方法
最近,随着windows7的日益临近,很多人的IE浏览器操作系统的升级,一并进入到IE8。
在测试生产系统在IE8里的兼容性时发现,一个在线编辑器无法正常使用,这个编辑器类似于许多Web Editor,但与 UFQIE 不同的是,它是基于“控件”的,控件在这里可以理解为,普通的Web Editor插入一个一个的元素,字符对象等等,而控件化的,插入的是控件,可以对控件对象进行“属性"编辑,呈现效果由解析引擎执行控件后得到——这是其最具有特色的地方。
该编辑器在 IE7之前的版本都运行良好,在IE8中进行操作时,发现无法往一个 editable 的 div对象里插入“控件”对象,完成这个动作的方法是: insertImg , 在这个方法里:
if(document.selection.type == "Text"
|| document.selection.type == "None")
{
var sRange = document.selection.createRange();
itemindex++;
var itemname = obj.name + "::" + itemindex;
sRange.pasteHTML("<img src='" + "images/item/pic-" + obj.name + ".gif" + "' onDBLClick='itemAttrEditor.window.editItemAttrs(this);' name='"+itemname+"'> ");
}
使用了 document.selection.createRange() 的方法, 跟踪测试,发现这个无法在 IE8
下面正常执行并得到预期的效果,而且相应的报错。
后来经过搜索,发现网上说这个是 IE8 的一个bug,有个解决帮是:
You
can also try the new proprietary meta tag in your documents
<meta
http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Suggested
reading
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
于是赶紧测试一下,发现非预期的,即便是在头部加入这个meta,浏览器被识别为
IE7, 但上面的 createRange 仍就不好使。
另外发现一个建议性的是:
in ie8 YOU NEED to
select editable area becuase there is no other way.
具体怎么 select
,并没有给出,于是在上面的代码中,我尝试性的加入:
if(document.selection.type ==
"Text"
|| document.selection.type == "None")
{
//window.alert('insert action fired!
type:['+document.selection.type+']');
document.getElementById('oDiv').focus();
//--
focus in the target div with id='oDiv' , add when under IE8
var
sRange =
document.selection.createRange();
itemindex++;
var
itemname = obj.name + "::" + itemindex;
sRange.pasteHTML("<img
src='" + "images/item/pic-" + obj.name + ".gif" + "'
onDBLClick='itemAttrEditor.window.editItemAttrs(this);'
name='"+itemname+"'> ");
//window.alert('insert action done!
itemname:['+itemname+']
sRange:['+sRange+']');
}
else
{
window.alert('insert
action failed:
select.type:['+document.selection.type+']');
}
ducument.getElementById('oDiv').focus();
//--
IE7 and below, only handle like
this
保存,刷新,然后再次测试时,即可顺利进行,也就是说,在IE8下进行 selection.createRange() 时,需先将
target 进行 focus in操作,然后就可顺利进行,而IE7以下,似乎是往默认的 editable 的div去.
附注:加上如下两句
var doc = document.frames.designer1.document || document.frames.designer1.contentDocument; //IE || W3C
doc.designMode = 'on';
可解决IE8不支持
pasteHTML、parentElement等方法的问题。
但要解决这个问题,谈何容易。
曾花了一周多时间也没有解决该问题,郁闷啊。
忽有一日,网上曾见一文,解决思路:当点击插入点后,马上把该点作一个锚点,选中控件后把控件html贴于上述锚点。该方案一直被我奉为圭臬,然而可能终不得其法,故均无功而返,甚为狼狈。
再次发扬蚂蚁啃骨头的精神,终于在下文的帮助下解决了这个顽疾!
selection.createRange() not working in IE8的解决方法
[ 预备警司.10078 @ 2009-09-26 09:35:55 ]
selection.createRange() not working in IE8的解决方法
最近,随着windows7的日益临近,很多人的IE浏览器操作系统的升级,一并进入到IE8。
在测试生产系统在IE8里的兼容性时发现,一个在线编辑器无法正常使用,这个编辑器类似于许多Web Editor,但与 UFQIE 不同的是,它是基于“控件”的,控件在这里可以理解为,普通的Web Editor插入一个一个的元素,字符对象等等,而控件化的,插入的是控件,可以对控件对象进行“属性"编辑,呈现效果由解析引擎执行控件后得到——这是其最具有特色的地方。
该编辑器在 IE7之前的版本都运行良好,在IE8中进行操作时,发现无法往一个 editable 的 div对象里插入“控件”对象,完成这个动作的方法是: insertImg , 在这个方法里:
if(document.selection.type == "Text"
|| document.selection.type == "None")
{
var sRange = document.selection.createRange();
itemindex++;
var itemname = obj.name + "::" + itemindex;
sRange.pasteHTML("<img src='" + "images/item/pic-" + obj.name + ".gif" + "' onDBLClick='itemAttrEditor.window.editItemAttrs(this);' name='"+itemname+"'> ");
}
使用了 document.selection.createRange() 的方法, 跟踪测试,发现这个无法在 IE8
下面正常执行并得到预期的效果,而且相应的报错。
后来经过搜索,发现网上说这个是 IE8 的一个bug,有个解决帮是:
You
can also try the new proprietary meta tag in your documents
<meta
http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Suggested
reading
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
于是赶紧测试一下,发现非预期的,即便是在头部加入这个meta,浏览器被识别为
IE7, 但上面的 createRange 仍就不好使。
另外发现一个建议性的是:
in ie8 YOU NEED to
select editable area becuase there is no other way.
具体怎么 select
,并没有给出,于是在上面的代码中,我尝试性的加入:
if(document.selection.type ==
"Text"
|| document.selection.type == "None")
{
//window.alert('insert action fired!
type:['+document.selection.type+']');
document.getElementById('oDiv').focus();
//--
focus in the target div with id='oDiv' , add when under IE8
var
sRange =
document.selection.createRange();
itemindex++;
var
itemname = obj.name + "::" + itemindex;
sRange.pasteHTML("<img
src='" + "images/item/pic-" + obj.name + ".gif" + "'
onDBLClick='itemAttrEditor.window.editItemAttrs(this);'
name='"+itemname+"'> ");
//window.alert('insert action done!
itemname:['+itemname+']
sRange:['+sRange+']');
}
else
{
window.alert('insert
action failed:
select.type:['+document.selection.type+']');
}
ducument.getElementById('oDiv').focus();
//--
IE7 and below, only handle like
this
保存,刷新,然后再次测试时,即可顺利进行,也就是说,在IE8下进行 selection.createRange() 时,需先将
target 进行 focus in操作,然后就可顺利进行,而IE7以下,似乎是往默认的 editable 的div去.
附注:加上如下两句
var doc = document.frames.designer1.document || document.frames.designer1.contentDocument; //IE || W3C
doc.designMode = 'on';
可解决IE8不支持
pasteHTML、parentElement等方法的问题。
相关文章推荐
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 网站制作---eWebeditor不兼容IE8问题的解决方法
- (转)IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 网页在IE8 下不兼容的问题解决方法(图)
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- eWebeditor不兼容IE8问题的解决方法 .
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 解决 bootstrap 在IE8下的兼容问题
- 网页在IE8 下不兼容的问题解决方法(图)
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- IE8下CSS3选择器nth-child() 不兼容问题的解决方法
- IE8和360兼容模式下页面排版出问题的解决办法
- 解决IE6、IE8兼容的问题
- 解决IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 在连接mysql5.1时正常,连接sql2000时就是连不上,郁闷,终于在网上找到了解答,原来是sql驱动和hibernate的兼容 性问题,现问题已解决,留此文备查.
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- IE6 IE7 IE8CSS样式兼容问题解决方案
- 解决jquery-easyui1.3.3 combobox 多选模式不兼容IE8问题