2009年5月 的存档

慎用iframe

最近在实现一个web编辑器,于是乎用到了传说中人见人怕的iframe。经过四天的拼搏,总算是弄出了个雏形。实现了插入图片,字体修改功能没做,不打算做,个人觉得不是很必要。另外还想实现插入flash,不过最终确认不可能(完美)实现,原因请看下文。

为什么要慎用iframe?

iframe在不同浏览器的行为各异,而且几乎都存在足以把开发者折磨致死的问题。

IE(trident)

问题:

  1. designMode下无法显示flash(这个待确认,似乎是这样的)
  2. iframe失去焦点后再得到焦点时,光标位置将丢失(解决办法下面再说)
  3. 选中非文本区域或未选中任何对象(光标仍在iframe内)将丢失光标位置(QQ邮箱好像实现了,看了它的实现方法后再回来确认)

解决方案:

  1. 无法解决
  2. 在window.onbeforeactivate事件中记录光标位置,在进行编辑操作时恢复光标位置
  3. 待解决

代码:

光标的记录与恢复

var bookmark;
var range = document.selection.createRange();
if (range.type.toLowerCase() == "text") {
    bookmark = range.getBookmark();
}

var newRange = document.body.createTextRange();
newRange.moveToBookmark(bookmark);//将光标移到原来的选中区域
newRange.collapse();
newRange.select();

 

Firefox(gecko)
问题:

  1. designMode下无法显示flash
  2. 某些情况下不会加载src指定的页面(解决办法下面再说)

解决方案:

  1. 无法解决
  2. 使用javascript重置iframe的src或者用javascript动态生成iframe并插入到相应节点

Opera(presto)
问题:

  1. designMode下无法显示flash

解决方案:

  1. 无法解决

唯一能正确处理iframe的是webkit,越来越喜欢它了,chrome快点出插件,Maxthon3快点完成开发吧。

待续。。。。