跨浏览器的剪贴板访问解决方案

在IE中,JS可以直接访问剪贴板,但是firefox,chrome等其它"高级"浏览器,就没这么幸运了。网上流传的所谓兼容firefox/IE的剪贴板访问javascript代码,都是N年前的往事了。

根据http://mozilla.com.cn/post/49413/ 上的说法:

----------------------------------

火狐不允许网页操作用户的剪切板,因为有安全问题,网页可能盗用你复制的密码等等。

以前可以通过修改设置提权,允许网页获得高权限,操作剪切板,目前火狐已经取消了这个接口。不再允许,所以修改了设置也无效,目前还是自己通过快捷键复制吧。

----------------------------------

看来通过"纯js"来达到“一统天下”,至少在剪贴板这一问题上,已经是不可能了.

幸好,我们还有Flash/Silverlight这一类插件可以解决这一问题。Flash和Silverlight都内置了剪贴板的访问接口,zClip就是利用flash来解决这一问题的免费项目:

http://www.steamdev.com/zclip/

其原理是在目标元素上叠加一个透明的flash,点击目标元素时,其实就是把flash激活了,然后通过flash内部的剪贴板访问接口实现 复制到剪贴板 功能.

整个flash 1K + js 7K,一共约8K大小,已经能圆满解决该问题。

但是事情并没有就此止步,如果你还想进一步减少附加文件的大小,或者检验"自己动手,丰衣足食"的乐趣,下面给出了Silverlight的解决方案:

一、创建一个新Silverliight项目,里面就放一个MainPage,然后在MainPage.xaml.cs里,把对剪贴板的读写方法暴露出来

using System;
using System.Windows;
using System.Windows.Browser;
using System.Windows.Controls;

namespace ClipboardTools
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 设置剪贴板文本
        /// </summary>
        /// <param name="text"></param>
        /// <returns></returns>
        [ScriptableMember()]
        public bool SetText(string text)
        {
            try
            {
                Clipboard.SetText(text);
                return true;
            }
            catch (Exception e)
            {
                System.Diagnostics.Debug.WriteLine(e.Message);
                return false;
            }
        }

        /// <summary>
        /// 获取剪贴板文本
        /// </summary>
        /// <returns></returns>
        [ScriptableMember()]
        public string GetText()
        {
            try
            {
                return Clipboard.GetText();

            }
            catch (Exception e)
            {
                System.Diagnostics.Debug.WriteLine(e.Message);
                return "";
            }
        }

        /// <summary>
        /// 测试剪贴板里是否有内容
        /// </summary>
        /// <returns></returns>
        [ScriptableMember()]
        public bool ContainsText()
        {
            return Clipboard.ContainsText();
        }

    }
}

 然后在App.xaml.cs里注册一下:

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            MainPage mp = new MainPage();
            this.RootVisual = mp;
            HtmlPage.RegisterScriptableObject("JsHandler", mp);
        }

 如果是Silverlight5,注册把下面这个选项勾上,以允许一些需要高权限的操作在浏览器中运行

二、web页面上使用代码示例:

<!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 runat="server">
    <title>Clipboard</title>
    <style type="text/css">
        html, body { height: 100%; overflow: auto;margin: 0;padding:0 }
        #silverlightControlHost { height: 0px;width: 0px; }
        button{ width: 75px;margin-left:5px}
    </style>
</head>
<body>
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/Clipboard.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="5.0.61118.0" />
            <param name="onLoad" value="SilverlightLoaded" />
            <param name="autoUpgrade" value="false" />
        </object>
      </div>
    <script type="text/javascript">
      var slCtl = null;
        function SilverlightLoaded(sender) {
            slCtl = sender.getHost();
        }

        function setText(text) {
            if (slCtl != null) {
                var s = slCtl.Content.JsHandler.SetText(text);
                if (s) {
                    alert(text + "\n\n已复制到剪贴板!");
                    return true;
                } else {
                    alert("复制到剪贴板失败!");
                    return true;
                }
            }
            alert("Silverlight加载失败!");
            return false;
        }

        function getText() {
            if (slCtl != null) {
                return slCtl.Content.JsHandler.GetText();
            }
            return "";
        }

    </script>
    <div style="margin:10px">
        <input type="text" id="txtSrc" value="Sample Text"/>
        <button id="btnCopy" onclick="setText(document.getElementById('txtSrc').value)">copy</button>
        <button id="btnSet" onclick="alert(getText())">get</button>
    </div>
</body>
</html>

silverlight编译后的xap约4K,js代码不足1K,一共5k左右 

时间: 2024-12-31 17:40:28

