代码和博客都是用了原作者的,具体请参见作者的原文:
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。
分享到:
相关推荐
html5-视频一个简单的复制和粘贴解决方案,用于跨浏览器安全的 HTML5 视频,带有 Flash 回退。 开源且 100% 免费用于私人和商业项目。 适用于所有浏览器(除非用户完全迟钝并且使用极其过时的浏览器进行冲浪并且没有...
leetcode ...将其转换为跨浏览器扩展(以上两个的解决方案) 用法 转到页面。 按照那里的说明进行操作。 技术细节 ReactJS 材质界面 重新图表 本地开发 运行以下命令来设置环境并安装依赖项。 git clone ...
(全部撤销/重做、放大/缩小、迷你地图、多选、复制、复制/粘贴、JSON 导入/导出、群组、注释等) 图形、GameObject 和全局黑板变量,以创建可重复使用和以智能体为中心的参数行为。 具有实例或静态属性和字段的...
4、编写跨浏览器兼容性的JS代码时,常用到的判断代码 237 5、JS 计算网页内容的宽与高 (浏览器的标准模式与怪异模式) 237 6、JS设置与查看网页的解析模式(值) 249 7、JS判断对象是否已经存在 249 8、CSS设置网页在...
(全部撤销/重做、放大/缩小、迷你地图、多选、复制、复制/粘贴、JSON 导入/导出、群组、注释等) ● 图形、GameObject 和全局黑板变量,以创建可重复使用和以智能体为中心的参数行为。 ● 具有实例或静态属性和字段...
如果您打开刮板,它会开始刮取井号标签,您可以复制并粘贴它们或保存到文件。想象一下,你想收集其他利基市场营销人员使用的所有主题标签...只需浏览他们的社交媒体页面,TagPredict将刮掉他们使用的主题标签。 无论...
1、文件及目录操作:前台用户登录后可实现类似WIN资源管理器的目录创建、删除和移动,文件上传、下载及文件列表查看,图片预览及多媒体文件在线播放(需安装多媒体播放器),文件剪切、复制、粘贴、改名、删除、注释...
+复制/粘贴文本段落,撤消/重做您的操作 +创建新文档或打开现有文档 - 页面格式化 +设置页面参数 +显示/隐藏非打印字符 +插入分节符 +插入页眉和页脚 +插入页码 +插入脚注 - 段落格式 +将段落中的文本对齐 ...
附加功能:-直接从浏览器中搜索,添加或编辑信息-只需单击几下即可创建新密码和信息并与他人共享-快速复制和粘贴始终为最新的信息,包括他人与您共享的信息-邀请新朋友从扩展中直接查看和协作-个人用户和小型团队...
剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释。 为每个设计添加说明。 选择色彩主题以避免实际功能窗口的混淆。 图标 为图标面板提供快速的访问方式。 ...
打开浏览器,输入路由器起始页面地址: b. 如果路由器配置页面需要密码进入请输入用户名密码(本 例中的路由器出厂默认用户名和密码为admin、admin。 c. 进入路由器配置页面后选择相应选项,找到虚拟服务器 (Virtual...