兼容所有浏览器复制问题总结

最新推荐文章于 2022-02-21 16:43:03 发布

风若飞

最新推荐文章于 2022-02-21 16:43:03 发布

阅读量655

点赞数

分类专栏： javascript 文章标签：浏览器 function jquery flash class button

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于浏览器兼容复制的相关问题，详细的请看这个地址：http://www.niumowang.org/javascript/zero-clipboard/
源代码可以看这个网站：http://code.google.com/p/zeroclipboard/wiki/Instructions。
关于zeroclipboard的复制功能详细的我就不再描述，我就说一点。结合以上两个网站的例子
说自己开发时需要注意的问题（最好先看下以上两个网站的例子再看下面的）：
2。ZeroClipboard的加载flash的路径最好一定设置 ZeroClipboard.setMoviePath( 'http://yourhost/ZeroClipboard.swf' );
3.在写你的事件函数时，只能写mouseover，虽然当触发该事件时，会执行该方法，但是真正的复制只有当你点击你对应触发事件的
按钮时才完成复制方法。（关于这点我没弄清原因）
4.事件函数一定要卸载初始化函数里面，否则复制功能就不太好用，点击两次触发事件的按钮才能完成复制（不信你可以试试哦！！）。
5.如果你想写相关复制成功的提示信息，一定要在监听事件完成的函数里哦。不然是不好用的。
clip.addEventListener('complete', function (client, text) {
//完成事件后的提示信息写在这里哦
});把这个函数加到初始化函数里边
6.写完代码后最应该注意一点就是不在服务里运行你的页面好像功能这个功能不好用。我在我本地试了很多回，直接在浏览器打开本地写
好的页面貌似不行。必须在服务器（如tomcat）运行下该功能才好用，关于这点我也没弄明白，

7.下面是我稍微改动点的代码，暂且看下吧，对了，jquery不一定要用哦，只是$('div.multiple').mouseover( function() 把这个函数改
为自己的就可以。当然也可以像源代码中写的定义一个 function $(id) { return document.getElementById(id); }就可以用$('id')
来调用某页面元素了。
8。以上是复制文本的方法，找了很久也没找到完美复制图片的方法。很遗憾哦，貌似只有组件或者自己写相关flash和js才能吧。（好像忘记点
东西，想不起了，就这样吧）

<html>
<head>
<title>Zero Clipboard 结合jquery使用示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</style>
<script type="text/javascript" src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://www.niumowang.org/wp-content/plugins/pizi_run_code/ZeroClipboard.js"></script>
<script language="JavaScript">
		var clip = null;
		function init() {
		//开发时最好加上这句话来设置swf文件路径
                 ZeroClipboard.setMoviePath( 'http://yourhost/ZeroClipboard.swf' ); //采用绝对路径或者相对路径
			clip = new ZeroClipboard.Client();//创建对象
			clip.setHandCursor( true );//鼠标手型
			$('div.multiple').mouseover( function() {
				clip.setText( this.innerHTML );//设置复制的内容
				if (clip.div) {
					clip.receiveEvent('mouseout', null);
					clip.reposition(this);
				}//如果已经存在flash，那么重新定位
				else clip.glue(this);
				clip.receiveEvent('mouseover', null);
			} );
			clip.addEventListener('complete', function (client, text) {
			//text 就是你复制成功的内容
			alert("复制成功");
				//完成事件后的提示信息写在这里哦
			});
		}
			
	</script>
</head>
<body οnlοad="init()">
<h1>Zero Clipboard 结合jquery使用示例</h1>
<div class="multiple">
	 Hello啊，树哥！
</div>
<div class="multiple">
	 请问，你认识春爷吗？
</div>
<div style="clear:both;">
</div>
<br/><br/> 把你的狗皮膏药贴到这里:<br/>
<textarea id="testarea" cols='50' rows='10'></textarea><br/>
<input type='button' value="清除文本框的内容" οnclick="document.getElementById('testarea').value = '';"/>
</body>
</html>