每天大家都在说搜索引擎优化，说网站推广，但是对于导入至站点的流量如何进一步保持用户的粘性，人性化的的页面设置，方便醒目的功能设置，等所有这些提高用户体验的贴心设置对于站点的贡献是无法量化说明的。

今天我要介绍的就是本站的用户体验优化的一个小细节-文章内添加复制本篇文章URL至剪贴板。

• 最简单的方式，适用IE浏览器

<script language="javascript">
	function copyToClipboard(txt) {
		if(window.clipboardData) {
			window.clipboardData.clearData();
			window.clipboardData.setData(”Text”, txt);
		}
	}
</script>
<input type="button" value="复制本文URL至剪贴板" onClick="copyToClipboard('<?php the_permalink(); ?>')" />

• 适用于 firefox 浏览器的方案

<script language="javascript">
	function copyToClipboard(txt) {
		if (window.netscape) {
			try {
				netscape.security.PrivilegeManager.enablePrivilege(”UniversalXPConnect”);
			}
			catch (e) {
				alert(”您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试”);
				return false;
			}
			var clip = Components.classes[’@mozilla.org/widget/clipboard;1′].createInstance(Components.interfaces.nsIClipboard);
			if (!clip)
				return;
			var trans = Components.classes[’@mozilla.org/widget/transferable;1′].createInstance(Components.interfaces.nsITransferable);
			if (!trans)
				return;
			trans.addDataFlavor(’text/unicode’);
			var str = new Object();
			var len = new Object();
			var str = Components.classes[”@mozilla.org/supports-string;1″].createInstance(Components.interfaces.nsISupportsString);
			var copytext = txt;
			str.data = copytext;
			trans.setTransferData(”text/unicode”,str,copytext.length*2);
			var clipid = Components.interfaces.nsIClipboard;
			if (!clip)
				return false;
			clip.setData(trans,null,clipid.kGlobalClipboard);
		}
	}
</script>
<input type="button" value="复制本文URL至剪贴板" onClick="copyToClipboard('<?php the_permalink(); ?>')" />

• 以上两种方法能够实现绝大部分的用户需求，但是对于一些新型浏览器并不能支持。
  终极的解决方案是，使用jhuckaby写的Zero Clipboard的js类库。此方法利用 Flash完成进行复制内容到剪贴板，所以只要浏览器装有 Flash 就可以复制内容。
  下面介绍下本站实现复制本文链接至剪贴板的方法

下载 Zero Clipboard 类库上传 Zero Clipboard 目录至站点
zero clipboard
比如本站上传至

/public_html/wp-includes/js/

对应的类库引用位置是

https://www.track2web.com/wp-includes/js/zeroclipboard/ZeroClipboard.js

添加以下代码至模板文件 single.php 相应位置，实现复制URL至剪贴板

<!-- 引入 Zero Clipboard 类库 -->
<script src="https://www.track2web.com/wp-includes/js/zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
<script language="javascript">
	function copyToClipboard(txt) {
		//引入 Zero Clipboard flash文件
		ZeroClipboard.setMoviePath( "https://www.track2web.com/wp-includes/js/zeroclipboard/ZeroClipboard.swf" );
		//新建对象
		clip = new ZeroClipboard.Client();
		//设置指向光标为手型
		clip.setHandCursor( true );
		//通过传入的参数设置剪贴板内容
		clip.setText(txt);
		//添加监听器，完成点击复制后弹出警告
		clip.addEventListener("complete", function (client, text) {
			alert("您复制了本文URL地址为：\n" + text );
		});
		//绑定触发对象按钮ID
		clip.glue("b_clip_button");
	}
</script>
<!--页面添加按钮 注意 ID与注册的名称相同 触发事件为 onmouseover 传递 wordpress 固定链接 参数作为复制参数 -->
<input id="b_clip_button" onmouseover="copyToClipboard('<?php the_permalink(); ?>')" type="button" value="复制本文URL地址至剪贴板" />

要点讲解:为什么使用 onmouseover 事件而不是 onclick 事件
定义的函数中的 clip 对象在页面载入的时候并不会建立，减轻页面负担。当用户需要进行复制操作的时候鼠标移到 按钮 上，触发 onmouseover 事件，因为 falsh 10 规定必须有点击事件才能够触发 falsh 动过。所以当用户点击按钮后才能实现复制操作
如果 按钮使用 onclick 事件，当用户点击按钮时，将仅仅新建了 clip 对象，并没有能够完成 falsh 的复制动作，必须再点击一次按钮才能实现复制，而使用 onmouseover 事件则避免了两次点击的问题。

Categories: 用户体验

Tagged as: ueo Zero Clipboard

RoyAkon