JS里获取的页面链接，如何放在粘贴板里

秋名山的奥迪双钻 2017-11-14 03:31:14

现在我要做个分享链接组件，点击按钮将本页面链接放在粘贴板里，然后粘贴就能粘贴出来本页链接。

IE有个window.clipboardData.setData的方法可以实现，但是只能又在IE上。
然后我又看到了execCommand（‘Copy’）这个方法，但是他需要选中页面上的节点，选中input这种里的内容，我获取的页面链接完全是在JS里获取的。

而且现在项目还不让加其他像jQuery这样的第三方组件，只能原生写。虽然项目用的Angularjs，但是组件是客户提供的，纯原生写的，我还不敢乱改，所以现在很头疼。

跪求大神解答！！！

...全文

517 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

秋名山的奥迪双钻 2017-11-16

打赏
举报


document.getElementsByClassName("icon-copy")[0].addEventListener("click", function() {
					console.log('点击');
					var id = document.getElementById('copy-input-div');
					if(id){
						document.body.removeChild(id);
					}
					var myInput = document.createElement("input");
					var inputDiv = document.createElement("div");
					inputDiv.id='copy-input-div';
					myInput.id = 'copyId';
					myInput.value = url;
					document.body.appendChild(inputDiv);
					inputDiv.appendChild(myInput);
					var obj = document.getElementById('copyId');
					obj.select();
					try {
						if(document.execCommand('Copy')){
							document.execCommand('Copy');
							console.log('copy success');
							alert('复制成功');
						} else {
							console.log('false');
						}
					} catch (err){
						console.log('报错：');
						console.log(err);
					}
				});

现在火狐好用了，url我要拷贝的值，但是现在不知道为啥360极速模式execCommand('Copy')返回的是false,兼容模式好用，是因为我360的webKit内核版本低吗，还是因为别的原因我看网上说返回false是因为execCommand('Copy')不被支持或未被启用，这个怎么判断或解决

秋名山的奥迪双钻 2017-11-15

打赏
举报

我刚才看了下，火狐返回false貌似是因为我在js里直接调用的execCommand("copy")，而火狐基于安全性问题需要有点击事件触发函数才行。我这是给别人提供的分享组件里加拷贝链接功能，虽然是点击才触发但我也不清楚到底我写的拷贝链接的function走没走点击事件。

functionsub 2017-11-15

打赏
举报

360安全浏览器9（兼容模式、急速模式） Opera 48.0.2685.52 (PGO) firefox 56 chrome 62 IE7/IE8/IE9 均测试通过。

秋名山的奥迪双钻 2017-11-15

打赏
举报

引用 12 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=6,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
function copyText(text) {
	var textarea = document.createElement("textarea");
	var currentFocus = document.activeElement;
	document.body.appendChild(textarea);
	textarea.value = text;
	textarea.focus();
	if (textarea.setSelectionRange)
		textarea.setSelectionRange(0, textarea.value.length);
    else
		textarea.select();
	try {
		var flag = document.execCommand("copy");
	} catch(eo){
		var flag = false;
	}
	document.body.removeChild(textarea);
	currentFocus.focus();
	return flag;
}

document.getElementById('btn').onclick = function(){
	var flag = copyText("abcdef");
	alert(flag ? "复制成功！" : "复制失败！");
};
</script>
</body>
</html>

引用 12 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=6,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
function copyText(text) {
	var textarea = document.createElement("textarea");
	var currentFocus = document.activeElement;
	document.body.appendChild(textarea);
	textarea.value = text;
	textarea.focus();
	if (textarea.setSelectionRange)
		textarea.setSelectionRange(0, textarea.value.length);
    else
		textarea.select();
	try {
		var flag = document.execCommand("copy");
	} catch(eo){
		var flag = false;
	}
	document.body.removeChild(textarea);
	currentFocus.focus();
	return flag;
}

document.getElementById('btn').onclick = function(){
	var flag = copyText("abcdef");
	alert(flag ? "复制成功！" : "复制失败！");
};
</script>
</body>
</html>

execCommand("copy")有兼容性问题啊，在360上返回的是false,火狐也是false还报了document.execCommand('cut'/'copy') was denied because it was not called from inside a short running user-generated event handler. opera我还没测

天际的海浪 2017-11-15

打赏
举报

引用 15 楼 m0_37518156 的回复:

我刚才看了下，火狐返回false貌似是因为我在js里直接调用的execCommand("copy")，而火狐基于安全性问题需要有点击事件触发函数才行。我这是给别人提供的分享组件里加拷贝链接功能，虽然是点击才触发但我也不清楚到底我写的拷贝链接的function走没走点击事件。

是的。之前忘说了，ie之外的浏览器 document.execCommand("copy");这个必须在由用户操作触发的点击事件线程中执行。这要求应该没什么，你在分享组件使用说明中说一下就好了。

天际的海浪 2017-11-14

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=6,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
function copyText(text) {
	var textarea = document.createElement("textarea");
	var currentFocus = document.activeElement;
	document.body.appendChild(textarea);
	textarea.value = text;
	textarea.focus();
	if (textarea.setSelectionRange)
		textarea.setSelectionRange(0, textarea.value.length);
    else
		textarea.select();
	try {
		var flag = document.execCommand("copy");
	} catch(eo){
		var flag = false;
	}
	document.body.removeChild(textarea);
	currentFocus.focus();
	return flag;
}

document.getElementById('btn').onclick = function(){
	var flag = copyText("abcdef");
	alert(flag ? "复制成功！" : "复制失败！");
};
</script>
</body>
</html>

functionsub 2017-11-14

打赏
举报

楼主你也是知道execCommand可以，没有选中内容的节点，那你就自己创建一个呗。不要钻死胡同啊。

functionsub 2017-11-14

打赏
举报

    window.onload = function(){
        document.onclick = function(){
            var textarea = document.createElement('textarea');
            textarea.value = location.href;
            var div = document.createElement('div');
            div.appendChild(textarea);
            div.style.position = 'absolute';
            div.style.left = '-10000px';
            div.style.top = '-10000px';
            document.getElementsByTagName('body')[0].appendChild(div);
            textarea.select();
            document.execCommand('Copy');
            document.getElementsByTagName('body')[0].removeChild(div);
        }
    }

我只测试了IE7IE8IE9chrome，其他浏览器倒是没仔细测试过。。应该是差不多的。

秋名山的奥迪双钻 2017-11-14