js禁止复制网站文章内容

小灰灰 2020-04-21 01:45 911阅读 0赞

# js禁止复制网站文章内容
有时候的需求是网站中有些内容不希望别人复制，那么就需要用代码控制。

**五种禁止别人复制网站内容或者文章：**

**第一种：**

```javascript
//屏蔽右键菜单 
document.oncontextmenu = function(event) {

if (window.event) {

event = window.event;

}

try {

var the = event.srcElement;

if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {

return false;

}

return true;

} catch(e) {

return false;

}

//屏蔽粘贴 
document.onpaste = function(event) {

if (window.event) {

event = window.event;

}

try {

var the = event.srcElement;

if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {

return false;

}

return true;

} catch(e) {

return false;

}

//屏蔽复制 
document.oncopy = function(event) {

if (window.event) {

event = window.event;

}

try {

var the = event.srcElement;

if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {

return false;

}

return true;

} catch(e) {

return false;

}

//屏蔽剪切 
document.oncut = function(event) {

if (window.event) {

event = window.event;

}

try {

var the = event.srcElement;

if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {

return false;

}

return true;

} catch(e) {

return false;

}

//屏蔽选中 
document.onselectstart = function(event) {

if (window.event) {

event = window.event;

}

try {

var the = event.srcElement;

if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {

return false;

}

return true;

} catch(e) {

return false;

}

}
```

**第二种方法：**

加入以下js代码

```html
< script type = "text/javascript" >
// oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
document.oncontextmenu = new Function("event.returnValue=false");
// onselectstart几乎可以用于所有对象，其触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）
document.onselectstart = new Function("event.returnValue=false");
< /script>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" / >
<style >

*{
    margin: 0;
    padding: 0;
}

.container h1 {
    color: gold;
    text - align: center;
    margin - bottom: 30px;
}

.container p {
    width: 500px;
    margin: 0 auto;
    color: purple;
    text - indent: 30px;
}

< /style>
</head >
<body >
<div >
<h1 > 火影忍者 < /h1>
<p>
十多年前一只拥有巨大威力的妖兽“九尾妖狐”袭击了木叶忍者村，当时的第四代火影拼尽全力，以自己的生命为代价将“九尾妖狐”封印在了刚出生的鸣人身上。木叶村终于恢复了平静，但村民们却把鸣人当成像“九尾妖狐”那样的怪物看待，所有人都疏远他。 鸣人自小就孤苦无依，一晃十多年过去了，少年鸣人考入了木叶村的忍者学校，结识了好朋友佐助和小樱。佐助是宇智波家族的传人之一，当他还是小孩的时候他的哥哥——一个已经拥有高超忍术的忍者将他们家族的人都杀死了，然后投靠了一直想将木叶村毁灭的大蛇丸，佐助自小就发誓要超越哥哥，为家族报仇。鸣人他们在忍者学校得到了教官卡卡西的精心指点，在他的帮助下去迎接成长中的一次又一次挑战！ 
</p >
</div>

<script type="text/javascript ">
// oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
document.oncontextmenu=new Function("event.returnValue = false "); 
// onselectstart几乎可以用于所有对象，其触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）
document.onselectstart=new Function("event.returnValue = false "); 
</script>
</body>
</html>"
```

**第三种方法：**

在`<body>`中加入以下代码：

```html
<body oncontextmenu="return false" onselectstart="return false"> 
或 
<body oncontextmenu="event.returnValue=false" onselectstart="event.returnValue=false">

body中加入代码的这种方法有个缺陷就是取决于body的内容，如果body内容较少，从body下方往上选中内容，仍然是可以复制网站的内容的。
```

**第四种方法：**

如果只限制复制，可以在`<body>`加入以下代码：

```html
< body oncopy = "alert('对不起，禁止复制！');return false;" >
例子：
< !DOCTYPE html >
<html >
<head >
<meta charset = "UTF-8" / >
<style >
*{
    margin: 0;
    padding: 0;
}
.container h1 {
    color: gold;
    text - align: center;
    margin - bottom: 30px;
}
.container p {
    width: 500px;
    margin: 0 auto;
    color: purple;
    text - indent: 30px;
}
< /style>
</head >
<body oncopy = "alert('对不起，禁止复制！');return false;" >
<div >
<h1 > 火影忍者 < /h1>
<p>
十多年前一只拥有巨大威力的妖兽“九尾妖狐”袭击了木叶忍者村，当时的第四代火影拼尽全力，以自己的生命为代价将“九尾妖狐”封印在了刚出生的鸣人身上。木叶村终于恢复了平静，但村民们却把鸣人当成像“九尾妖狐”那样的怪物看待，所有人都疏远他。 鸣人自小就孤苦无依，一晃十多年过去了，少年鸣人考入了木叶村的忍者学校，结识了好朋友佐助和小樱。佐助是宇智波家族的传人之一，当他还是小孩的时候他的哥哥——一个已经拥有高超忍术的忍者将他们家族的人都杀死了，然后投靠了一直想将木叶村毁灭的大蛇丸，佐助自小就发誓要超越哥哥，为家族报仇。鸣人他们在忍者学校得到了教官卡卡西的精心指点，在他的帮助下去迎接成长中的一次又一次挑战！ 
</p >
</div>
</body >
</html>/
```

**第五种方法：**

禁用Ctrl+C和Ctrl+V，代码：

```html
// 禁用Ctrl+C和Ctrl+V（所有浏览器均支持）
$(document).keydown(function(e) {
    if (e.ctrlKey && (e.keyCode == 86 || e.keyCode == 67)) {
        return false;
    }
});
例子
< !DOCTYPE html >
<html >
<head >
<meta charset = "UTF-8" / >
<style >
*{
    margin: 0;
    padding: 0;
}
.container h1 {
    color: gold;
    text - align: center;
    margin - bottom: 30px;
}
.container p {
    width: 500px;
    margin: 0 auto;
    color: purple;
    text - indent: 30px;
}
< /style>
</head >
<body >
<div >
<h1 > 火影忍者 < /h1>
<p>
十多年前一只拥有巨大威力的妖兽“九尾妖狐”袭击了木叶忍者村，当时的第四代火影拼尽全力，以自己的生命为代价将“九尾妖狐”封印在了刚出生的鸣人身上。木叶村终于恢复了平静，但村民们却把鸣人当成像“九尾妖狐”那样的怪物看待，所有人都疏远他。 鸣人自小就孤苦无依，一晃十多年过去了，少年鸣人考入了木叶村的忍者学校，结识了好朋友佐助和小樱。佐助是宇智波家族的传人之一，当他还是小孩的时候他的哥哥——一个已经拥有高超忍术的忍者将他们家族的人都杀死了，然后投靠了一直想将木叶村毁灭的大蛇丸，佐助自小就发誓要超越哥哥，为家族报仇。鸣人他们在忍者学校得到了教官卡卡西的精心指点，在他的帮助下去迎接成长中的一次又一次挑战！ 
</p >
</div>
<script src="http:/ / libs.baidu.com / jquery / 2.1.1 / jquery.min.js "></script>
<script>
$(document).keydown(function(e) {
 if(e.ctrlKey && (e.keyCode == 86 || e.keyCode == 67)) {
 alert('不能Ctrl+C和Ctrl+V复制、粘贴');
   return false;
 }
});
</script>
</body>
</html>
```