郑少群博客: [Javascript]把html内容复制到剪贴板

2012年2月27日星期一

[Javascript]把html内容复制到剪贴板

做网页开发的时候，用javascript动态生成的元素往往查看源代码是看不到的。
可以利用下面这个函数来实现查看即时生成的html。

参考：
window.clipboardData

window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。

成员表：

方法描述
clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。
getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。
setData 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。

用法：

//清除
window.clipboardData.clearData('text');
//获得剪贴版的文字
window.clipboardData.getData('text');
//文本加入到剪贴板
window.clipboardData.setData('text', "你的内容");

注：
setData()的返回值是boolean型的，可以判断是否复制成功。

例子：

将下面的代码直接在IE地址栏上运行，在记事本里面ctrl+v 即可得到网页的HTML。
javascript:alert(window.clipboardData.setData('text', document.documentElement.outerHTML));

=====

<script>
function copy(obj)

{
alert("已经复制了...."+obj.value);
window.clipboardData.setData("Text",obj.value);
}
</script>
<input id="myTest" onfocus="copy(this);" value="要拷贝的内容"></input>

<SCRIPT LANGUAGE="JavaScript">
function fCopyToClicp(id){
var a = document.getElementById(id);
window.clipboardData.setData('text',a.value);
alert("已复制到剪贴板了.");
}
</SCRIPT>
<input type="text" id="code1" onmouseover="this.select();" value='http://www.3lian.com/' size="42" />
<input type="button" value="复制" onClick="fCopyToClicp('code1');" />
<br/>