JS execCommand方法

zhengnx發表於2015-05-13

document.execCommand()方法處理Html資料時常用語法格式如下:
document.execCommand(sCommand[,互動方式, 動態引數])

其中:sCommand為指令引數(如下例中的”2D-Position”),互動方式引數如果是true的話將顯示對話方塊,如果為false的話,則不顯示對話方塊(下例中的”false”即表示不顯示對話方塊),動態引數一般為一可用值或屬性值(如下例中的”true”)。

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

呼叫execCommand()可以實現瀏覽器選單的很多功能. 如儲存檔案,開啟新檔案,撤消、重做操作…等等. 有了這個方法,就可以很容易的實現網頁中的文字編輯器.

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

使用的例子如下(如需DEMO,請):

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,所以假如您沒有使用第三個引數(在這種情況下,還必須為第二個引數傳遞值),一般可以不管它。第三個引數也是可選的,在可應用的情況下,使用它來將任何所需引數傳遞給該命令。

PS:可惜各瀏覽器對execCommand的支援參差不齊。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/7868752/viewspace-1651895/,如需轉載,請註明出處,否則將追究法律責任。