[转]BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异

作者:钱宝坤

标准参考

无。

问题描述

execCommand 方法通常用于控制可编辑的 IFRAME 内容,制作富文本编辑器。 但他现在为止还是非标准的,方法的首参数 Commmands 的可选值由各个浏览器厂商制定,支持程度并不统一。

造成的影响

使用仅有某个浏览器支持的 Commmands 参数会造成其他浏览器运行时脚本出错,从而影响其他浏览器内正常脚本继续执行。

受影响的浏览器

所有浏览器  

问题分析

document.execCommand 方法提供了对浏览器内置命令调用的接口,他暂时不属于任何现行规范定义范围,由浏览器各自实现。

在现有 HTML5 规范草案中,已经加入对 execCommand 方法的描述,他被安置在 HTMLDocument 接口定义中。该方法执行参数:document.execCommand(commandId [, showUI [, value ] ] )

通常 document.execCommand 方法可以使脚本程序执行在当前选择或在当前插入符位置进行一系列操作。一般来说,这些命令主要都是是用来实现富文本编辑器的核心功能。

execCommand 方法的参数 commandId 可选值以及作用,在 HTML5 规范草案中有部分描述,并定义了核心的可选参数列表,以及最后说明的自定义其他参数 vendorID-customCommandID 可由厂商自行扩展。详细内容可以参考 :7.11 Editing APIs

另外在各浏览器对应的开发者站点 msdn.microsoft.com (MSDN)、developer.mozilla.org (Mozilla Developer Network)、developer.apple.com (Apple Developer)、dev.opera.com (Opera Developer Community) 中,MSDN 与 Mozilla Developer Network 均有详细的 execCommand 方法的首参数可选值描述,Opera Developer Community 有简要说明, Apple Developer 无任何可查资料。

其中详细内容可参考开发者站点:

MSDN:execCommand MethodCommand Identifiers

MDC:Rich-Text Editing in Mozilla

dev.opera.com :Rich HTML editing in the browser: part 1Rich HTML editing in the browser: part 2

这里需要注意,由于 HTML5 规范草案与各浏览器具体开发文档中对,execCommand 方法的首形参数的形参名称规定不相同,为了避免混淆,本文以后均采用 sCommands 来表示。

MSDN MDC HTML5 草案中提出的全部 sCommands 参数,如下表:

MSDN MDC HTML5 草案 2
2D-Position    
AbsolutePosition    
BackColor backColor  
BlockDirLTR1    
BlockDirRTL1    
Bold bold bold
BrowseMode1    
ClearAuthenticationCache    
  contentReadOnly  
Copy copy  
CreateBookmark    
CreateLink createLink createLink
Cut cut  
  decreaseFontSize  
Delete delete delete
DirLTR1    
DirRTL1    
EditMode1    
FontName fontName  
FontSize fontSize  
ForeColor foreColor  
FormatBlock formatBlock formatBlock
  enableInlineTableEditing  
  enableObjectResizing  
    forwardDelete
  heading  
  hiliteColor  
  increaseFontSize  
Indent indent  
InlineDirLTR1    
InlineDirRTL1    
InsertButton    
InsertFieldset    
InsertIFrame    
InsertInputButton    
InsertInputCheckbox    
InsertInputFileUpload    
InsertInputHidden    
InsertInputImage    
InsertInputPassword    
InsertInputRadio    
InsertInputReset    
InsertInputSubmit    
InsertInputText    
InsertMarquee    
  insertBrOnReturn  
InsertHorizontalRule insertHorizontalRule  
InsertImage insertImage insertImage
  insertHTML insertHTML
    insertLineBreak
  insertOrderedList insertOrderedList
InsertUnorderedList insertUnorderedList insertUnorderedList
InsertParagraph insertParagraph insertParagraph
InsertSelectDropdown    
InsertSelectListbox    
InsertTextArea    
    insertText
Italic italic italic
JustifyCenter justifyCenter  
JustifyLeft justifyLeft  
JustifyRight justifyRight  
JustifyFull1    
JustifyNone1    
LiveResize    
MultipleSelection    
Open1    
OverWrite    
Outdent outdent  
Paste paste  
PlayImage1    
Print    
Redo1 redo redo
RemoveFormat removeFormat  
Refresh    
RemoveParaFormat1    
SelectAll selectAll selectAll
SaveAs    
SizeToControl1    
SizeToControlHeight1    
SizeToControlWidth1    
Stop1    
StopImage1    
StrikeThrough1 strikeThrough  
Subscript1 subscript subscript
Superscript1 superscript superscript
UnBookmark    
Underline underline  
Undo undo undo
Unlink unlink unlink
  useCSS  
