技术宅

当前位置:首页 > 网站教程 > 代码学习

代码学习

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

时间:10-08 作者:
全为前端代码,把以下代码片段加入js中即可 <script></script>,或引入
方法一:
可以有效禁止F12和右击(单击浏览器设置里 开发者-审查元素 无法禁止) <script> //屏蔽F12和右键 f
全为前端代码,把以下代码片段加入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.  
  22. document.onkeydown = document.onkeyup = document.onkeypress = function () {
  23. if (window.event.keyCode == 123) {
  24. window.event.returnValue = false;
  25. return (false);
  26. }
  27. }
  28. </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在加载自己的网页时,虽然也及时关闭,但在响应里还是可以看到流量包。