跨浏览器开发经验总结(四) 怎么写入剪贴板


Posted in Javascript onMay 13, 2010

IE、 Firefox可以支持JavaScript往剪贴板写入内容
IE可以很方便的支持剪贴板内容写入命令,可以使用execCommand(),也可以利用window.clipboardData。

使用execCommand,需要先从页面选中要复制到剪贴板的内容,如以下代码:

var doc = obj.createTextRange(); 
doc.select(); 
doc.execCommand('copy');

使用window.clipboardData的方法如下,代码中同时实现了Firefox下写入剪贴板的功能:
if(window.clipboardData) //IE 
{ 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text", txt); 
} 
else if (window.netscape) 
{ 
try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
} 
catch (e) 
{ 
alert("please visit 'about:config' and set signed.applets.codebase_principal_support as 'true'"); 
//提示用户开放浏览器的安全性设置 
} var clip = Components.classes["@mozilla.org/widget/clipboard;1"].createInstance(Components.interfaces.nsIClipboard); 
if (!clip) 
return; 
var trans = Components.classes["@mozilla.org/widget/transferable;1"].createInstance(Components.interfaces.nsITransferable); 
if (!trans) 
return; 
trans.addDataFlavor('text/unicode'); 
var str = new Object(); 
var len = new Object(); 
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); 
var copytext = txt; 
str.data = copytext; 



 trans.setTransferData("text/unicode",str,copytext.length*2); 
var clipid = Components.interfaces.nsIClipboard; 
if (!clip) 
return; 



 clip.setData(trans,null,clipid.kGlobalClipboard); 
}

以上代码可以实现在IE、Firefox中往剪贴版写入自定义内容,但是opera和webkit内核浏览器对安全性要求更高,不支持这种javascript直接操作剪贴板内容的方式,只能通过别的脚本语言“曲线救国”了。

Opera 、Safari、Chrome使用ActionScript往剪贴板写入内容

具体的实现可以将原本的动作按钮用flex或flash实现其外观,替换原来的图片或文字按钮,然后在点击该按钮时,执行以下ActionScript脚本:

//从浏览器环境中获得需要写入到剪贴板的内容

var s:String = String(ExternalInterface.call("getURL4Clipboard")); //getURL4Clipboard是页面上return剪贴板内容的javascript方法

//设置剪贴板内容

System.setClipboard(s);

//调用完成设置剪贴板内容后需要继续的JavaScript函数,比如提示用户信息等

ExternalInterface.call("copyURLCompleted"); //copyURLCompleted是页面上的javascript方法,继续执行复制后的工作

Javascript 相关文章推荐
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
js数组实现权重概率分配
Sep 12 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 #Javascript
JavaScript prototype属性使用说明
May 13 #Javascript
js 实现复制到粘贴板的功能代码
May 13 #Javascript
js href的用法
May 13 #Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 #Javascript
Js 随机数产生6位数字
May 13 #Javascript
js实现兼容IE6与IE7的DIV高度
May 13 #Javascript
You might like
用PHP读注册表
2006/10/09 PHP
php构造函数实例讲解
2013/11/13 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
javascript数组详解
2014/10/22 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Cpy和Python的效率对比
2015/03/20 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
先进集体获奖感言
2014/02/13 职场文书
运动会加油口号
2014/06/07 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
css3新特性的应用示例分析
2022/03/16 HTML / CSS
nginx容器方式反向代理实战
2022/04/18 Servers
nginx七层负载均衡配置详解
2022/07/15 Servers