利用jquery.zclip复制网页内容到剪切板

核心代码

 代码如下 复制代码

("input").zclip({
    path: 'http://steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: $("p").html(),
    beforeCopy:function(){
        console.log("复制之前");
    },
    afterCopy:function(){
        alert("复制成功");
        console.log("复制之后");
    }
});

PS:
这个插件必须在http服务器中才能运行!在本地无效.

例子

 代码如下 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>复制网页内容到剪切板 - zclip</title>
        <style>
            body {
                font: 12px/24px "微软雅黑";
            }
            .zclip {
                font-size: 0;
                line-height: 0;
            }
            input[type='button'].hover {
                opacity: .8;
                filter: alpha(opacity = 80);
            }
        </style>
    </head>
    <body>
        <div>
            <p>Hello Word! Welcome to http://www.111cn.net/</p>
            <input type="button" value="复制" />
        </div>
        <p>这个操作剪切板的插件不支持动态变化的!它的copy属性的值是它一初始化的时候就固定的。</p>
        <p>这个插件必须在http服务器中才能运行!在本地无效</p>
        <p><a href="http://steamdev.com/zclip/" target="_blank">官方网站</a></p>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="http://steamdev.com/zclip/js/jquery.zclip.min.js"></script>
        <script>
            $(function(){
                $("input").zclip({
                    path: 'http://steamdev.com/zclip/js/ZeroClipboard.swf',
                    copy: $("p").html(),
                    beforeCopy:function(){
                        console.log("复制之前");
                    },
                    afterCopy:function(){
                        alert("复制成功");
                        console.log("复制之后");
                    }
                });
            });
        </script>
    </body>
</html>

时间: 2024-12-23 09:26:11

利用jquery.zclip复制网页内容到剪切板的相关文章

java 复制图片到剪切板

Java 如何复制图片到剪切板呢? 下面是我做的一个软件: 项目源代码见附件  这里面就有"复制图片到剪切板"功能.核心方法如下: Java代码   /***       * 复制图片到剪切板       * @param image       */       public static void setClipboardImage(JFrame frame, final Image image) {           Transferable trans = new Trans

兼容ie8 ff ie6复制内容到剪切板

<!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> <meta http-equiv="content-

复制内容到剪切板( 兼容ie8 ff ie6)

  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="co

简单实现兼容各大浏览器的js复制内容到剪切板_jquery

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

基于jquery的复制网页内容到WORD的实现代码_jquery

复制代码 代码如下: $('#eTableWord').click( function() { var oWD = new ActiveXObject("Word.Application"); var oDC = oWD.Documents.Add("", 0, 1); var oRange = oDC.Range(0, 1); var sel = document.body.createTextRange(); sel.moveToElementText(data

js复制内容到剪切板代码

function copyweather(meintext) {  if (window.clipboardData) {   window.clipboardData.setData("Text", meintext);  }   else if (window.netscape) {    netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');    var clip = Component

重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件

原文:重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件 [源码下载] 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 剪切板 Clipboard - 剪切板 复制/粘贴文本 复制/粘贴html 复制/粘贴图片 复制/粘贴文件 示例1.演示剪切板的基本应用Clipboard/D

JQuery zClip插件实现复制页面内容到剪贴板_jquery

相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 最终效果: 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是用的透明flash遮挡"复制到剪贴板"按钮,所以当你点击"复制到剪贴板"的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板. 加载JQuery库和zclip插件 <scri

jQuery zclip插件实现跨浏览器复制功能_jquery

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player. 1.jQuery-zclip用法 //引入jQuery-zclip相关js及swf文件 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js&q