Unselect   unselect
  styleWithCSS  

【注1】:MSDN 中标注为不支持的 sCommands 参数。

【注2】:仅为文章写作时期 HTML5 草案中存在的 sCommands 参数,不含说明中由厂商具体指定部分。

将所有 sCommands 参数汇集起来,构建测试用例,检查他们被支持程度。由于本例代码较多,故不在文中贴出,您可以直接观看下方的 测试页面

根据测试页,得出实际 sCommands 可选参数支持度对照表:

sCommands IE6 IE7 IE8 Firefox Chrome Safari Opera
2D-Position Y Y Y N N N N
absolutePosition Y Y Y N N N N
backColor Y Y Y Y Y Y Y
blockDirLTR Y Y Y N N N N
blockDirRTL Y Y Y N N N N
bold Y Y Y Y Y Y Y
browseMode Y Y Y N N N N
clearAuthenticationCache Y Y Y N N N N
contentReadOnly N N N Y N N Y
copy Y Y Y N N N N
createBookmark Y Y Y N N N N
createLink Y Y Y Y Y Y Y
cut Y Y Y N N N N
decreaseFontSize N N N Y N N Y
delete Y Y Y Y Y Y Y
dirLTR Y Y Y N N N N
dirRTL Y Y Y N N N N
editMode Y Y Y N N N N
fontName Y Y Y Y Y Y Y
fontSize Y Y Y Y Y Y Y
foreColor Y Y Y Y Y Y Y
formatBlock1 Y Y Y Y Y Y Y
enableInlineTableEditing N N N Y N N N
enableObjectResizing N N N Y N N N
forwardDelete N N N N Y Y N
heading N N N Y N N N
increaseFontSize N N N Y N N Y
indent Y Y Y Y Y Y Y
inlineDirLTR N N N N N N N
inlineDirRTL N N N N N N N
insertButton Y Y Y N N N N
insertFieldset Y Y Y N N N N
insertIFrame Y Y Y N N N N
insertInputButton Y Y Y N N N N
insertInputCheckbox Y Y Y N N N N
insertInputFileUpload Y Y Y N N N N
insertInputHidden Y Y Y N N N N
insertInputImage Y Y Y N N N N
insertInputPassword Y Y Y N N N N
insertInputRadio Y Y Y N N N N
insertInputReset Y Y Y N N N N
insertInputSubmit Y Y Y N N N N
insertInputText Y Y Y N N N N
insertMarquee Y Y Y N N N N
insertBrOnReturn N N N Y N N N
insertHorizontalRule Y Y Y Y Y Y Y
insertImage Y Y Y Y Y Y Y
insertHTML N N N Y Y Y Y
insertLineBreak N N N N Y Y N
insertOrderedList Y Y Y Y Y Y Y
insertUnorderedList Y Y Y Y Y Y Y
insertParagraph Y Y Y Y Y Y Y
insertSelectDropdown Y Y Y N N N N
insertSelectListbox Y Y Y N N N N
insertTextArea Y Y Y N N N N
insertText N N N N Y Y N
italic Y Y Y Y Y Y Y
justifyCenter Y Y Y Y Y Y Y
justifyLeft Y Y Y Y Y Y Y
justifyRight Y Y Y Y Y Y Y
justifyFull Y Y Y Y Y Y Y
justifyNone Y Y Y N Y Y N
liveResize Y Y Y N N N N
multipleSelection1 Y Y Y N N N N
open Y Y Y N N N N
overWrite Y Y Y N N N N
outdent Y Y Y Y Y Y Y
paste Y Y Y N N N N
playImage N N N N N N N
print Y Y Y N Y Y N
redo Y Y Y Y N N Y
removeFormat Y Y Y Y Y Y Y
refresh Y Y Y N N N N
removeParaFormat N N N N N N N
selectAll Y Y Y Y Y Y Y
saveAs Y Y Y N N N N
sizeToControl N N N N N N N
sizeToControlHeight N N N N N N N
sizeToControlWidth Y N Y N N N N
stop Y Y Y N N N N
stopImage N N N N N N N
strikeThrough Y Y Y Y Y Y Y
subscript Y Y Y Y Y Y Y
superscript Y Y Y Y Y Y Y
unBookmark Y Y Y N N N N
underline Y Y Y Y Y Y Y
undo Y Y Y Y N N Y
unlink Y Y Y Y Y Y Y
useCSS N N N Y N N Y
hiliteColor N N N Y Y Y Y
unselect Y Y Y N Y Y Y
styleWithCSS N N N Y N N Y

