网站的内容无法选择复制？是怎么做到的，如何解决？
在平时的学习和工作中，大家难免会有查找资料的需求，从各个网站上摘录文字和图片已经是常规操作。但有时可能会发现，某网站的文字居然无法选择，图片居然无法右键下载！那么文字就不能复制了，如果真的希望摘录怎么办？
这篇文章将分为两个部分为你讲解这个问题：
你如果不是站长，可以直接跳过第一部分来看解决方法。
重要声明：本文仅以鼓励互联网学习交流为目的，网站进制复制可能是由于版权、知识产权、法律法规等限制而采取的措施，请勿将本站的方法用于任何非法用途，本作者（卡米雷特）不承担相关责任。
如何做到内容不允许选择复制
如果不希望网页内容被随意取用，基本的思路可以从两个方向出发：用什么技术，禁止什么行为。
对于一般的网站来说，可以采取的技术有：通过CSS禁止，通过标签属性禁止，通过Javascript禁止。可能你的CMS系统可以找到插件来实现类似的功能，但原理基本就是上述的3种。还有两种歪门邪道：插入透明度100%的遮罩层、使用iframe重调用。
对于一般的网站来说，可以禁止的操作有：禁用选择（浏览者无法选中文字等内容）、禁止鼠标右键（无法在页面上调用右键菜单）、无法使用Ctrl+C（阻止特定的复制指令输入）。
由此，结合每种技术的功能限制，可以组合出不同的具体操作。具体可以选用下面这些方法：
- 使用CSS禁止选择
- 使用CSS创建遮罩层
- 使用标签属性禁止选择和右键菜单
- 使用Javascript禁止选择和右键菜单和Ctrl+C
- 使用iframe重调用
以上方法可以同时使用。但要注意，任何方法都不是没有后门可走，任何一句多余的代码都会拖慢网站速度，保护内容适度即可。
01 使用CSS禁止选择
通过给访问页面的用户的-select操作添加none属性，实现用户无权限执行选择的效果。可直接添加下述CSS代码到根部或者某个类，以实现对内容的保护。
*{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}如果你只想让某类用户有选择权，可以单独去掉那一行none。
02 使用CSS创建遮罩层
所谓遮罩层，可以理解为在内容上覆盖一层透明的塑料膜，用户只能触碰到塑料膜而无法触及到内容，从而实现了保护的效果。
具体使用的时候，可以将遮罩层设置为一个类，针对性保护某一部分。请注意，目前遮罩层可能会被某些搜索引擎误认为影响用户使用的悬浮广告，可能会影响SEO的效果。
.mark{
background:#000!important;
opacity:.01!important; //透明度调整
position:fixed!important;
left:0!important;
top:0!important;
width:100%!important;
height:100%!important;
z-index:998!important; //高度调整，注意应为全站最高
pointer-events: none!important; //禁止操作穿透
}
03 使用标签属性禁止选择和右键菜单
在HTML中，自带了oncontextmenu和onselectstart两个标签属性，可以添加到任何位置。这两个数学控制的是右键和选择后页面的响应方式，通过修改内容可以实现在右键菜单中添加额外选项的功能。但这里我们直接设置为无返回内容。以article标签为例，同时添加禁止右键和禁止选择：
<article oncontextmenu="return false;" onselectstart="return false">你也可以仅添加禁止右键/禁止选择。
针对图片，还可以选择从meta标签下手。加入下面的一句meta，可以禁止浏览器的图片工具，以实现无法下载该页面图片的效果。
<meta http-equiv="imagetoolbar" content="false">04 使用Javascript禁止选择和右键菜单
在讨论这个问题之前，先说一下JS可以如何添加。添加JS有两种常见方法：引用JS文件和在HTML文本中插入。比如，你全站都在引用某个JS，就可以选择将下面的代码插入到那个JS文件中，如果方便修改HTML或PHP，那么直接在HTML中写JS脚本就可以了。
<script type="text/javascript">
//禁用右键
document.oncontextmenu=function(){
return false;
}
//禁用选择
document.onselectstart=function(){
return false;
}
//禁用ctrl+c
document.onkeydown=function(){
if((event.ctrlKey) && (window.event.keycode==67)){
event.returnValue=false;
}
};
//禁用右键方法2（直接禁止在改页面上输入右键）
document.onmousedown=function(){
if(event.button==2){
event.returnValue=false;
}
}
</script>你也可以通过JS实现复制时加入文字的效果。比如复制一段文字，粘帖后文字后面会出现网站的版权声明，提醒用户这段文字请勿不当使用。
<script type="text/javascript">
function addLink() {
var body_element = document.body;
var selection;
selection = window.getSelection();
if (window.clipboardData) {
// Internet Explorer
var pagelink ="\r\n\r\n 原文出自[卡米雷特的小站(kamilet.cn)]，转载请附带原文链接: "+document.location.href+"";
var copytext = selection + pagelink;
window.clipboardData.setData ("Text", copytext);
return false;
} else {
var pagelink = " \r\n 原文出自[卡米雷特的小站(kamilet.cn)]，转载请附带原文链接: "+document.location.href+"";
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
}
document.oncopy = addLink;
</script>05 使用iframe重调用
这种方法的原理非常简单：用一个禁止任何脚本的页面调用内容页面作为iframe，这样在顶层页面上就无法使用脚本化功能了。这包括右键、复制、选择等……但问题在于，网站的结构将出现很大问题，因为所有的页面都要由另一个页面封装，而对外展示的页面又没有多少内容，对SEO也很不利。但总归，这种方法也并不是不能用的。
<noscript><iframe src="http://展示页面.html"></iframe></noscript>
