标准参考

无。

问题描述

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 Method、Command Identifiers。

MDC:Rich-Text Editing in Mozilla。

dev.opera.com :Rich HTML editing in the browser: part 1、Rich 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 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的URL。
delete 删除当前选中区。
fontSize 设置或获取当前选中区的字体大小。
foreColor 设置或获取当前选中区的前景(文本)颜色。
formatBlock 设置当前块格式化标签。
indent 增加选中文本的缩进。
insertHorizontalRule 用水平线覆盖当前选中区。
insertImage 用图像覆盖当前选中区。
insertOrderedList 切换当前选中区是编号列表还是常规格式化块。
insertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
insertParagraph 用换行覆盖当前选中区。
italic 切换当前选中区斜体显示与否。
justifyCenter 将当前选中区在所在格式化块置中。
justifyLeft 将当前选中区所在格式化块左对齐。
justifyRight 将当前选中区所在格式化块右对齐。
justifyFull 目前尚未支持。
outdent 减少选中区所在格式化块的缩进。
removeFormat 从当前选中区中删除格式化标签。
selectAll 选中整个文档。
strikeThrough 目前尚未支持。
subscript 目前尚未支持。
superscript 目前尚未支持。
underline 切换当前选中区的下划线显示与否。
unlink 从当前选中区中删除全部超级链接。

附1:

execCommand() 参数描述

command desc
2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的position属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使MSHTML编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住Shift或Ctrl键时一次选中多于一个站点可选元素。
Open 目前尚未支持。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 目前尚未支持。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前Web页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 目前尚未支持。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 目前尚未支持。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。

附2:

键值对应表

键盘名称 键值(keycode)   键盘名称 键值(keycode)
BackSpace 8   Tab 9
Clear 12   Enter 13
Shift_L 16   Control_L 17
Alt_L 18   Pause 19
Caps_Lock 20   Escape 27
Space 32   Prior 33
Next 34   End 35
Home 36   Left 37
Up 38   Right 39
Down 40   Select 41
Print 42   Execute 43
Insert 45   Delete 46
Help 47   0 equal braceright 48
1 exclam onesuperior 49   2 quotedbl twosuperior 50
3 section threesuperior 51   4 dollar 52
5 percent 53   6 ampersand 54
7 slash braceleft 55   8 parenleft bracketleft 56
9 parenright bracketright 57   a A 65
b B 66   c C 67
d D 68   e E EuroSign 69
f F 70   g G 71
h H 72   i I 73
j J 74   k K 75
l L 76   m M mu 77
n N 78   o O 79
p P 80   q Q at 81
r R 82   s S 83
t T 84   u U 85
v V 86   w W 87
x X 88   y Y 89
z Z 90   KP_0 96
KP_1 97   KP_2 98
KP_3 99   KP_4 100
KP_5 101   KP_6 102
KP_7 103   KP_8 104
KP_9 105   KP_Multiply 106
KP_Add 107   KP_Separator 108
KP_Subtract 109   KP_Decimal 110
KP_Divide 111   F1 112
F2 113   F3 114
F4 115   F5 116
F6 117   F8 119
F9 120   F10 121
F11 122   F12 123
F13 124   F14 125
F15 126   F16 127
F17 128   F18 129
F19 130   F20 131
F21 132   F22 133
F23 134   F24 135
Num_Lock 136   Scroll_Lock 137
Acute grave 187   Comma semicolon 188
Minus underscore 189   Period colon 190
Numbersign apostrophe 192   Plusminus hyphen macron 210
Copyright registered 212   Guillemotleft guillemotright 213
Masculine ordfeminine 214   ae AE 215
Cent yen 216   Questiondown exclamdown 217
Onequarter onehalf threequarters 218   Less greater bar 219
Plus asterisk asciitilde 221   Multiply division 227
acircumflex Acircumflex 228   ecircumflex Ecircumflex 229
icircumflex Icircumflex 230   ocircumflex Ocircumflex 231
ucircumflex Ucircumflex 232   ntilde Ntilde 233
yacute Yacute 234   oslash Ooblique 235
aring Aring 236   ccedilla Ccedilla 237
thorn THORN 238   eth ETH 239
diaeresis cedilla currency 240   agrave Agrave atilde Atilde 241
egrave Egrave 242   igrave Igrave 243
ograve Ograve otilde Otilde 244   ugrave Ugrave 245
adiaeresis Adiaeresis 246   ediaeresis Ediaeresis 247
idiaeresis Idiaeresis 248   odiaeresis Odiaeresis 249
udiaeresis Udiaeresis 250   ssharp question backslash 251
asciicircum degree 252   3 sterling 253
Mode_switch 254      
A 0X65   B 0X66
C 0X67   D 0X68
E 0X69   F 0X70
J 0X71   H 0X72
I 0X73   J 0X74
K 0X75   L 0X76
M 0X77   N 0X78
O 0X79   P 0X80
Q 0X81   R 0X82
S 0X83   T 0X84
U 0X85   V 0X86
W 0X87   X 0X88
Y 0X89   Z 0X90
0 0X48   1 0X49
2 0X50   3 0X51
4 0X52   5 0X53
6 0X54   7 0X55
8 0X56   9 0X57
ESC 0X1B   CTRL 0X11
SHIFT 0X10   ENTER 0XD