跨浏览器的剪贴板访问解决方案的相关文章

锁-我遇到的问题是,一个页面在连接访问一段时间后会禁止访问。但是换个浏览器就可以继续访问。这个怎么破?

问题描述 我遇到的问题是,一个页面在连接访问一段时间后会禁止访问.但是换个浏览器就可以继续访问.这个怎么破? 我遇到的问题是,一个页面在连接访问一段时间后会禁止访问.但是换个浏览器就可以继续访问.这个通过cookie进行封锁的网页怎么抓取,前提是没有登录.他是一个cookie有一定的访问次数限制,到达次数后就会被疯掉,然后换一个浏览器就可以继续访问 解决方案 你爬虫还用浏览器?用服务器端httprequest对象,httprequest不附带cookie,每次会启用新会话 解决方案二: 我用的h

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

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

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

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

解决Flexbox跨浏览器兼容Bug

早在2013年9月,我在测试我的Solved by Flexbox项目时,在IE10和IE11中发现了一个Bug,就是Sticky footer实际上不会粘贴在页面的底部.我花了很多时间来解决这个问题,但始终没有成功. 起初,我真的很生气.在Flexbox出现之前,如果在不知道页脚的确切尺寸情况之下,要使用纯CSS来实现Sticky Footer的效果是不太可能.Flexbox改变了这一切,可以使用CSS解决这个问题. 失望之后,我最终得出一个结论,这不是什么大不了的事情.我的意思是,从渐进增强

利用 Visual Studio 2013 进行跨浏览器、编码 UI 测试

在过去几年中,基于 Web 的解决方案为全世界用户提供便利的访问,因而非常受欢迎.用户喜欢它们的另一个原因是它们的方便性.用户无需安装单独的应用程序:仅凭浏览器就能从任何连接 Internet 的设备连接自己的帐户.但是,从软件开发者和测试者的角度看,用户可以选择任何 Web 浏览器会带来这样一个问题:解决方案必须经过多种浏览器的测试.本文将介绍如何通过简单的方法解决这个问题,即只使用 C# 创建任何新型浏览器都可以执行的编码 UI 测试用例. 新 Visual Studio 几年前,当 Vis

JavaScript跨浏览器获取页面中相同class节点的方法

 这篇文章主要介绍了JavaScript跨浏览器获取页面中相同class节点的方法,本文讲解使用getELementsByClassName函数解决这个需求,并给了一个开源的getELementsByClassName函数实现,功能更加强大,需要的朋友可以参考下     网页开发时,在很多时候我们需要操作相同类名的元素,即class相同的元素.昨天参加笔试,有一道相关的题目没答上来: JavaScript获取页面中class为test的节点 于是收集了一些相关的资料,在本文中列举了两种我觉得比较

如何搭建自动化、跨浏览器的 JavaScript 单元测试

本文讲的是如何搭建自动化.跨浏览器的 JavaScript 单元测试, 我们都知道在各个不同的浏览器环境里测试代码是很重要的,并且在大多数时候,我们这些 Web 开发者在这一点上还是做的不错的 -- 至少在第一次发布项目的时候是这样. 然而我们每次更改代码之后的测试工作,却做的不尽人意. 我深切地知道我本人就是这样的 -- 我早就把"学习怎样搭建自动化.跨浏览器的 JavaScript 单元测试"写在 To-do List 上了,但每当我坐下来想要真正的去解决这个问题的时候,我却不得不

Flexbox跨浏览器兼容Bug解决方法

在IE10和IE11中发现了一个Bug,就是Sticky footer实际上不会粘贴在页面的底部.我花了很多时间来解决这个问题,但始终没有成功. 起初,我真的很生气.在Flexbox出现之前,如果在不知道页脚的确切尺寸情况之下,要使用纯CSS来实现Sticky Footer的效果是不太可能.Flexbox改变了这一切,可以使用CSS解决这个问题. 失望之后,我最终得出一个结论,这不是什么大不了的事情.我的意思是,从渐进增强的角度来看,我的解决方案还是相当不错的.虽然它在IE并不完美,但不至于坏得

跨浏览器的设置innerHTML方法_javascript技巧

Ajax是个好东西,但使用起来却不是那么方便.问题总结如下: 在各种浏览器上的创建方式和使用方法不一致  各个浏览器对响应的缓存策略有所不同  浏览器存在跨域获取限制  前两个问题可以通过封装 XMLHTTPRequest 对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转 proxy .Modello.ajax 就是提供这套解决方案的工具集. 安装 下载 Modello 和 Mdello.ajax  解压并将 modello.js, modello.