如何在网页中禁用右键菜单及开发者工具

棒棒的唐

已于 2024-05-23 15:30:09 修改

阅读量438

点赞数 3

文章标签：前端 javascript html

于 2024-05-17 09:23:02 首次发布

如非本人授权，请勿转载

本文链接：https://blog.csdn.net/gianttj/article/details/138992541

版权

如何在网页中禁用右键菜单及开发者工具？

这是一篇纯技术研究的文章，目前我还没有什么样的项目需要禁用开发者工具，也不知道这样做的价值所在。

起因是偶然间看到一个不起眼的网站，居然禁用了右键菜单功能和开发者工具。恕直言，从技术角度，仅对浏览器的一些工具进行屏蔽，对于专业选手来说并没有实际用处。

话不多说，不能再跑题了，直接上代码，给有需要的伙伴分享这个“高级”又有趣的功能。

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2024-05-16 21:59:46
-->
<html>

<head>
    <title>禁用开发者工具</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script type="text/javascript">
        // onkeydown 

        // 禁用右键菜单
        // document.oncontextmenu = function () {
        //     return false
        // }

        // addEventListener
        // 禁用右键菜单
        document.addEventListener('contextmenu', function (e) {
            var target = event.target;
            if (target.classList.contains('allow-right-click')) {
                return; // 不执行preventDefault，允许右键菜单，便于对特定控件开启
            }
            else {
                e.preventDefault();  // 阻止默认事件
            }
        });

        // 禁止键盘F12键
        // document.onkeydown = function (e) {
        //     if (e.keyCode == 123) { //如果按下键F12,阻止事件
        //         return false
        //     }
        // }

        // 禁止键盘F12键和Ctrl+Shift+I组合键
        document.addEventListener('keydown', function (e) {
            const keyCombination = `${event.ctrlKey ? 'Ctrl+' : ''}${event.shiftKey ? 'Shift+' : ''}${event.key}`;

            // 执行相应操作
            if (e.key == 'F12' || keyCombination == "Ctrl+Shift+I") {
                e.preventDefault(); // 如果按下键F12,阻止事件
            }
        });

        //禁用调试工具（）
        var threshold = 160; // 打开控制台的宽或高阈值, 每秒检查一次;
        var check = setInterval(function () {
            if (
                window.outerWidth - window.innerWidth > threshold ||
                window.outerHeight - window.innerHeight > threshold
            ) {
                // 如果打开控制台，则跳转页面
                window.location.replace("about:blank");
                // 关闭当前页面
                self.opener = null;
                self.close();
            }
        }, 1000);
    </script>
</head>

<body>
    <h1 style="text-align: center;margin: 20px;">这是一个测试禁用右键菜单及开发者调试工具的试验页面</h1>
    <div style="text-align: center;margin: 20px;">
        <div style="margin: 20px; color: orangered; text-decoration: underline;text-underline-offset: 5px;">
            <div style="width:300px; background-color:bisque; text-align: center; margin-left: calc(50% - 150px);padding: 5px; padding-bottom: 10px;"
                class="allow-right-click">
                这里是可以使用右键菜单的</div>
        </div>
        <div style="text-align: center;margin: 20px;">下面的输入框也是可以使用右键菜单的</div>
        <div>
            <form>
                输入框：<input class="allow-right-click"
                    style="border: 1px solid green; background-color:beige;width:350px; height: 40px; border-radius: 5px; padding: 10px;" />
                <button
                    style="color:white; border: 1px solid gray; background-color:darkcyan;width:50px; height: 40px; border-radius: 5px; ">搜索</button>
            </form>
        </div>
    </div>
</body>

</html>

效果图

在这里插入图片描述

福利

分享一个用vue2编写的自定义右键菜单代码