【注】:formatBlock 指令可接收的 vValue 值不同,IE 中需要 vValue 值为目标块标记名,而其他浏览器可以接收空字符串。
multipleSelection 指令在 Windows XP sp3 中可构建出多选列表,Windows 7 中指令只会返回 TRUE,对代码结构不会有任何改变。

解决方案

在调用 execCommand 方法时建议仅从 "backColor" "bold" "createLink" "delete" "fontSize" "foreColor" "formatBlock" "indent" "insertHorizontalRule" "insertImage" "insertOrderedList" "insertUnorderedList" "insertParagraph" "italic" "justifyCenter" "justifyLeft" "justifyRight" "justifyFull" "outdent" "removeFormat" "selectAll" "strikeThrough" "subscript" "superscript" "underline" "unlink" 参数中选择其一作为首参数传入,他们均被所有浏览器支持。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.10
Chrome 8.0.552.0 dev
Safari 5.0.2
Opera 10.63
测试页面: execCommand_sCommands_Parameters.html
本文更新时间: 2010-10-15

关键字

document execCommand Commands Identifiers HTML5 MSDN MDC

原文:

http://w3help.org/zh-cn/causes/BX9054  (需要FQ)

时间: 2024-11-05 15:57:59

[转]BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异的相关文章

Javascript中document.execCommand()的用法 ( 实现浏览器菜单的很多功能 )

document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令参数(如下例中的"2D-Position"),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的"false"即表示不显示对话框),动态参数一般为一可用值或属性值(如下例中的"true"). document.

document.execCommand()函数可用参数解析

隐藏在暗处的方法-execCommand() 关键字: javascript document document.execCommand()方法可用来执行很多我们无法实现的操作. execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令. document.execCommand()方法处理Html数据时常用语法格式如下: 复制内容到剪贴板 代码: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令参数(如下例中

Javascript中document.execCommand()的用法

document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令参数(如下例中的”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的”false”即表示不显示对话框),动态参数一般为一可用值或属性值(如下例中的”true”). document.execCommand(”2D-Position

【JavaScript】Javascript中document.execCommand()的用法

Javascript中document.execCommand()的用法 合并转载: 转载出处1 转载出处2 document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令参数(如下例中的"2D-Position"),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的"false"即表示不显

解决get方法传递URL参数中文乱码问题

如果是tomcat的话 server.xml文件里<Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/>IE11浏览器不行,谷歌火狐浏览器可以 解决get方法传递URL参数中文乱码问题

兼容ie5-ie11及其他主流浏览器的js document.getElementsByClassName 方法

var getElementsByClassName = function(searchClass,node,tag) { if(document.getElementsByClassName){ return document.getElementsByClassName(searchClass) }else{ node = node || document; tag = tag || '*'; var returnElements = [] var els = (tag === "*&quo

简易博客编辑器:玩转document.execCommand命令

xhEditor是基于jQuery开发的跨平台轻量可视化XHTML编辑器,基于LGPL开源协议发布.今天就把它山寨一下. 上几张图,看看效果: 先做出菜单部分:发现是一张背景图片,所以用图片映射的方法,可以实现: img src="xhImages/icon.png" usemap="#iconmap"> map id="iconmap" name="iconmap"> area shape="circl

document.getElementById方法在Firefox与IE中的区别。

如下,有一name="txtVersion"的text控件: <div> <input type="text" name="txtVersion" size="15" value="Version" maxlength="25"> </div> 根据上面信息,我们要用JS获得其控件中的值,我们这样写: var strVersion= document.

编写一个关于浏览器盒子模型的方法

<script type="text/javascript"> //win编写一个关于浏览器盒子模型的方法 //如果只传attr没有传value默认是获取: //如果两个都传了默认是设置 function win(attr,value) { if (value === "undefined"){ return document.documentElement[attr] || document.body[attr]; } document.documen