---------------------------------------------

参考文献

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

2. 当前浏览器针对execCommand方法参数的兼容性测试

BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异相关推荐

  1. document.execCommand()方法处理Html数据

    document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...

  2. Laravel查询构造器的pluck方法第一个参数可选类型array的问题

    laravel API 文档对pluck方法的解释: Collection pluck(string|array $value, string|null $key = null) 第一个参数可选的,s ...

  3. python方法测试怀孕,Python unittest模拟:是否可以在测试时模拟方法的默认参数的值?...

    我有一个接受默认参数的方法: def build_url(endpoint, host=settings.DEFAULT_HOST): return '{}{}'.format(host, endpo ...

  4. Javascript中document.execCommand()的用法

    document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...

  5. JavaScript:document.execCommand()的用法

    document.execCommand()的用法小记 一.语法 execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用. 如下格式:document.ex ...

  6. 记:返回方法参数的值(或多个值),

    直接贴示例代码: static void Main(string[] args) {int cs;int s= outfanhui(90, out cs); Console.WriteLine(&qu ...

  7. JavaScript 技术篇-chrome浏览器读取剪切板命令document.execCommand(‘paste‘)返回false原因及解决方法

    新版本 chrome 执行 document.execCommand('paste') 返回 false 因为读取剪切板涉及用户隐私安全,必须的用户允许的情况下可以进行访问,但是复制和剪切功能可以使用 ...

  8. 一个利用浏览器原生execCommand()方法实现的富文本编辑器

    这是一个利用浏览器原生execCommand()方法实现的富文本编辑器,同时具有本地存储.定时保存.纯文本编辑器的功能,仅用于学习参考,其实并没有什么卵用. 新手上路,Bug太多,功能不完善,代码.变 ...

  9. 在 JavaScript 中,可以使用 document.execCommand(‘copy‘) 方法来复制文本到剪贴板

    下面是一个简单的示例 <button οnclick="copyToClipboard()">复制</button> <script> func ...

最新文章

  1. SVG 基本知识:SVG 放大缩小之 viewbox 初探 (1)
  2. 论“性能需求分析”系列专题(一)之 性能需求剖析
  3. ABAP WebService SRT框架的初始值处理
  4. Object 及toString() 方法的重写
  5. dwr 写的小程序,配置
  6. Fedora 10初体验
  7. [收藏]ASP数据库操作类(上)
  8. 联想电脑的计算机,联想笔记本系统按F几下|联想计算机的系统按钮是什么?
  9. cad插件_CAD插件迷你建筑工具箱安装教程
  10. Android Design与Holo Theme详解
  11. Linux操作系统安全防护指导手册(详细截图)
  12. Oracle修改SEQUENCE起始值
  13. leetcode 5473. 灯泡开关 IV(C++)
  14. 参加第一届MSRA博士生论坛的经历
  15. kubeadm方式搭建k8s集群
  16. 互联网晚报 | 1/12 星期四 | 微信回应切断抖音外链;爱奇艺App限制投屏;iPhone 16 Pro或取消灵动岛摄像头...
  17. Linux中连接mysql执行sql文件
  18. axure8.0发布html,Axure RP 8 Release History
  19. 360 有没有 linux版本,360 安全卫士for Linux 发布新版本
  20. excel使用教程_改变Excel图表展现形态的8种不同坐标轴设置方法

热门文章

  1. 个人申请企业邮箱还是163个人邮箱?个人邮箱怎么申请登录呢?
  2. mysql is running but_MySQL: mysql is not running but lock exists 的解决方法
  3. NPDP产品经理认证:产品开发项目的风险评估
  4. nginx代理内网1521,3306数据库端口
  5. 非平稳信号的频谱分析方法---(短时傅立叶变换)
  6. UE4 统计数据命令描述
  7. 如何从窗口句柄得到窗口的指针
  8. multisim怎么设置晶体管rbe_multisim中添加大功率三极管的办法 multisim 三极管设置方法...
  9. 交叉测试、探索性测试的概念、价值、实践
  10. iOS 监听耳机状态