兼容主流浏览器的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 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JS字符串截取函数实例
Dec 27 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 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
PHP 日常开发小技巧
2009/09/23 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP实现简易图形计算器
2020/08/28 PHP
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python面向对象法实现图书管理系统
2019/04/19 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
django框架forms组件用法实例详解
2019/12/10 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
大学生见习报告总结
2014/11/04 职场文书
2014年外联部工作总结
2014/11/17 职场文书
颐和园英文导游词
2015/01/30 职场文书
退休欢送会致辞
2015/07/31 职场文书
歌咏比赛口号大全
2015/12/25 职场文书