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

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

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

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

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

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

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

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

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

对于一般的网站来说,可以采取的技术有:通过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文件,此时应该就已经是可以随意操作的状态了。

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181221G12IO200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券