<template>
  <div @contextmenu.prevent="openContextMenu" @click="closeContextMenu">
    <!-- 你的内容 -->
    <div
      v-show="showMenu"
      class="custom-menu"
      ref="contentMenu"
      :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }"
    >
      <ul>
        <li @click="menuItemCopy()">复制(C)</li>
        <li @click="menuItemPrint()">打印内容(P)</li>
      </ul>
    </div>
    <div class="page-content" ref="pageContent" id="printSection">
      这是一篇禁用浏览器默认右键菜单的技术性文章，以实现一个自定义右键菜单为例。<br />
      点击右键，菜单将会在当前鼠标附近显示，点击菜单中的项，触发对应的方法。点击左键，隐藏右键菜单。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      // 定义菜单的位置
      menuPosition: { x: 0, y: 0 },
      currClipBoard: null,
    };
  },
  methods: {
    openContextMenu(event) {
      // 阻止默认的右键菜单
      event.preventDefault();
      // 设置菜单的位置并显示
      this.setMenuPosition(event);
      this.showMenu = true;
    },
    closeContextMenu(event) {
      //点左键关蔽菜单
      //   console.log(event);
      if (event.clientX || event.clientY) {
        this.showMenu = false;
      }
    },
    setMenuPosition(event) {
      const menuWidth =
        this.$refs.contentMenu.offsetWidth > 0
          ? this.$refs.contentMenu.offsetWidth + 20
          : 150;
      const menuHeight =
        this.$refs.contentMenu.offsetHeight > 0
          ? this.$refs.contentMenu.offsetHeight + 10
          : 150;
      const right = document.documentElement.clientWidth;
      const left = event.clientX;
      this.menuPosition.x = left;
      this.menuPosition.x = right - menuWidth > left ? left : right - menuWidth;

      const bottom = document.documentElement.clientHeight;
      const top = event.clientY;
      this.menuPosition.y = top;
      this.menuPosition.y = bottom - menuHeight > top ? top : bottom - menuHeight;

      //   console.log(menuWidth, menuHeight);
      this.currClipBoard = this.getSelectedText();
    },
    menuItemClicked(action) {
      // 根据点击的菜单项执行不同的操作
      this.showMenu = false;
      console.log("点击菜单项:", action);
    },
    menuItemCopy() {
      this.showMenu = false;
      this.copyToClipboard(this.currClipBoard);
    },
    menuItemPrint() {
      let innerHtml = this.$refs.pageContent.innerHTML;
      console.log(innerHtml);
      this.showMenu = false;
      var printWindow = window.open("", "_blank");
      printWindow.document.write("<html><title>Print</title>");
      printWindow.document.write("<body>");
      printWindow.document.write(innerHtml);
      printWindow.document.write("</body></html>");
      printWindow.document.close();
      printWindow.print();
      // window.print();
    },
    getSelectedText() {
      let selectedText = "";
      if (window.getSelection) {
        selectedText = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
        selectedText = document.selection.createRange().text;
      }
      return selectedText;
    },
    async copyToClipboard(text) {
      try {
        await navigator.clipboard.writeText(text);
        // console.log("复制成功");
      } catch (err) {
        console.error("复制失败", err);
      }
    },
  },
};
</script>

<style lang="scss">
@media print {
  body > :not(#printSection) {
    display: none;
  }
}
.page-content {
  height: 500px;
  width: 100%;
}
.custom-menu {
  font-size: 12px;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  list-style-type: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
  ul {
    padding-left: 0px;
    text-align: left;
    li {
      list-style-type: circle;
      list-style-position: inside;
      cursor: default;
      padding: 5px 10px;
    }
    li:hover {
      background-color: #eee;
    }
  }
}
</style>

棒棒的唐

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
如何在网页中禁用右键菜单及开发者工具

如何在网页中禁用右键菜单及开发者工具？这是一篇纯技术研究的文章，目前我还没有什么样的项目需要禁用开发者工具，也不知道这样做的价值所在。起因是偶然间看到一个不起眼的网站，居然禁用了右键菜单功能和开发者工具。恕直言，从技术角度，仅对浏览器的一些工具进行屏蔽，对于专业选手来说并没有实际用处。话不多说，不能再跑题了，直接上代码，给有需要的伙伴分享这个“高级”又有趣的功能。效果图分享一个用vue2编写的自定义右键菜单代码
复制链接

扫一扫