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

简介: 在IE中,JS可以直接访问剪贴板,但是firefox,chrome等其它"高级"浏览器,就没这么幸运了。网上流传的所谓兼容firefox/IE的剪贴板访问javascript代码,都是N年前的往事了。 根据http://mozilla.com.cn/post/49413/ 上的说法: ---------------------------------- 火狐不允许网页操作用户的剪切板,因为有安全问题,网页可能盗用你复制的密码等等。

在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左右 

目录
相关文章
|
1月前
|
域名解析 网络协议 前端开发
浏览器输入域名网址访问后的过程详解
1、以91处理网为例,客户端浏览器通过DNS解析到www.91chuli.com,IP地址是202.108.22.5,通过这个IP地址找到客户端到服务器的路径。客户端浏览器发起一个HTTP会话到202.108.22.5,然后通过TCP进行封装数据包,输入到网络层。
69 2
|
1月前
|
Web App开发 API Windows
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{&quot;code&quot;:200,&quot;ip&quot;:&quot;175.154.88.178&quot;,&quot;browser&quot;:&quot;Chrome&quot;,&quot;os&quot;:&quot;Windows 10&quot;}。详情见官网文档。
|
4月前
|
数据采集 Web App开发 测试技术
使用Selenium调试Edge浏览器的常见问题与解决方案
在互联网数据采集领域,Selenium常用于自动化网页爬取。针对使用Edge浏览器时遇到的启动远程调试失败、访问受限及代理IP设置等问题,本文提供了解决方案。通过特定命令启动Edge的远程调试模式,并利用Python脚本配合Selenium库,可实现代理IP、User-Agent的设定及Cookie管理等高级功能,有效提升爬虫稳定性和隐蔽性。遵循步骤配置后,即可顺畅执行自动化测试任务。
1013 1
使用Selenium调试Edge浏览器的常见问题与解决方案
|
4月前
Edge——如何打开IE浏览器进行访问
Edge——如何打开IE浏览器进行访问
77 4
|
5月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
146 3
|
5月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
5月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
162 0
|
6月前
|
安全 前端开发 JavaScript
CORS是W3C标准,解决浏览器同源策略限制的跨域数据访问。
【6月更文挑战第27天】CORS是W3C标准,解决浏览器同源策略限制的跨域数据访问。它通过服务器在HTTP响应头添加`Access-Control-Allow-*`字段允许特定源请求。简单请求无需预检,非简单请求会发OPTIONS预检请求。服务器配置CORS策略,客户端正常请求,浏览器自动处理。若未正确配置,浏览器将阻止响应,保障安全。
77 0
|
6月前
|
网络安全
宝塔控制面板无法访问,浏览器提示连接失败
宝塔控制面板无法访问,浏览器提示连接失败
78 0
|
7月前
浏览器兼容性解决方案
【5月更文挑战第4天】浏览器兼容性解决方案。
66 5