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

现在浏览器种类也越来越多,诸如 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>

点击下载该类库: http://www.jb51.net/jiaoben/24961.html

调试时请上传到网站,本地直接打开flash会出错的,没权限。zeroClipboard.js文件里moviePath属性是falsh的地址,就是目录下的那个ZeroClipboard.swf存放的地址位置。

这种js复制内容到剪贴板的方案可支持浏览器:Firefox / IE / opera / chorme / safari 所有浏览器!

时间: 2024-12-29 20:44:12

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

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

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

Bootstrap编写一个兼容主流浏览器的受众门户式风格页面_javascript技巧

上一次写的<Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面>(点击打开链接)部分老一辈的需求可能对这种后现代的风格并不满意,没关系,我们完全可以改变布局拉成门户式的风格,他们马上就接受了:  首先,门户式的布局的大概你要清楚,这一才利于我们快速布局开头是一个较小的巨幕,后是一个导航栏,这里还是用到了按钮组接着是各个专栏,这里是关于bootstrap栅格系统与面板的运用,最后是版权信息,这里还是一个面板. 反正个人觉得这种门户式的布局风格烂大街,但不知道为何似乎很受众的样子. 我们

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面_javascript技巧

虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了,但是WIN7自带的浏览器IE8还是需要支持的. 本文这个方法主要的优点,个人觉得就是准备少,不需要上网寻找大量的图片做素材,你只要准备好一个bootstrap.jquery与photoshop就可以了,bootstrap与jquery怎么配置,可以参考<Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗>(点击打开链接) 被要求编写一个网站,常常会被如何布局困扰,其实也不难,如果能够熟练使用Bootstrap,并且有一套特定

兼容所有浏览器的js复制插件Zero使用介绍

 这篇文章主要介绍了兼容所有浏览器的js复制插件Zero的使用,需要的朋友可以参考下 这里需要三个插件,分别是:    jquery.js    ZeroClipboard.js    ZeroClipboard.swf    祝你好运!  代码如下: <meta charset="utf-8" />    <button id="d_clip_button" data-clipboard-target="fe_text" &g

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

因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐.360浏览器.搜狗等浏览器,都泪崩.所以,研究了ZeroClipboard,尽量使用js代码写. 使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧): jquery-1.4.1.min.js    ZeroClipboard.js

javascript实现客户端兼容各浏览器创建csv并下载的方法_javascript技巧

本文实例讲述了javascript实现客户端兼容各浏览器创建csv并下载的方法.分享给大家供大家参考.具体实现方法如下: $("#radarDLBut").click(function(){ var data = [displayData["radar_chart"]["r_label"],displayData["radar_chart"]["r_default"]]; var csvContent =

canvas 画布在主流浏览器中的尺寸限制详细介绍_javascript技巧

canvas 画布在主流浏览器中的尺寸限制详细介绍 通过测试发现,canvas在不同浏览器下面有不同的最大尺寸限制. 大家都知道,canvas有自身的width,height属性来控制尺寸,用css的width,height,控制显示的大小.可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小.但在各浏览器下,设置canvas尺寸时发现有最大尺寸限制.测试一下与大家分享. 测试代码 <!DOCTYPE html> <html> <h

概述如何实现一个简单的浏览器端js模块加载器_javascript技巧

在es6之前,js不像其他语言自带成熟的模块化功能,页面只能靠插入一个个script标签来引入自己的或第三方的脚本,并且容易带来命名冲突的问题.js社区做了很多努力,在当时的运行环境中,实现"模块"的效果. 通用的js模块化标准有CommonJS与AMD,前者运用于node环境,后者在浏览器环境中由Require.js等实现.此外还有国内的开源项目Sea.js,遵循CMD规范.(目前随着es6的普及已经停止维护,不论是AMD还是CMD,都将是一段历史了) 浏览器端js加载器 实现一个简