兼容主流浏览器的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 URL解析函数和分段URL解析方法
Apr 12 Javascript
手机号码,密码正则验证
Sep 04 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
JavaScript实现4位随机验证码的生成
Jan 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
js转html实体的方法
2016/09/27 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python操作json的方法实例分析
2018/12/06 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python实现打砖块游戏
2020/02/25 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
大数据分析用java还是Python
2020/07/06 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
管理提升方案
2014/06/04 职场文书
关于召开会议的通知
2015/04/15 职场文书
超市员工辞职信范文
2015/05/12 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Redis唯一ID生成器的实现
2022/07/07 Redis