(网页)网站内容禁止复制(转)

转自笔记前端网:阿波罗D波

有时候的需求是网站中有些内容不希望别人复制,那么就需要用代码控制。方法有多种:

第一种方法:
加入以下js代码

<script type="text/javascript">
    // oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
    document.oncontextmenu=new Function("event.returnValue=false"); 
    // onselectstart几乎可以用于所有对象,其触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)
    document.onselectstart=new Function("event.returnValue=false"); 
</script>
<!DOCTYPE html>
<html lang="zh">
<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 class="container">
        <h1>火影忍者</h1>
        <p>
            十多年前一只拥有巨大威力的妖兽“九尾妖狐”袭击了木叶忍者村,当时的第四代火影拼尽全力,以自己的生命为代价将“九尾妖狐”封印在了刚出生的鸣人身上。木叶村终于恢复了平静,但村民们却把鸣人当成像“九尾妖狐”那样的怪物看待,所有人都疏远他。 鸣人自小就孤苦无依,一晃十多年过去了,少年鸣人考入了木叶村的忍者学校,结识了好朋友佐助和小樱。佐助是宇智波家族的传人之一,当他还是小孩的时候他的哥哥——一个已经拥有高超忍术的忍者将他们家族的人都杀死了,然后投靠了一直想将木叶村毁灭的大蛇丸,佐助自小就发誓要超越哥哥,为家族报仇。鸣人他们在忍者学校得到了教官卡卡西的精心指点,在他的帮助下去迎接成长中的一次又一次挑战! 
        </p>
    </div>
    
    <!-- 第一种方法:通过js代码实现 -->
    <script type="text/javascript">
        // oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
        document.oncontextmenu=new Function("event.returnValue=false"); 
        // onselectstart几乎可以用于所有对象,其触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)
        document.onselectstart=new Function("event.returnValue=false"); 
    </script>
</body>
</html>

第二种方法:
在<body>中加入以下代码:

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

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

第三种方法:
如果只限制复制,可以在<body>加入以下代码:
<body oncopy="alert('对不起,禁止复制!');return false;">
例子:

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

第四种方法:
禁用Ctrl+C和Ctrl+V,代码:

// 禁用Ctrl+C和Ctrl+V(所有浏览器均支持)
$(document).keydown(function(e) {
  if(e.ctrlKey && (e.keyCode == 86 || e.keyCode == 67)) {
    return false;
  }
});

例子:

<!DOCTYPE html>
<html lang="zh">
<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 class="container">
        <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>

 

原文地址:http://www.qdfuns.com/notes/23906/84dc93538bc897d609bf827277405c3c.html

posted on 2017-11-27 19:33  六一儿童节  阅读(210)  评论(0编辑  收藏  举报

导航