免 Flash 實作的 Web 剪貼簿

在 Mozilla 努力茁壯 Web 平台並使其能用於更多新款裝置的同時,也嘗試減少 Web 對 Flash 的依賴度。除了進行標準化之外,我們正發掘目前僅能搭配 Flash 的常用功能,期待提供更完整的 Web 平台。

現有許多網站仍使用 Flash 的原因之一,就是其複製與剪下功能的 clipboard API。Flash 提供的 API 即以簡單一個按鈕,就能透過編碼方式將文字複製到使用者的剪貼簿。此一方式已經實作出許多功能,如 GitHub 的「clone URL」按鈕。又如編輯器的使用者介面,也同樣是透過單一按鈕複製到剪貼簿,而不需使用者再另外按下鍵盤快捷鍵或滑鼠右鍵選單。

github-copy-250x70

可惜的是,Web API 尚未能透過 JavaScript 將文字複製到剪貼簿。就因為這樣,只要你停用 Flash 而上了 GitHub 網站,就會在原來放置按鈕的地方看到醜醜的灰色方塊。還好我們有解決方案,即由網頁編輯的 API 提供 document.execCommand 作為切入點來執行網頁編輯指令。雖然「copy」與「cut」指令已經針對網頁而停用,但即將於九月中釋出的 Firefox 41 (現為 Beta 測試版),即能透過使用者操作所產生的回呼來執行「copy」與「cut」指令。

使用 execCommand("cut"/"copy")

只有在使用者觸發的回呼期間 (如滑鼠點擊),才能使用 execCommand("cut"/"copy") API。如果你想在不同時間呼叫之,execCommand 就會回傳 false 代表執行指令失敗。執行 execCommand("cut") 就能將目前所選的部分複製到剪貼簿。所以先來試著實作基本的「複製到剪貼簿」按鈕。

在 Firefox 41 或更高版本中,此程式碼將根據按下按鈕的當下,將輸入欄位中的文字複製至剪貼簿。但你可能也想處理例外情形 (例如舊版 Firefox 或不支援此功能的瀏覽器),所以退而使用其他以 Flash 實作的方式 (如 ZeroClipboard),或可簡單告知目前所用的瀏覽器並不支援此功能。

一旦執行失敗 (例如在使用者觸發的回呼之外進行呼叫),execCommand 函式就會回傳 false。但在舊版 Firefox 中,只要你企圖使用「cut」或「copy」API,我們也會丟出安全性的例外。因此,若你要確實處理所有的失敗狀況,就要確實將呼叫指令的程式碼包覆於 Try-catch 區塊中,並將這些捕捉到的例外視為失敗情形來處理。

cut」API 也遵循相同機制放上網頁,你只需要 s/copy/cut/ 就可以使用了!

功能測試

編輯器 API 具備 document.queryCommandSupported("copy") 函式,可讓 API 使用者辨識所屬瀏覽器是否支援任一指令。可惜的是,在 Firefox 41 之前的版本中,即使網頁無法真正執行複製作業,仍會從 document.queryCommandSupported("copy") 回傳 true。但是只要嘗試執行 document.execCommand("copy") 就會回傳 SecurityException。所以要在 Firefox 上偵測 API 支援度最簡單的方式,就是在網頁載入時執行 document.execCommand("copy") 指令,並檢查是否發生例外。

其他瀏覽器的支援程度

Google Chrome 與 Internet Explorer (IE) 均已支援此 API。Chrome 使用與 Firefox 相同的限制 (必須於使用者觸發的回呼之中執行)。IE 則是會在第一次透過對話框向使用者要求剪貼簿的存取授權,之後即可隨時呼叫此 API。

若要進一步了解 API 與瀏覽器的支援情形,可參閱 MDN 上的 document.execCommand() 說明文件

 

 

原文連結:Flash-Free Clipboard for the Web

 

 

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

  1. 參照: Firefox 的 NPAPI 外掛程式策略 | 部落格 | Mozilla Taiwan

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *