网站的内容无法选择复制？是怎么做到的，如何解决？

在平时的学习和工作中，大家难免会有查找资料的需求，从各个网站上摘录文字和图片已经是常规操作。但有时可能会发现，某网站的文字居然无法选择，图片居然无法右键下载！那么文字就不能复制了，如果真的希望摘录怎么办？

这篇文章将分为两个部分为你讲解这个问题：

如何做到内容不允许选择复制

如何在内容不允许选择复制的情况下摘取内容

你如果不是站长，可以直接跳过第一部分来看解决方法。

重要声明：本文仅以鼓励互联网学习交流为目的，网站进制复制可能是由于版权、知识产权、法律法规等限制而采取的措施，请勿将本站的方法用于任何非法用途，本作者（卡米雷特）不承担相关责任。

如何做到内容不允许选择复制

如果不希望网页内容被随意取用，基本的思路可以从两个方向出发：用什么技术，禁止什么行为。

对于一般的网站来说，可以采取的技术有：通过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标签为例，同时添加禁止右键和禁止选择：

你也可以仅添加禁止右键/禁止选择。

针对图片，还可以选择从meta标签下手。加入下面的一句meta，可以禁止浏览器的图片工具，以实现无法下载该页面图片的效果。

04 使用Javascript禁止选择和右键菜单

在讨论这个问题之前，先说一下JS可以如何添加。添加JS有两种常见方法：引用JS文件和在HTML文本中插入。比如，你全站都在引用某个JS，就可以选择将下面的代码插入到那个JS文件中，如果方便修改HTML或PHP，那么直接在HTML中写JS脚本就可以了。

开启正则表达式，然后将这句代码替换为空内容即可。这句代码的含义是：以。

完成替换后，再次用浏览器打开尝试。如果仍然不可以，说明其中有标签，比如上面提到的：

这里可以选择清空所有标签（这样操作比较方便，当然你要分别排查上面两个标签并删掉也可以），让所有的标签都变成

，这样就完全没影响了。

]+>替换为

]+>替换为

这样即可将所有的复杂HTML标签全部转化为单纯的行标签

，同时可以保护img标签不受侵害。完成后再次打开html文件，此时应该就已经是可以随意操作的状态了。

如果未能解决你的问题，欢迎留言。

点击打开小程序，畅享阅读