快捷導(dǎo)航

GWT中復(fù)制到剪貼板 js+flash實(shí)現(xiàn)復(fù)制兼容性比較好

更新時(shí)間：2010年03月07日 12:34:56 作者：

今天看到有個(gè)Google Code的項(xiàng)目，叫ZeroClipboard，大意是使用flash作為媒介，將內(nèi)容復(fù)制到剪貼板。這比用純javascript好，因?yàn)椴煌瑸g覽器會(huì)出于安全的原因，有不同反應(yīng)，例如IE會(huì)給出提示，有的瀏覽器不支持復(fù)制到剪貼板。

但是用flash就可以復(fù)制。例子就是VeryCd，看“復(fù)制選中的連接”按鈕是一個(gè)flash?？磥?lái)flash的安全沙箱沒(méi)有限制將內(nèi)容復(fù)制到剪貼板

但是也是有限制的：

1 根據(jù)ZeroClipborad的人們說(shuō)，這些flash必須通過(guò)網(wǎng)絡(luò)加載。

Zero Clipboard Does Not Work From Local Disk

This is a security restriction by Adobe Flash Player. Unfortunately, since we are utilizing the JavaScript-to-Flash interface ("ExternalInterface") this only works while truly online (if the page URL starts with "http://" or "https://"). It won't work running from a local file on disk.

However, there is a way for you to edit your local Flash Player security settings and allow this. Go to this website:

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html

And add the path to your local "ZeroClipboard.swf" file to the trusted files list, or try the "allow all" option.

2 flash雖然提供復(fù)制功能，但是前提是要通過(guò)用戶的一次點(diǎn)擊。意思就是不能在javascript中通過(guò)函數(shù)的方式setText就復(fù)制到剪貼板，而是調(diào)用了這個(gè)setText函數(shù)后，用戶的鼠標(biāo)在flash上有了一次點(diǎn)擊，才可以。

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie.

這里和使用flash上傳文件的swfupload有同樣的問(wèn)題。

使用ZeroClipboard，可以將網(wǎng)頁(yè)內(nèi)容復(fù)制到剪貼板。但是ZeroClipboard沒(méi)有GWT封裝，我們項(xiàng)目是用GWT的，所以就學(xué)著swfupload的GWT封裝，把ZeroClipboard也封裝成GWT可以調(diào)用的形式。

1 先封裝了一個(gè)zeroclipboard.jar

2 項(xiàng)目中使用的是GXT控件庫(kù)，為了和控件緊密結(jié)合，寫(xiě)了一個(gè)ZClipboardBinder類(lèi)，將兩者結(jié)合起來(lái)

3 使用方法見(jiàn)下（Zeroclipboard_test.java）

復(fù)制代碼代碼如下:

package zero.clipboard.test.client; 
import java.util.Date; 
import zero.clipboard.test.client.ZClipboardBinder.ClipboardListener; 
import com.extjs.gxt.ui.client.widget.LayoutContainer; 
import com.extjs.gxt.ui.client.widget.button.Button; 
import com.google.gwt.core.client.EntryPoint; 
import com.google.gwt.user.client.ui.RootPanel; 
/** 
* Entry point classes define <code>onModuleLoad()</code>. 
*/ 
public class Zeroclipboard_test implements EntryPoint { 
public void onModuleLoad() { 
LayoutContainer c = new LayoutContainer(); 
c.setSize(400, 300); 
Button btn = new Button("Copy Hello World"); 
// 將控件和ZeroClipboard綁定 
// ZClipboardBinder.bind(btn, "Hello World"); 
ZClipboardBinder.bind(btn, new ClipboardListener() { 
@Override 
public String prepareCopy() { 
return (new Date()).toString(); 
} 
}); 
c.add(btn); 
RootPanel.get().add(c); 
} 
} 

相關(guān)下載都在附件中了。

attachment.zip

示意結(jié)果

點(diǎn)擊按鈕后——其實(shí)是點(diǎn)擊了上面的flash，使用ctrl+v，就能看到結(jié)果。

現(xiàn)在發(fā)現(xiàn)有很多有意義的功能都不能用javascript實(shí)現(xiàn)，例如多文件上傳和復(fù)制到剪貼板，都是通過(guò)flash做中介，“曲線”實(shí)現(xiàn)的，不知道最后HTML5有沒(méi)有解決這些問(wèn)題，不用我們兜兜轉(zhuǎn)轉(zhuǎn)。
Zero Clipboard 開(kāi)源的 JavaScript+flash 復(fù)制庫(kù)類(lèi)