HTML屏蔽F12、右键、开发者工具、审查元素


全为前端代码,把以下代码片段加入js中即可 <script></script>,或引入
方法一:
可以有效禁止F12和右击(单击浏览器设置里 开发者-审查元素 无法禁止)

  1. <script>
  2. //屏蔽F12和右键
  3. function click(e) {
  4. if (document.all) {
  5. if (event.button == 2 || event.button == 3) {
  6. alert("欢迎光临寒舍!!");
  7. oncontextmenu = 'return false';
  8. }
  9. }
  10. if (document.layers) {
  11. if (e.which == 3) {
  12. oncontextmenu = 'return false';
  13. }
  14. }
  15. }
  16. if (document.layers) {
  17. document.captureEvents(Event.MOUSEDOWN);
  18. }
  19. document.onmousedown = click;
  20. document.oncontextmenu = new Function("return false;")
  21. document.onkeydown = document.onkeyup = document.onkeypress = function () {
  22. if (window.event.keyCode == 123) {
  23. window.event.returnValue = false;
  24. return (false);
  25. }
  26. }
  27. </script>

方法二:
可以有效禁止F12和右击、审查元素----设置中强行打开开发者会直接关闭网页。

  1. <script>
  2. //禁用右键(防止右键查看源代码)
  3. window.oncontextmenu = function () { return false; }
  4. //禁止任何键盘敲击事件(防止F12和shift+ctrl+i调起开发者工具)
  5. window.onkeydown = window.onkeyup = window.onkeypress = function () {
  6. window.event.returnValue = false;
  7. return false;
  8. }
  9. //如果用户在工具栏调起开发者工具,那么判断浏览器的可视高度和可视宽度是否有改变,如有改变则关闭本页面
  10. var h = window.innerHeight, w = window.innerWidth;
  11. window.onresize = function () {
  12. if (h != window.innerHeight || w != window.innerWidth) {
  13. window.close();
  14. window.location = "about:blank";
  15. }
  16. }
  17. </script>

在demo阶段发现两个问题:
方法会导致手机端无法滑动,滑动或者操作会被判定为改变分辨率造成强制关闭网页的情况。
在别的页面打开F12在加载自己的网页时,虽然也及时关闭,但在响应里还是可以看到流量包。
方法三:
该方法有效禁止F12,强行打开会重定向到自己定义的页面去,可以直接引入js,或者你下载放自己服务器上

  1. <script src="https://www.58soho.cn/js/console-ban.min.js"></script>
  2. //引用方法
  3. <script>
  4. // default options
  5. ConsoleBan.init()
  6. // custom options
  7. ConsoleBan.init({
  8. redirect: 'https://www.58soho.cn/404.html'
  9. })
  10. </script>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
F12开发工具是一款内置在现代浏览器中的调试工具,它提供了许多有用的功能,可以帮助开发人员进行网页开发和调试。以下是一个简单的F12开发工具教程: 1. 打开F12开发工具: - 在大多数浏览器中,你可以使用快捷F12来打开开发工具。 - 在Chrome浏览器中,你还可以通过点击页面,然后选择“检查”来打开开发工具。 2. 导航面板: - 开发工具通常由不同的面板组成,例如元素、网络、控制台等。 - 你可以使用选项卡或快捷在这些面板之间进行导航。 3. 元素面板: - 元素面板显示了当前页面的HTML结构。 - 你可以通过在页面上选择元素来查看和编辑其相关的CSS和属性。 - 这对于调试和修改页面布局非常有用。 4. 网络面板: - 网络面板显示了当前页面加载的所有网络请求。 - 你可以查看请求的详细信息,包括请求头、响应内容和加载时间等。 - 这对于优化网页加载速度和调试AJAX请求非常有用。 5. 控制台面板: - 控制台面板用于显示网页的JavaScript日志、错误和调试信息。 - 你可以在控制台中执行JavaScript代码,以及查看输出结果。 - 这对于调试JavaScript代码和查找错误非常有用。 6. 其他功能: - F12开发工具还提供了许多其他有用的功能,例如调试器、性能分析器、应用程序存储等。 - 你可以根据需要探索这些功能,并根据具体情况使用它们。 请注意,不同的浏览器可能会有略微不同的界面和功能。这只是一个基本的教程,你可以根据自己的需求和浏览器来进一步学习和掌握F12开发工具的使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

www_58soho

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值