document對象execCommand的指令參數介紹

2009-01-12 14:18

document.execCommand()方法處理Html資料時常用文法格式如下:

複制内容到剪貼闆

代碼:

document.execCommand(sCommand[,互動方式, 動态參數])

其中：sCommand為指令參數（如下例中的"2D-Position"），互動方式參數如果是true的話将顯示對話框，如果為false的話，則不顯示對話框（下例中的"false"即表示不顯示對話框），動态參數一般為一可用值或屬性值（如下例中的"true"）。

document.execCommand("2D-Position","false","true");

調用execCommand()可以實作浏覽器菜單的很多功能. 如儲存檔案,打開新檔案,撤消、重做操作...等等. 有了這個方法,就可以很容易的實作網頁中的文本編輯器.

如果靈活運用,可以很好的輔助我們完成各種項目.

使用的例子如下:

1、〖全選〗指令的實作

[格式]:document.execCommand("selectAll")

[說明]将選種網頁中的全部内容！

[舉例]在 之間加入：

全選

2、〖打開〗指令的實作

[格式]:document.execCommand("open")

[說明]這跟VB等程式設計設計中的webbrowser控件中的指令有些相似，大家也可依此琢磨琢磨。

[舉例]在 之間加入：

打開

3、〖另存為〗指令的實作

[格式]:document.execCommand("saveAs")

[說明]将該網頁儲存到本地盤的其它目錄！

[舉例]在 之間加入：

另存為

4、〖列印〗指令的實作

[格式]:document.execCommand("print")

[說明]當然，你必須裝了列印機！

[舉例]在 之間加入：

列印

Js代碼 下面列出的是指令參數及意義

//相當于單擊檔案中的打開按鈕

document.execCommand("Open");

//将目前頁面另存為

document.execCommand("SaveAs");

//剪貼選中的文字到剪貼闆;

document.execCommand("Cut","false",null);

//删除選中的文字;

document.execCommand("Delete","false",null);

//改變選中區域的字型;

document.execCommand("FontName","false",sFontName);

//改變選中區域的字型大小;

document.execCommand("FontSize","false",sSize|iSize);

//設定前景顔色;

document.execCommand("ForeColor","false",sColor);

//使絕對定位的對象可直接拖動;

document.execCommand("2D-Position","false","true");

//使對象定位變成絕對定位;

document.execCommand("AbsolutePosition","false","true");

//設定背景顔色;

document.execCommand("BackColor","false",sColor);

//使選中區域的文字加粗;

document.execCommand("Bold","false",null);

//複制選中的文字到剪貼闆;

document.execCommand("Copy","false",null);

//設定指定錨點為書簽;

document.execCommand("CreateBookmark","false",sAnchorName);

//将選中文本變成超連接配接,若第二個參數為true,會出現參數設定對話框;

document.execCommand("CreateLink","false",sLinkURL);

//設定目前塊的标簽名;

document.execCommand("FormatBlock","false",sTagName);

//相當于單擊檔案中的打開按鈕

document.execCommand("Open");

//将目前頁面另存為

document.execCommand("SaveAs");

//剪貼選中的文字到剪貼闆;

document.execCommand("Cut","false",null);

//删除選中的文字;

document.execCommand("Delete","false",null);

//改變選中區域的字型;

document.execCommand("FontName","false",sFontName);

//改變選中區域的字型大小;

document.execCommand("FontSize","false",sSize|iSize);

//設定前景顔色;

document.execCommand("ForeColor","false",sColor);

//使絕對定位的對象可直接拖動;

document.execCommand("2D-Position","false","true");

//使對象定位變成絕對定位;

document.execCommand("AbsolutePosition","false","true");

//設定背景顔色;

document.execCommand("BackColor","false",sColor);

//使選中區域的文字加粗;

document.execCommand("Bold","false",null);

//複制選中的文字到剪貼闆;

document.execCommand("Copy","false",null);

//設定指定錨點為書簽;

document.execCommand("CreateBookmark","false",sAnchorName);

//将選中文本變成超連接配接,若第二個參數為true,會出現參數設定對話框;

document.execCommand("CreateLink","false",sLinkURL);

//設定目前塊的标簽名;

document.execCommand("FormatBlock","false",sTagName);

document對象execCommand通常在IE中線上處理Html資料時非常有用，它可以讓你輕而易舉實作文字的加粗、加顔色、加字型等一系列的指令。

D-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 清除目前選中區的選中狀态。

關于document.execCommand：

要執行編輯指令，可調用 document.execCommand，并傳遞對應于指令 ID 的字元串。另外還有可選的第二個參數，該參數指定如果可以應用的話是否顯示此指令的使用者界面。傳遞整數 1 将顯示使用者界面，整數 0 将跳過它。這個參數通常不用于編輯指令。因為預設值為 0，是以假如您沒有使用第三個參數（在這種情況下，還必須為第二個參數傳遞值），一般可以不管它。第三個參數也是可選的，在可應用的情況下，使用它來将任何所需參數傳遞給該指令。

Pixy方法受到IE的cache bug影響會閃爍。其實并沒有說清楚這個問題，但其實該bug是有條件的，即IE的cache設定為Every visit to the page，而不是預設的Automatically。基本上，隻有開發者才會把cache設定為每次通路檢查更新，是以這個bug其實不會影響真正的使用者 （根據在winxpsp2的ie6下測試，雖然可能仍然調用了一次網絡存取的api，但是并沒有發生實際的請求，症狀就是滑鼠有極短時間的抖動，但是圖像 不會閃爍）。此外有人發現了一個未公開的方法來讓IE對背景圖進行緩存：

document.execCommand("BackgroundImageCache",false,true)

用這種方法甚至避免了api調用，貌似是直接緩存在IE記憶體中。

IE6下設定背景圖檔是不會被真正cache住的，就算伺服器做了cache，如果想cache住隻能~~~

做過UI設計和開發的人一定知道，IE(不包括IE7)會經常從伺服器端重新載入背景圖檔，好端端的UI界面在IE(不包括IE7)中就這樣被折騰着......

Erik發現了一個簡單的解決辦法（針對IE7以下的IE有效，其實在IE7中已經修複了這個Bug）

程式代碼

document.execCommand("BackgroundImageCache", false, true);

今天閱讀Ext的源碼時發現Jack Slocum已經考慮到了這一點，在Ext.js中給出了他的實作，在其它Ajax架構中應該還沒有這種類似的代碼，從這一個細節上就能看出Ext的全面～

程式代碼

var isIE = ua.indexOf("msie") > -1, isIE7 = ua.indexOf("msie 7") > -1;

// remove css image flicker

if(isIE && !isIE7){

try{

document.execCommand("BackgroundImageCache", false, true);

}catch(e){}

}

今 天閱讀幻宇的dreamplayer播放器源碼時發現幻宇也針對IE的背景緩存進行了修複，隻是他并沒考慮到IE7中已經不存在這個現象了，這是 evml.js中的一段相關代碼～(順便嘀咕兩句：這家夥，寫JS從來不加分号的，以前是這樣，現在還是這樣，這樣的話怎麼進行壓縮呀，汗～下面的代碼按 照我的習慣都已加上分号，哪怕隻有兩三句而已～)

程式代碼

window.isIE=navigator.appName.indexOf("Microsoft")==0;

if(isIE){

document.documentElement.addBehavior("#default#userdata");

document.execCommand("BackgroundImageCache",false,true);