js 实现 复制 功能 (zeroclipboard)

#复制功能因访问权限和安全问题, 被浏览器禁了#

我要实现的功能:点击复制按钮,复制浏览器的当前页面地址,加上用户选择的参数(用户查找过滤),直接将该链接发给别人,点击打开就是对应的查找结果而不是默认结果。

1.需要两个文件ZeroClipboard .js 和.swf(https://github.com/zeroclipboard/zeroclipboard)。

2.页面复制按钮 html 标签(第二个input是我用来存储浏览器当前页面的地址+用户选择的过滤条件,即“http://”+location.host+location.pathname+location.search.例如:http://helloworld/console/Today?EndDate=2015-10-19&name=Tom)

3.页面中引入.js文件

4.初始化某个页面的时候,解析当前的页面url 参数

5.拼凑对应的用户选择的参数,赋值给那个input(#clipboard-text)

6.在需要的地方调用函数

注意:.js文件和.swf文件应在同一目录下;

创建对象时的参数就是 复制按钮对应的 button Id(本例 为 #copyUrlBtn),其余的参数都是默认值。

7.亲测Chrome , IE10+

另外一园友的方法 复制到剪切板 (http://www.cnblogs.com/yjzhu/archive/2012/11/05/2754818.html)

谢谢阅读!

时间: 2024-10-24 19:01:38

js 实现 复制 功能 (zeroclipboard)的相关文章

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

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

【转】js实现复制到剪贴板功能,兼容所有浏览器

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

跨浏览器复制神器 ZeroClipboard 2.x快速入门详解

有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中.但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用).只有IE浏览器可以通过如下方式来进行复制. window.clipboardData.setData("Text", "这里是需要复制的文本内容") 想要实现跨浏览器的复制功能,我们就可以使用 ZeroClipboard. ZeroClipboard 及其原理介绍 ZeroClipboa

JS对象复制

在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一个对象,如下代码: var i1 = 1; var i2 = i1; i2 = 2; alert("i1:"+i1+",i2:"+i2); 输出结果:i1:1 , i2:2 但可能没有发现,这种“复制”用在对象(object)类型是“错误”的,因为这只是把对象的地址复制

JS 单击复制,复制后变为已复制

这段代码是在新浪网站上找到的.先放出CSS代码: .focus a.arrow,.card_con4 li i,.cm1_menu_wrap a.cm1_menu_box,.cm1_img span,.cm1_item1 a{ background: url(http://www.sinaimg.cn/gm/xsk/gaiban/card_sprite.png) no-repeat;} .cm1_item_wrap{ padding-top: 9px; margin-top: 20px; pos

js实现照片墙功能

用javascript实现的照片墙功能:DEMO下载 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <title>photo

JS全选功能代码优化

最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能来做个简单的demo,使用目前现在的编码方式来重新编码,当然以后会一直用这种方式来编写自己的代码.下面是如下代码: JS所有代码: /** * JS全选 * @class Checkall * @param {Object} cfg * @param {Element|selector} [cfg.container] 限定全选的容器 * @par

js实现复制到粘贴板,兼容各浏览器

网上搜js实现复制粘贴的文章一大堆,但是没几个能用的.有的文章说Clipboard Copy解决,利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 听说的是兼容IE.Firefox.Opera.chrome. Safari,但是必须浏览器支持Flash,考虑到Flash支持不是100%,所以我摒弃了这个方案. 说说我的实现,灵感来自优酷分享的复制,在此之上加以修改的.经测试,支持IE.Firefox.Opera.chrome.搜狗浏览器.360等主流浏览器,Safari是本身不支持

不用js实现幻灯片功能

one two three four five six seven eight 不用js实现幻灯片功能,布布扣,bubuko.com