跨浏览器的复制粘贴提案

跨浏览器的复制粘贴方案
代码和博客都是用了原作者的，具体请参见作者的原文：
http://www.rahulsingla.com/blog/2010/03/cross-browser-approach-to-copy-content-to-clipboard-with-javascript
http://www.rahulsingla.com/blog/2010/03/extjs-copy-gridpanel-content-to-clipboard
http://www.rahulsingla.com/blog/2010/10/extjs-copying-gridpanel-single-row-data-to-clipboard

方案就是IE下直接用javascript的window.clipboardData.setData
其他浏览器用flash+javascript实现

第1个例子：实现功能：复制文本框内的字符到剪切板
1clipboard.htm

嵌入一个flash，

<object id='clipboard' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='16' height='16' align='middle'>
	<param name='allowScriptAccess' value='always' />
	<param name='allowFullScreen' value='false' />
	<param name='movie' value='clipboard.swf' />
	<param name='quality' value='high' />
	<param name='bgcolor' value='#ffffff' />
	<param name='wmode' value='transparent' />
	<param name='flashvars' value='callback=f1' />
	<embed src='clipboard.swf' flashvars='callback=f1' quality='high' bgcolor='#ffffff' width='16' height='16' wmode='transparent' name='clipboard' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' />
</object>

关键是flashvars的回调函数callback=f1

function f1() {
	var s = document.getElementById('text1').value;
	
	if (window.clipboardData)
		window.clipboardData.setData('text', s);
	else
		return s;
}

第2个例子：实现功能：复制整个grid的数据（可以是json,csv，tsv）到剪切板
2grid-copy-clipboard.htm

bbar: {
	xtype: 'toolbar',
	items: [{
		xtype: 'label',
		html: 'Select a format from above, and click the Copy button on the right here&nbsp;&nbsp;'
	},
	{
	xtype: 'label',
	html: "<object id='clipboard' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='16' height='16' align='middle'><param name='allowScriptAccess' value='always' /><param name='allowFullScreen' value='false' /><param name='movie' value='clipboard.swf' /><param name='quality' value='high' /><param name='bgcolor' value='#ffffff' /><param name='wmode' value='transparent' /><param name='flashvars' value='callback=f1' /><embed src='clipboard.swf' flashvars='callback=f1' quality='high' swliveconnect='true' bgcolor='#ffffff' width='16' height='16' wmode='transparent' name='clipboard' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' /></object>"
	}
	]
}

关键是那个flash的xtype用的是label，然后以html的方式嵌入bbar
另外自己扩展了Ext.data.Store，增加了一个serializeData方法

第3个例子：实现功能：复制grid某一行的数据到剪切板
3grid-row-copy-clipboard.htm

关键是用了GridPanel的TemplateColumn来实现

{
	dataIndex: 'company',
	width: 30,
	xtype: "templatecolumn",
	tpl: new Ext.XTemplate(
				"<object id='clipboard{[this.getClipboardId(values)]}' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='16' height='16' align='middle'>",
				"<param name='allowScriptAccess' value='always' />",
				"<param name='allowFullScreen' value='false' />",
				"<param name='movie' value='clipboard.swf' />",
				"<param name='quality' value='high' />",
				"<param name='bgcolor' value='#ffffff' />",
				"<param name='flashvars' value='callback=f1&callbackArg={[this.getClipboardId(values)]}' />",
				"<embed src='clipboard.swf' flashvars='callback=f1&callbackArg={[this.getClipboardId(values)]}' quality='high' bgcolor='#ffffff' width='16' height='16' name='clipboard{[this.getClipboardId(values)]}' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' />",
				"</object>",
				{
					getClipboardId: getClipboardId
				})
}

经过测试，IE8,Firefox11,Chrome18均工作正常

发现ItEye的代码复制功能其实也是用的flash ：-）

代码大家需要的话自己去附件下载吧。swf是用到的flash，html.7z里面有提到的3个html。

跨浏览器的复制粘贴提案

相关推荐