js点击按钮复制带有名称的链接到剪贴板

最新推荐文章于 2025-03-06 14:22:06 发布

前行123

最新推荐文章于 2025-03-06 14:22:06 发布

阅读量1.5k

点赞数

分类专栏： WEB前端文章标签：按钮复制带名称的url clipboard 剪贴板

WEB前端专栏收录该内容

3 篇文章

订阅专栏

记录使用clipboard.js实现点击复制链接到剪切板的历程里面所有方式只支持复制链接，不支持复制带有名称的链接
根据chrome-extension：Copy with URL（将复制的选中文字转变为超链接文本）文档的描述，改成如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function-target</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <button onclick="copyUrlToClipboard('百度','https://www.baidu.com/')">Copy</button>
	
    <!-- 2. Include library -->
    <script src="clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
	
        /**
         * 复制超链接到粘贴板
         * @param
         *    showUrlName 超链接名称
         *    url  超链接地址
         */
	function copyUrlToClipboard(showUrlName,url) {
		var copyFrom, agent, body;

                    //创建超链接<a id="target" herf=url target="_blank">showUrlName</a>
                    copyFrom = document.createElement("a");
                    copyFrom.setAttribute("id", "target");
                    copyFrom.setAttribute("target", "_blank");
                    copyFrom.setAttribute("href", url);
                    copyFrom.innerHTML = showUrlName;
                    //创建按钮
                    agent = document.createElement("button");
                    //获取body
                    body = document.getElementsByTagName('body')[0];
                    //body增加超链接
                    body.appendChild(copyFrom);
                    //body增加按钮
                    body.appendChild(agent);　　 // 采用Clipboard.js方案 // trouble：没有可以传入的HTML元素，但我们可以动态创建一个DOM对象作为代理，复制超链接
                    var clipboard = new ClipboardJS(agent, {
                        target: function() {
                            return document.querySelector('#target');
                        }
                    });

                    clipboard.on('success', function(e) {
                        alert("复制成功");
                    });

                    clipboard.on('error', function(e) {
                        alert("复制失败");
                    });
                    //点击按钮
                    agent.click();
                    // copyFrom.focus();
                    // copyFrom.select();  // 问题所在 无法对copyFrom对象使用select()方法
                    // document.execCommand('copy'); // copy动态创建的<a>失败
                    //移除创建的元素 
                    body.removeChild(copyFrom);
                    body.removeChild(agent);
	}
    </script>
</body>
</html>

下载代码
效果图

注

1.Uncaught TypeError： Cannot set property action of #<e> which has only a getter

我在自己项目中报如下错误：在这里插入图片描述
后来经过前端同事查看，发现是项目中重写了Object.defineProperty，导致clipboard里的set方法没有起作用，赋值时报错了。
globalbasis.js
然后前端同事对clipboard.js进行优化，就解决了上面的问题。

使用onload，在点击按钮后，报复制失败。原因：document.execCommand() 踩了个坑

var newscript = document.createElement('script');
newscript.setAttribute('type','text/javascript');
newscript.setAttribute('src','clipboard.min.js');
document.getElementsByTagName('head')[0].appendChild(newscript); 

newscript.onload=function(){
     var clipboard = new ClipboardJS(agent, {
     target: function() {
       return document.querySelector('#target');
     }
   });