JS 仿知乎复制文章末尾自动添加字符串

当别人复制你的文章内容时，会在文章末尾自动添加一串字符。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h3>车舝</h3>
<p>间关车之舝兮，思娈季女逝兮。匪饥匪渴，德音来括。虽无好友？式燕且喜。</p>
<p>依彼平林，有集维鷮。辰彼硕女，令德来教。式燕且誉，好尔无射。</p>
<p>虽无旨酒？式饮庶几。虽无嘉肴？式食庶几。虽无德与女？式歌且舞？</p>
<p>陟彼高冈，析其柞薪。析其柞薪，其叶湑兮。鲜我觏尔，我心写兮。</p>
<p>高山仰止，景行行止。四牡騑騑，六辔如琴。觏尔新婚，以慰我心。</p>
<script>
$("body").bind('copy', function (e) {
	if (typeof window.getSelection == "undefined") return; //IE8 及更老的版本不兼容
	
	var body_element = document.getElementsByTagName('body')[0];
	var selection = window.getSelection();
	
	//如果选择是短的内容，让我们不要打扰我们的用户
	if (("" + selection).length < 30) return;

	//创建一个DIV的可见区域之外
	//并填写选定的文本
	var newdiv = document.createElement('div');
	newdiv.style.position = 'absolute';
	newdiv.style.left = '-99999px';
	body_element.appendChild(newdiv);
	newdiv.appendChild(selection.getRangeAt(0).cloneContents());
	
	//我们需要<pre>标签解决方案
	//其他的文本在<pre>失去了所有的行符！
	if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {
		newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
	}
	
	newdiv.innerHTML += "<br /><br />文章来自: 网站名称(http://www.onestopweb.cn)  详文参考：<a href='"
	+ document.location.href + "'>"
	+ document.location.href + "</a>";
			
	selection.selectAllChildren(newdiv);
	window.setTimeout(function () { body_element.removeChild(newdiv); }, 200);
});
</script>
</body>
</html>

PS：兼容IE9+，火狐，谷歌，欧朋。

效果图：

JS 仿知乎复制文章末尾自动添加字符串

猜你喜欢