• [转]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 参数,如下表:

    MSDNMDCHTML5 草案 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 可选参数支持度对照表:

    sCommandsIE6IE7IE8FirefoxChromeSafariOpera
    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  (需要翻墙)

  • 相关阅读:
    golang 反射和利用反射取结构体值
    golang 实现Lru
    跨域
    JS原型链
    cookie 、sessionStorage与localStorage的区别
    计算真实div盒子的宽度和高度
    div水平垂直居中
    清除浮动的几种方法
    JS中for循环和定时器的小问题
    转换字符串和转换数字类型
  • 原文地址:https://www.cnblogs.com/simonbaker/p/4569168.html
Copyright © 2020-2023  润新知