首页 前端知识 网页禁止右键 禁止F12 JavaScript禁止F12 禁止右键菜单 包含 js、Jquery、Vue

网页禁止右键 禁止F12 JavaScript禁止F12 禁止右键菜单 包含 js、Jquery、Vue

2024-06-08 22:06:06 前端知识 前端哥 725 952 我要收藏

网页禁止右键 禁止F12 Jquery禁止F12 禁止右键菜单 包含 Jquery、Vue

  • 网页禁止右键 禁止F12 JavaScript禁止F12 禁止右键菜单 js
    • JavaScript 中
    • Jquery 中
    • Vue 中

这样设置通常是出于安全性或保护内容的目的,不想让别人看到源代码等信息

网页禁止右键 禁止F12 JavaScript禁止F12 禁止右键菜单 js

JavaScript 中

<script>
// 禁止右键
document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

// 禁止F12快捷键
document.onkeydown = function (e) {
    if (e.which === 123 || e.key === "F12"  || e.key === "Inspect") {
        e.preventDefault();
    }
};
<script>

Jquery 中


<script>
		debugger
        function checkForDevTools() {
            // 创建一个元素并尝试调用 `console.log`,如果开发者工具打开,将返回 false
            const element = new Image();
            element.__defineGetter__('id', function () {
                // 开发者工具已打开,关闭当前页面
                window.close();
            });
            window.close();
            console.clear(); // 清除控制台,以隐藏上面的消息
            console.log(element);
        }

        $(document).ready(function () {
            checkForDevTools();
        });
</script>

<script>
        // 禁止右键菜单
        $(document).on('contextmenu', function (e) {
            e.preventDefault();
        });

        // 禁止F12
        $(document).on('keydown', function (e) {
             if (e.which === 123 || e.key === "F12" || e.key === "Inspect") {
                 e.preventDefault();
             }
        });
</script>

Vue 中

将禁止右键和禁止F12键的逻辑放在mounted生命周期钩子中,以确保它们在组件加载后生效。

<template>
  <div>
    <p>这是一个示例页面。</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 禁止右键菜单
    document.addEventListener('contextmenu', (e) => {
      e.preventDefault();
    });

    // 禁止F12键
    document.onkeydown = (e) => {
      if (e.which === 123 || e.key === "F12" || e.key === "Inspect") {
        e.preventDefault();
      }
    };
  },
};
</script>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11527.html
标签
评论
发布的文章

小米商城

2024-06-16 15:06:28

JSON转日期,变为数字串

2024-06-16 09:06:45

使用axios读取本地json文件

2024-06-16 09:06:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!