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

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

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

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

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

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

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

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

对于一般的网站来说,可以采取的技术有:通过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>
微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注