复制提醒和右键菜单提醒

源码分享 · 05-11 16:56

继续给大家分享一个提高网站安全性的小技巧,包括复制提醒、禁用右键菜单和快捷键等功能。这种弹窗设计简洁、色彩搭配合适(也可自定义),既能提醒用户,又不会打扰浏览体验。

分享此方法的目的是为了让更多的友友能够使用到。当然也包括自己,也许以后自己琢磨(可能也会用到)。所以,避免源资源失效或者其他某些原因… 照葫芦画瓢,它来了!

具体操作

1.全局引入

在网站目录中引入以下代码:

<!-- 引入VUE -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/packages/theme-chalk/lib/index.css">

2.后面的代码均在全局引用 JS 的文件中添加。

代码实现

1.复制提醒

IMG_5642.webp
IMG_5644.webp

/* 复制提醒 */
document.addEventListener("copy",function(e){
    new Vue({
        data:function(){
            this.$notify({
                title:"嘿!复制成功",
                message:"若要转载请务必保留原文链接!爱你呦~",
                position: 'bottom-right',
                offset: 50,
                showClose: false,
                type:"success"
            });
            return{visible:false}
        }
    })
})

2.禁用右键菜单并提醒

IMG_5645.webp

/* 禁用右键菜单并提醒 */
document.oncontextmenu = function () {
new Vue({
    data:function(){
        this.$notify({
            title:"嘿!没有右键菜单",
            message:"复制请用键盘快捷键",
            position: 'bottom-right',
            offset: 50,
            showClose: false,
            type:"warning"
        });
        return{visible:false}
    }
})
return false;
}

3.禁用F12按键并提醒

IMG_5646.webp

/* 禁用F12按键并提醒 */
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
  event.keyCode = 0;
  event.returnValue = false;
    new Vue({
            data:function(){
                this.$notify({
                    title:"嘿!别瞎按",
                    message:"坏孩子!",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"error"
                });
                return{visible:false}
            }
        })
  return false;
}
};

4.禁用左键选择

IMG_5647.webp

//禁用复制
      document.oncopy = function () {
        return false;
     }

5.禁用Ctrl+Shift+I

IMG_5647.webp

//禁用Ctrl+Shift+I
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
          return false;
        }

此方法来自六月是只猫

完!

组件 优化 源码分享

上一篇 : 网页点击特效:显示文字

下一篇 : 如何限制IP访问网站


  1. 肖寒武   Lv1
    05-21 08:43 第6楼 中国浙江省杭州市联通Windows 10 · Google Chrome

    感觉实际意义不是很大

    1. 刘郎   博主
      05-21 08:45 第7楼 中国移动iPhone · Safari
      @肖寒武

      有人就喜欢搞这么花里胡哨的😂,但是我就比较喜欢简单一点

      1. 肖寒武   Lv1
        05-21 08:59 第8楼 中国浙江省杭州市联通Windows 10 · Google Chrome
        @刘郎

        我比较喜欢简约,可爱的哈哈哈

  2. 小A   访客
    05-13 23:43 第5楼 中国广东省深圳市电信Windows 10 · Google Chrome

    看到复制就想起了恶心的csdn

  3. 老罗   Lv2
    05-11 20:55 第3楼 中国广东省汕尾市移动Windows 10 · QQ Browser

    你还在坚持这个模板。。。刚一看胖子的模板换了,连程序都换了

    1. 刘郎   博主
      05-11 21:00 第4楼 中国移动iPhone · Safari
      @老罗

      因为简单,再者懒得换😂

  4. obaby   Lv2
    05-11 17:22 第1个脚印 中国山东省青岛市联通iPhone · Google Chrome

    你这产量,厉害了

    1. 刘郎   博主
      05-11 17:25 第2楼 中国贵州省移动iPhone · Safari
      @obaby

      遇到好的东西,要第一时间分享出来,不然下次打开时,可能就404、405……😂

| 黔ICP备2024020400号 | 萌ICP备20246777号 | | 当前有 2 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力