LV02-NexT-06-网页禁止F12

发表于 2024-03-29 分类于博客搭建本文字数： 2k 阅读时长 ≈ 7 分钟

本文主要是如何禁止右键和F12的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。

点击查看使用工具及版本

Windows	windows11
Ubuntu	Ubuntu16.04的64位版本
VMware® Workstation 16 Pro	16.2.3 build-19376536

点击查看本文参考资料

分类	网址	说明
---	---	---

点击查看相关文件下载

---

我们知道在浏览器【右键】→【检查】或者直接按F12就可以打开网页源代码进行调试，那我们要是不想让别人看我们网页的源代码呢？

一、实现方式

1. 方式一

$(function(){
		$(document).bind("contextmenu", function () {
			return false; 
		});//禁止右键
		document.oncontextmenu = function () {
			return false; 
		};
		document.onkeydown = function () {
		    if (window.event && window.event.keyCode == 123) {
		        event.keyCode = 0;
		        event.returnValue = false;
		        return false;
		    }
		};//禁止F12
	})

2. 方式二

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

这段代码有个问题，就是它禁止所有的键盘敲击事件，也就意味着我们无法使用Ctrl+c或者输入某些内容（例如文章加密需要输入密码查看？）

3. 方式三

<script type="text/javascript">
	//禁用右键（防止右键查看源代码） 
    window.oncontextmenu=function(){return false;} 
    //禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具） 
    window.onkeydown = window.onkeyup = window.onkeypress = function () { 
        //alert(window.event.keyCode);
        if(event.ctrlKey && event.shiftKey && window.event.keyCode == 73){
            //alert("Ctrl+Shift+i被禁用");
            window.event.returnValue = false; 
            return false; 
        }
        if(window.event.keyCode == 123) {
            //alert("F12被禁用");
            window.event.returnValue = false; 
            return false; 
        }  

    } 
    //如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面 
    var h = window.innerHeight,w=window.innerWidth; 
    window.onresize = function () { 
        if (h!= window.innerHeight||w!=window.innerWidth){ 
            window.close(); 
            window.location = "about:blank"; 
        } 
    }
</script>

点击查看 Keycode 对照表

字母和数字键的键码值(keyCode)

字母和数字键的键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

小键盘与功能键

数字键盘上的键的键码值(keyCode)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

这种根据窗口大小变化来关闭页面的方法会导致手机端无法滑动，滑动或者操作会被判定为改变分辨率造成强制关闭网页的情况。那怎么解决呢？我们可以判断一下是否在手机端，若是在手机端，那就一般是打不开控制台的，所以不需要考虑跳转空网页的操作。

点击查看修改后的代码内容

{% if theme.browser_tools %}
    <script type="text/javascript">
        //禁用右键（防止右键查看源代码） 
        window.oncontextmenu=function(){return false;} 
        //禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具） 
        window.onkeydown = window.onkeyup = window.onkeypress = function () { 
            //alert(window.event.keyCode);
            if(event.ctrlKey && event.shiftKey && window.event.keyCode == 73){
                //alert("Ctrl+Shift+i被禁用");
                window.event.returnValue = false; 
                return false; 
            }
            if(window.event.keyCode == 123) {
                //alert("F12被禁用");
                window.event.returnValue = false; 
                return false; 
            }  

        } 
        //判断是手机端还是PC端
	    console.log(navigator.userAgent);
	    var os = function (){
		    var ua = navigator.userAgent,
		    isWindowsPhone = /(?:Windows Phone)/.test(ua),
		    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
		    isAndroid = /(?:Android)/.test(ua),
		    isFireFox = /(?:Firefox)/.test(ua),
		    isChrome = /(?:Chrome|CriOS)/.test(ua),
		    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
		    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
		    isPc = !isPhone && !isAndroid && !isSymbian;
		    return {
			    isTablet: isTablet,
			    isPhone: isPhone,
			    isAndroid: isAndroid,
			    isPc: isPc
		    };
	    }();

	    if(os.isPc) {
		    //如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面 
		    var h = window.innerHeight,w=window.innerWidth; 
		    window.onresize = function () { 
			     //console.log("h %d,w %d", window.innerHeight,window.innerWidth)；
                 if (h!= window.innerHeight||w!=window.innerWidth){ 
                        window.close(); 
                        window.location = "about:blank"; 
                 } 
		    }
	     }
    </script>
{% endif %}

二、如何解禁？

其实上面两种方式是挡不住真正的前端大佬的，有下面的几种方式依然可以打开。

1. view-source

view-source 是一种查看代码源的协议。通常在网址前加上前缀“view-source：”即可获取该网页的源代码。但是，并非所有网站都支持这种协议。例如现在要查看百度主页的源码，我们可以直接在地址栏输入下面的内容：

1	view-source:https://www.baidu.com

2. 提前按F12

在打开被禁止的页面前，我们找一个能打开调试控制台的页面，直接按下F12打开调试页面，然后再打开被禁止的页面。

3. 地址栏

鼠标点击一下地址栏，然后再按F12也可以打开被禁止右键和F12的页面的调试页面。