兼容主流浏览器的JS复制内容到剪贴板


Posted in Javascript onDecember 12, 2014

现在浏览器种类也越来越多,诸如 IE、Firefox、Chrome、Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。

在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案

这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板。

原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋值flash就会把复制的内容放到剪贴板。这个方法兼容IE、Firefox、Opera、chrome、 Safari,真可谓“万能”的解决方案。浏览器Flash的安装率非常高,这几乎是一个完美的解决方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Web开发者 - www.Admin10000.com </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript"> 

    var clipboardswfdata;

    var setcopy_gettext = function(){

        clipboardswfdata = document.getElementById('test_text').value;

        //alert(clipboardswfdata);

        window.document.clipboardswf.SetVariable('str', clipboardswfdata);

    }

    var floatwin = function(){

        alert('复制成功!');

        //document.getElementById('clipinner').style.display = 'none';

    }

</script>

</head>

<body>

<textarea id="test_text" rows="15" cols="100">文本?热?......</textarea>

<div id="clipboard_content"> 

  <div class="my_clip_button"><span class="clipinner" id="clipinner">复制代码到剪切板

    <embed name="clipboardswf" class="clipboardswf" id="clipboardswf" onmouseover="setcopy_gettext()" devicefont="false" src="./_clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash" height="20" width="100">

    </span>

  </div> 

</div>

</body>

</html>

clipboard.swf 的下载地址:http://www.jeffothy.com/weblog/uploads/clipboard.php

但是 Flash 10 时代,上面的方法已经不行了。

因为flash10中规定了只有在swf上进行了真实的操作(比如鼠标点击)才能访问剪切板,而上述方法只是使用了一个隐藏的swf文件,通过javascript操作flash的剪贴板,用户并没有对swf文件进行真实的操作,因此这个方法也就失效了。

那么如何解决这个“真实操作”的问题呢?可以使用一个JavaScript库:Zero Clipboard,利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash(对用户来说是不可见的)上覆盖一个dom元素比如button或div,当点击这个dom时,实际点击的是flash,从而访问flash的剪贴板。

 以下是调试好的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Zero Clipboard Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="ZeroClipboard.js"></script>

<script type="text/javaScript">

  var clip = null;  

  function $(id) { return document.getElementById(id); }  

  function init() {

    clip = new ZeroClipboard.Client();

    clip.setHandCursor(true);   

    clip.addEventListener('mouseOver', function (client) {

    // update the text on mouse over

    clip.setText( $('fe_text').value );

    });

     

    clip.addEventListener('complete', function (client, text) {

    //debugstr("Copied text to clipboard: " + text );

    alert("该地址已经复制,你可以使用Ctrl+V 粘贴。");

    });

 

    clip.glue('clip_button', 'clip_container' );

  }

</script>

</head>

<body onLoad="init()">

<input id="fe_text" cols="50" rows="5" value="复制内容文本">

<span id="clip_container"><span id="clip_button"><strong>复制</strong></span></span>

</body>

</html>

点击下载该类库: https://3water.com/jiaoben/24961.html

调试时请上传到网站,本地直接打开flash会出错的,没权限。zeroClipboard.js文件里moviePath属性是falsh的地址,就是目录下的那个ZeroClipboard.swf存放的地址位置。

这种js复制内容到剪贴板的方案可支持浏览器:Firefox / IE / opera / chorme / safari 所有浏览器!

Javascript 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Javascript模拟加速运动与减速运动代码分享
Dec 11 #Javascript
javascript中HTMLDOM操作详解
Dec 11 #Javascript
javascript实现修改微信分享的标题内容等
Dec 11 #Javascript
javascript表单验证和Window详解
Dec 11 #Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 #Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 #Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 #Javascript
You might like
PHP APC缓存配置、使用详解
2014/03/06 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python  Django 母版和继承解析
2019/08/09 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
pymysql模块的操作实例
2019/12/17 Python
python中的插入排序的简单用法
2021/01/19 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书