js实现IE跨浏览器复制内容到剪贴板

Zero Clipboard的实现原理
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。

Zero Clipboard的安装方法
其实也不算安装啦，就是使用前的准备工作。
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和ZeroClipboard.swf 放入到你的项目中 下载地址:http://file.111cn.net/download/2013/06/03/zeroclipboard-1.0.7.tar.gz

 代码如下 复制代码

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

注意：以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径，可使用ZeroClipboard.setMoviePath( “Flash路径” );

来设置ZeroClipboard.swf 地址

 代码如下 复制代码

Zero Clipboard实现简单跨浏览器复制
var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); // 设置鼠标为手型
clip.setText("哈哈"); // 设置要复制的文本。
// 注册一个 button，参数为 id。点击这个 button 就会复制。
//这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。
clip.glue("copy-botton"); //

和上一句位置不可调换这样，这样基本功能实现了，点击按钮就可以复制设置好的文本了。你可能注意到了，待复制的文本是固定的，如果想要动态改变的怎么办，比如复制一个输入框中的内容

时间： 2024-03-05 07:52:52

js实现IE跨浏览器复制内容到剪贴板的相关文章

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

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值"clipboard=..",

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)_jquery

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题_网页编辑器

Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero Cl

jQuery插件：跨浏览器复制jQuery-zclip

一.jQuery-zclip jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题. jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player. 1.jQuery-zclip插件官网ZeroClipboard.swf下载地址 开源地址:https://github.com/patricklodder/jquery-zclip 2.jQuery-zclip用法 //引入jQuery-zc

jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

本文将结合实例讲解如何使用一款基于jQuery的插件--Zclip来实现复制内容到剪贴板的功能.其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡.而Zclip是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器. WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HT

JS实现的跨浏览器解析XML文件实例_javascript技巧

本文实例讲述了JS实现的跨浏览器解析XML文件的方法.分享给大家供大家参考,具体如下: 下列代码把一个 XML 文档 ("note.xml") 载入 XML 解析器中: <script type="text/javascript"> function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(

js复制内容到剪贴板代码,js复制代码的简单实例_javascript技巧

如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte

js 实现一些跨浏览器的事件方法详解及实例_jquery

js实现一些跨浏览器的事件方法 用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (ele

表单提交时自动复制内容到剪贴板的js代码_javascript技巧

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe