网页防复制代码的常用方法(css,js)总结

首先说明,没有真正意义的防止复制网站内容的方法。这里说的网页防复制代码,是人为的添加一些代码,给复制网站内容提高些门槛。通常的方法有两种,第一通过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>

发表评论

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