js 内容复制到剪贴板方法总结

最新推荐文章于 2024-05-30 11:10:40 发布

流年轻逝

最新推荐文章于 2024-05-30 11:10:40 发布

阅读量968

点赞数

本文介绍了多种将网页内容复制到剪贴板的方法，包括使用JavaScript的clipboardData.setData方法、获取选中文本并附加链接地址，以及利用ZeroClipboard库通过Flash实现跨浏览器兼容的复制功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常会看到很多的网站复制他们的内容就在内容中加上了他们的版本或连接地址了，下面我来给大家总结各种内容复制到剪贴板方法.

在js中有一个clipboardData.setData(sDataFormat, sData)函数可以实现

代码如下

复制代码

clipboardData.setData("text",www.111cn.net)

<a href="#" onclick=javascript:clipboardData.setData("text","www.111cn.net")>
单击当前链接文本表示复制了内容到本地剪贴板，只需在【Ctrl】+【V】就能显示出定义的内容
</a>

如何获得“拷贝的选择内容”，这就需要使用到 document.selection.createRange() 方法

代码如下	复制代码
<script type="text/javascript"> document.body.oncopy=function(){ event.returnValue=false; var t=document.selection.createRange().text; var s="有关单击按钮将内容复制到剪贴板的原文内容地址： "+location.href; clipboardData.setData('Text',t+'rnrn'+s+'rn'); } </script>

上面的方法可以使用在ie,ff中但是有时在一些浏览器会不兼容哦，下面我来介绍一个比较好的解决办法

Zero Clipboard，利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash（对用户来说是不可见的）上覆盖一个dom元素比如button或div，当点击这个dom时，实际点击的是flash，从而访问flash的剪贴板。

代码如下

复制代码

<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
var clip = null;
function $(id) { return document.getElementById(id); }
function init() {
          clip = new ZeroClipboard.Client();
          clip.setHandCursor(true);
          clip.addEventListener('mouseOver', function (client) {
    // update the text on mouse over
    clip.setText( $('fe_text').value );
          });

          clip.addEventListener('complete', function (client, text) {
    //debugstr("Copied text to clipboard: " + text );
    alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");
          });
          clip.glue('clip_button', 'clip_container' );
}
</script>
</head>
<body onLoad="init()">
<input id="fe_text" cols=50 rows=5 value=复制内容文本1 >
<span id="clip_container"><span id="clip_button"><b>复制</b></span></span>
</body>
</html>