BX9054: 各瀏覽器對 document.execCommand 方法的首引數可選值範圍存在差異
標準參考
無。
問題描述
execCommand 方法通常用於控制可編輯的 IFRAME 內容,製作富文字編輯器。 但他現在為止還是非標準的,方法的首引數 Commmands 的可選值由各個瀏覽器廠商制定,支援程度並不統一。
造成的影響
使用僅有某個瀏覽器支援的 Commmands 引數會造成其他瀏覽器執行時指令碼出錯,從而影響其他瀏覽器內正常指令碼繼續執行。
受影響的瀏覽器
所有瀏覽器 |
---|
問題分析
document.execCommand 方法提供了對瀏覽器內建命令呼叫的介面,他暫時不屬於任何現行規範定義範圍,由瀏覽器各自實現。
在現有 HTML5 規範草案中,已經加入對 execCommand 方法的描述,他被安置在 HTMLDocument 介面定義中。該方法執行引數:document.execCommand(commandId [, showUI [, value ] ] )
通常 document.execCommand 方法可以使指令碼程式執行在當前選擇或在當前插入符位置進行一系列操作。一般來說,這些命令主要都是是用來實現富文字編輯器的核心功能。
execCommand 方法的引數 commandId 可選值以及作用,在 HTML5 規範草案中有部分描述,並定義了核心的可選引數列表,以及最後說明的自定義其他引數 vendorID-customCommandID 可由廠商自行擴充套件。詳細內容可以參考 :
另外在各瀏覽器對應的開發者站點 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 | ||
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 |