代码和博客都是用了原作者的,具体请参见作者的原文:
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 '
},
{
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。
分享到:
相关推荐
标题中的“ZeroClipboard解决跨浏览器复制到剪贴板的问题”是指在网页开发中,使用ZeroClipboard这个开源库来实现跨浏览器的文本复制功能。在Web应用程序中,由于浏览器的安全限制,JavaScript无法直接操作用户的...
`ZeroClipboard`和`clipboard`分别代表了不同时期的跨浏览器复制文本的解决方案。对于新项目,推荐使用`clipboard`,因为它更轻量、更现代且不依赖Flash。但对于需要支持旧版浏览器的项目,`ZeroClipboard`仍是一个...
在Web开发中,"跨浏览器将文字复制到剪粘板"是一个常见的需求,尤其是在交互性较强的应用中。这个功能使得用户能够方便地复制网页上的文本并粘贴到其他地方,如电子邮件、文档编辑器或者其他的Web应用。由于浏览器的...
1. **跨浏览器兼容性**:在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)中,复制和粘贴功能的实现方式不尽相同。开发者需要处理这些差异,确保代码在所有主流浏览器上都能正常运行。 2. **JavaScript API*...
1. **跨浏览器支持**:它能兼容大多数主流浏览器,如Chrome、Firefox、Safari、Opera以及Internet Explorer等。这是因为Flash在当时是大多数浏览器都支持的技术,可以作为JavaScript与剪贴板交互的桥梁。 2. **简单...
6. **跨浏览器兼容性**:不同的浏览器可能对某些API的支持程度不同,因此在实现复制粘贴功能时,需要考虑兼容性问题。例如,`document.execCommand()`在一些旧版本的浏览器中可能不支持,需要有备选方案。 7. **...
浏览器复制剪切板Flash技术是Web开发中一种用于实现用户在网页中复制和粘贴内容的解决方案。在早期的Web应用中,由于HTML、CSS和JavaScript的限制,尤其是在跨浏览器兼容性和安全性的考虑下,直接操作剪贴板的功能并...
JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,...通过理解JavaScript的基础特性、ZeroClipboard的工作原理以及跨浏览器兼容性,开发者可以有效地在各种环境中实现复制粘贴功能,提升用户交互体验。
- **跨浏览器复制功能**: 指的是在不同的浏览器环境中提供一致的功能,特别是复制粘贴的文本操作。 ### 描述知识点: - **兼容问题**: 在不同浏览器和浏览器版本之间实现复制功能时,可能需要处理的兼容性问题。 -...
这通常是通过监听键盘事件,模拟浏览器原生的复制粘贴行为来实现的,确保在不损害WebGL兼容性的同时,提供与桌面平台相似的功能。 标签中的"unitywebgl"表明了这个问题与Unity在WebGL平台上的运行有关,"复制黏贴...
2. **跨浏览器兼容性**: 一个重要的挑战是确保代码能在不同的移动浏览器上正常工作,比如Chrome、Safari、Firefox以及各种Android内置浏览器。压缩包中的“demo”可能是为了展示在各种环境下的兼容性测试结果。 3. ...
在JavaScript编程中,实现跨浏览器的复制和粘贴功能是一个常见的需求,特别是在Web应用中提供类似桌面应用的用户体验时。本篇文章将详细讲解如何利用JavaScript兼容Chrome和Firefox这两种主流浏览器,实现复制和粘贴...
ZeroClipboard 是一个JavaScript库,主要用于实现网页上的跨浏览器复制功能,尤其在处理用户希望复制文本到剪贴板的场景中非常实用。这个库巧妙地利用了Adobe Flash技术,因为Flash在浏览器中的广泛支持,可以绕过...
html5-视频一个简单的复制和粘贴解决方案,用于跨浏览器安全的 HTML5 视频,带有 Flash 回退。 开源且 100% 免费用于私人和商业项目。 适用于所有浏览器(除非用户完全迟钝并且使用极其过时的浏览器进行冲浪并且没有...
综合上述,可以创建一个跨浏览器的剪切板复制函数,结合使用这些不同的方法: ```javascript function copyToClipboard(txt) { if (window.clipboardData) { copyToClipboardIE(txt); } else if (navigator....
在"ZeroClip"这个压缩包文件中,可能包含了一个名为ZeroClipboard的库,这是一个著名的JavaScript库,专门用于通过Flash实现跨浏览器的剪贴板复制。ZeroClipboard的工作原理是创建一个透明的Flash对象覆盖在需要复制...
它使用Flash作为跨浏览器的粘贴复制解决方案,因为Flash在那时拥有广泛的兼容性。当用户点击绑定有Zclip的按钮时,Zclip会创建一个透明的Flash对象覆盖在需要复制的文本上,然后模拟鼠标选择操作,从而实现文本的...
jQuery实现复制到粘贴板的功能主要...总的来说,jQuery结合ZeroClipboard提供了一种简单的方式来实现跨浏览器的复制到剪贴板功能。然而,随着技术的发展,开发者可能需要关注更现代的解决方案以适应未来浏览器的变化。