`
xpenxpen
  • 浏览: 725410 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

跨浏览器的复制粘贴方案

阅读更多
代码和博客都是用了原作者的,具体请参见作者的原文:
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。
  • html.7z (3.3 KB)
  • 下载次数: 38
分享到:
评论

相关推荐

    ZeroClipboard解决跨浏览器复制到剪贴板的问题

    标题中的“ZeroClipboard解决跨浏览器复制到剪贴板的问题”是指在网页开发中,使用ZeroClipboard这个开源库来实现跨浏览器的文本复制功能。在Web应用程序中,由于浏览器的安全限制,JavaScript无法直接操作用户的...

    跨浏览器复制文本(clipboard和ZeroClipboard使用说明以及js文件)

    `ZeroClipboard`和`clipboard`分别代表了不同时期的跨浏览器复制文本的解决方案。对于新项目,推荐使用`clipboard`,因为它更轻量、更现代且不依赖Flash。但对于需要支持旧版浏览器的项目,`ZeroClipboard`仍是一个...

    跨浏览器 将文字复制到剪粘板

    在Web开发中,"跨浏览器将文字复制到剪粘板"是一个常见的需求,尤其是在交互性较强的应用中。这个功能使得用户能够方便地复制网页上的文本并粘贴到其他地方,如电子邮件、文档编辑器或者其他的Web应用。由于浏览器的...

    兼容各浏览器的复制内容到剪切板

    1. **跨浏览器兼容性**:在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)中,复制和粘贴功能的实现方式不尽相同。开发者需要处理这些差异,确保代码在所有主流浏览器上都能正常运行。 2. **JavaScript API*...

    jquery.zclip控件下载,js粘贴复制功能,Flash插件解决跨浏览器问题!

    1. **跨浏览器支持**:它能兼容大多数主流浏览器,如Chrome、Firefox、Safari、Opera以及Internet Explorer等。这是因为Flash在当时是大多数浏览器都支持的技术,可以作为JavaScript与剪贴板交互的桥梁。 2. **简单...

    jquery 复制 粘贴

    6. **跨浏览器兼容性**:不同的浏览器可能对某些API的支持程度不同,因此在实现复制粘贴功能时,需要考虑兼容性问题。例如,`document.execCommand()`在一些旧版本的浏览器中可能不支持,需要有备选方案。 7. **...

    浏览器复制剪切板flash

    浏览器复制剪切板Flash技术是Web开发中一种用于实现用户在网页中复制和粘贴内容的解决方案。在早期的Web应用中,由于HTML、CSS和JavaScript的限制,尤其是在跨浏览器兼容性和安全性的考虑下,直接操作剪贴板的功能并...

    js 复制粘贴功能

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,...通过理解JavaScript的基础特性、ZeroClipboard的工作原理以及跨浏览器兼容性,开发者可以有效地在各种环境中实现复制粘贴功能,提升用户交互体验。

    jQuery zclip插件实现跨浏览器复制功能

    - **跨浏览器复制功能**: 指的是在不同的浏览器环境中提供一致的功能,特别是复制粘贴的文本操作。 ### 描述知识点: - **兼容问题**: 在不同浏览器和浏览器版本之间实现复制功能时,可能需要处理的兼容性问题。 -...

    Unity InputField在webgl平台黏贴复制

    这通常是通过监听键盘事件,模拟浏览器原生的复制粘贴行为来实现的,确保在不损害WebGL兼容性的同时,提供与桌面平台相似的功能。 标签中的"unitywebgl"表明了这个问题与Unity在WebGL平台上的运行有关,"复制黏贴...

    手机移动端 js复制粘贴.zip

    2. **跨浏览器兼容性**: 一个重要的挑战是确保代码能在不同的移动浏览器上正常工作,比如Chrome、Safari、Firefox以及各种Android内置浏览器。压缩包中的“demo”可能是为了展示在各种环境下的兼容性测试结果。 3. ...

    js兼容chrome、firefox复制、粘贴

    在JavaScript编程中,实现跨浏览器的复制和粘贴功能是一个常见的需求,特别是在Web应用中提供类似桌面应用的用户体验时。本篇文章将详细讲解如何利用JavaScript兼容Chrome和Firefox这两种主流浏览器,实现复制和粘贴...

    ZeroClipboard 复制与粘贴

    ZeroClipboard 是一个JavaScript库,主要用于实现网页上的跨浏览器复制功能,尤其在处理用户希望复制文本到剪贴板的场景中非常实用。这个库巧妙地利用了Adobe Flash技术,因为Flash在浏览器中的广泛支持,可以绕过...

    html5-video:一个简单的复制和粘贴解决方案,用于跨浏览器安全的 HTML5 视频,带有 Flash 回退。 100% 免费和开源。 适用于所有浏览器。 全部

    html5-视频一个简单的复制和粘贴解决方案,用于跨浏览器安全的 HTML5 视频,带有 Flash 回退。 开源且 100% 免费用于私人和商业项目。 适用于所有浏览器(除非用户完全迟钝并且使用极其过时的浏览器进行冲浪并且没有...

    支持多浏览器(IE、Firefox、Opera)剪切板复制函数_脚本之家修正版

    综合上述,可以创建一个跨浏览器的剪切板复制函数,结合使用这些不同的方法: ```javascript function copyToClipboard(txt) { if (window.clipboardData) { copyToClipboardIE(txt); } else if (navigator....

    兼容各浏览器的复制到剪贴板功能

    在"ZeroClip"这个压缩包文件中,可能包含了一个名为ZeroClipboard的库,这是一个著名的JavaScript库,专门用于通过Flash实现跨浏览器的剪贴板复制。ZeroClipboard的工作原理是创建一个透明的Flash对象覆盖在需要复制...

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    它使用Flash作为跨浏览器的粘贴复制解决方案,因为Flash在那时拥有广泛的兼容性。当用户点击绑定有Zclip的按钮时,Zclip会创建一个透明的Flash对象覆盖在需要复制的文本上,然后模拟鼠标选择操作,从而实现文本的...

    jQuery实现复制到粘贴板功能

    jQuery实现复制到粘贴板的功能主要...总的来说,jQuery结合ZeroClipboard提供了一种简单的方式来实现跨浏览器的复制到剪贴板功能。然而,随着技术的发展,开发者可能需要关注更现代的解决方案以适应未来浏览器的变化。

Global site tag (gtag.js) - Google Analytics