1. 程式人生 > >BX9054: 各瀏覽器對 document.execCommand 方法的首引數可選值範圍存在差異

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