兼容主流浏览器的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的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
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
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
怎么清空javascript数组
2013/05/11 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
JAVA代码查错题
2014/10/10 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
社区矫正工作方案
2014/06/04 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
MySQL查询学习之基础查询操作
2021/05/08 MySQL