- 浏览: 16354 次
最新评论
contentEditable和document.designMode的区别
- 博客分类:
- 技术杂绘
contentEditable和document.designMode的区别
2011年08月24日
contentEditable和document.designMode的区别http://www.xiahaixia.com/2011/03/15/contenteditable%E5%92%8Cdocument-designmode%E7%9A%84%E5%8C%BA%E5%88%AB/
本来没打算写这篇的,但是每次被别人莫名的错误说是因为我们项目导致的,就会莫名的恼火。这年头推卸责任的人可真多,不追究根源的也不少。
因为document.domain的原因引起编辑器错误的产生,我脑中第一个就想到了document.designMode,于是好好整理了一下。
实现可视化编辑,可以使用contentEditable和designMode两种方法。contentEditable刚开始在IE上实现,后来各大 浏览器陆续支持contentEditable,HTML5标准也包含contentEditable。designMode只能把document整体 改成可编辑状态,但contentEditable可以把任何HTML元素改成可编辑状态,应用范围比designMode广,用 contentEditable是将来的趋势。
但在IE上designMode和contentEditable不完全一样,有不少细微的差距,我们开发可视化编辑器时需要格外注意。
1. 在IE上使用designMode,调用document.domain将报没有权限的错误,用contentEditable没有此问题。
2. 在IE上使用designMode,右键菜单没有复制、粘贴功能,出来的是普通网页的右键菜单。
3. 在IE6和IE7上使用contentEditable,在某些情况下焦点自动移动到编辑区域,类似focus()的效果。这个问题非常要命,因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。
所以针对以上原因建议是IE下将页面设置成可编辑状态是document.body.contentEditable = true;非IE的浏览器是document.designMode="on";
参考链接:http://luolonghao.javaeye.com/blog/693814
http://ued.alipay.com/wd/2008/11/08/js%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%E6%93%8D%E4%BD%9Ciframe%E9%87%8C%E7%9A%84dom/
发表评论
-
评论 (
2012-01-20 11:16 586评论 ( 2011年12月01日 滑雪 ... -
2012届高考英语语法专题复习单项选择详解试题
2012-01-20 11:15 6952012届高考英语语法专题 ... -
2012年管理咨询师考试实务模拟试题2
2012-01-20 11:15 7202012年管理咨询师考试实务模拟试题2 17小时前 管理 ... -
部分经济学术语英文简写
2012-01-20 11:15 1588部分经济学术语英文简写 21小时前 a/c, A/C a ... -
高二地理月测试卷
2012-01-20 11:14 616高二地理月测试卷 20小时前 出题人: 班级 ... -
Linux设备模型---总线、设备、驱动、设备类的相关操作
2012-01-19 16:04 845Linux设备模型---总线、设备、驱动、设备类的相关操作 ... -
Actionscript3 文件上传组件制作
2012-01-19 16:04 953Actionscript3 文件上传组件制作 31分钟前 ... -
常见汇编编译错误中英文对照
2012-01-19 16:04 2077常见汇编编译错误中英文对照 1小时前 FATAL 严重 ... -
Linux input子系统分析【转】
2012-01-19 16:04 956Linux input子系统分析【 ... -
Intel8042芯片驱动分析
2012-01-19 16:04 1091Intel8042芯片驱动分析 20 ... -
31种方法让你变聪明
2012-01-17 05:56 44531种方法让你变聪明 201 ... -
什么啊.0.000
2012-01-17 05:56 598什么啊.0.000 2011年03月20日 ... -
无法使用千千静听的日子,太不爽了……哪个TMD的在千千网页里放了木马
2012-01-17 05:56 719无法使用千千静听的日子,太不爽了……哪个TMD的在千千网页里放 ... -
TWWWSCAN漏洞扫描器CGI漏洞攻击手册
2012-01-17 05:56 1005TWWWSCAN漏洞扫描器CGI漏洞攻击手册 2011年07 ... -
夏商与西周》第四十二章之昭王伐楚(二)
2012-01-16 04:42 529夏商与西周》第四十二章之昭王伐楚(二) 2012年01月08 ... -
稼领日志贫巳邢蔗
2012-01-16 04:42 608稼领日志贫巳邢蔗 2012 ... -
龄欣哔日志蹈诒刺陕疥赤
2012-01-16 04:42 540龄欣哔日志蹈诒刺陕疥赤 2012年01月09日 ... -
古玩辨伪之青铜器
2012-01-16 04:42 548古玩辨伪之青铜器 2012年01月09日 ... -
日本法定假日简介
2012-01-16 04:42 392日本法定假日简介 2012 ...
相关推荐
document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由修改了!! 四、按照你自己的意图修改好后,在地址栏中输入: 代码如下: [removed]document.body.contentEditable=’false’; void...
/** * @author tin... eWebEditor.document.designMode=”On”; eWebEditor.document.open(); eWebEditor.[removed](html); eWebEditor.document.body.contentEditable=”true”; eWebEditor.document.execCommand
使任何网页可编辑 如果将此代码复制并粘贴到浏览器的地址栏中,则可以使任何网页都可编辑。... contentEditable === 'false' || document . body . contentEditable === 'inherit' ) { document . body . c
1. 直接在浏览器中编辑网页内容 代码如下:[removed]document.body.contentEditable=’true’;document.designMode=’on’; void(0); 访问任意网站,在地址栏输入以上代码,会发生当前网页已经变成编辑模式了。2. ...
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 然后回车,你就可以随心所欲的修改这个网站啦! 通过这段代码你可以对一些禁止复制内容的网页进行复制了。
sein 在偶然得知了一个 javascript 秘籍后的兴奋癫狂状(下面的留言更值得一看),现在有人挖掘出了一个蛮酷的技巧,只要打开一个网站,然后在地址栏内打入: 代码如下:[removed]document.body.contentEditable=...
今天忽然想着复习一下富文本编辑器的制作原理。于是二话不说将手把手地做了起来。因为一年前写过一个简单的富文本编辑器,所以大概还是有点印象。... idoc.designMode = ‘on’; idoc.contentEditable = true; id
先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持.因为IE5.0以上版本有一个编辑状态,designMode是document的属性,意思是设置或获取表明文档是否可被编辑的值,默认值为off或Inherit
页面上的所有内容都可以修改了,就像在word中编辑一样。那些不让拷贝的网站可以被这招通杀了。以后谁还会傻乎乎地分析... 代码内容: [removed]document.body.contentEditable=’true’; document.designMode=’on’;
只要将下面的代码,在当前打开的页面的IE地址栏中,输入下面的js,即可以随意修改当前网页的内容了 代码如下:[removed]document.body.contentEditable=’true’; document.designMode=’on’;遇到不允许复制内容网页...
opening您可以通过打开开发控制台(F12)并键入以下内容来手动激活设计模式:document.designMode ='on'; 当然,这需要更多的工作,并且您不会看到漂亮的图标告诉您哪些选项卡处于设计模式。 您需要一个很酷的扩展...