首先说明,没有真正意义的防止复制网站内容的方法。这里说的网页防复制代码,是人为的添加一些代码,给复制网站内容提高些门槛。通常的方法有两种,第一通过js代码实现,第二通过css代码实现。
防止网站被复制的,基本的原理都是阻止用户选择文本,屏蔽鼠标右键等。这些操作都是复制内容的基本操作。比如要复制内容,就先要选择内容,如果没法选择内容了,复制就无从谈起。
css 防止网站内容被复制
通过css的方法比较简单,常用的代码是
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
这段代码的作用就是防止用户选择网站上的任何内容。
通过js防止网站的内容被复制
通过js防止网页被复制,一般都是放到标签body上, 因为网站的内容都是在body中。下面给出一个比较全的代码
<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
这里一共有三段代码下面就分别解释一下。
下面这段代码的作用是 禁止拖动元素, 这个对于防止复制作用不是很大。
ondragstart="window.event.returnValue=false"
下面这段代码的作用是 屏蔽鼠标的右键, 通过屏蔽鼠标右键达到防止复制的目的。
oncontextmenu="window.event.returnValue=false"
下面这段代码的作用是 禁止选中内容, 这个是最重要的防止复制的方法。
onselectstart="event.returnValue=false"
不过不方便在body上加标签页可以通过js代码
<script>
document.body.oncontextmenu=document.body.ondragstart= document.body.onselectstart=document.body.onbeforecopy=function(){
return false;
};
document.body.onselect=document.body.oncopy=document.body.onmouseup=function(){
document.selection.empty();
};
</script>