document.execCommand()方法處理Html數據

document.execCommand()方法處理Html數據時經常使用語法格式以下:
document.execCommand(sCommand[,交互方式, 動態參數])

其中：sCommand爲指令參數（以下例中的」2D-Position」），交互方式參數若是是true的話將顯示對話框，若是爲false的話，則不顯示對話框（下例中的」false」即表示不顯示對話框），動態參數通常爲一可用值或屬性值（以下例中的」true」）。

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

調用execCommand()能夠實現瀏覽器菜單的不少功能. 如保存文件,打開新文件,撤消、重作操做…等等. 有了這個方法,就能夠很容易的實現網頁中的文本編輯器.

若是靈活運用,能夠很好的輔助咱們完成各類項目.

使用的例子以下:

一、〖全選〗命令的實現

[說明]將選種網頁中的所有內容！
[舉例]在之間加入：
全選

二、〖打開〗命令的實現

[說明]這跟VB等編程設計中的webbrowser控件中的命令有些類似，你們也可依此琢磨琢磨。
[舉例]在之間加入：
打開

三、〖另存爲〗命令的實現

[說明]將該網頁保存到本地盤的其它目錄！
[舉例]在之間加入：
另存爲

四、〖打印〗命令的實現

[說明]固然，你必須裝了打印機！
[舉例]在之間加入：
打印

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歷來不加分號的，之前是這樣，如今仍是這樣，這樣的話怎麼進行壓縮呀，汗～下面的代碼按照個人習慣都已加上分號，哪怕只有兩三句而已～)
程序代碼 程序代碼

windows.isIE=navigator.appName.indexOf("Microsoft")==0;if(isIE){document.documentElement.addBehavior("#default#userdata");document.execCommand("BackgroundImageCache",false,true);