禁止用户打开HTML页面调试

【前言】

寒假在家追了几天剧，在一个小网站上看《还珠格格》时感到页面布局和兼容都十分不错，于是想查看下代码，没想到被屏蔽了。

之前有提到过过，今天又突然想到，这里介绍下如何禁止调试代码

【概论】

有些时候，我们可能想要禁止用户修改或者调试我们HTML页面的代码，这个时候需要组织用户打开调试窗口，下面介绍一些能够阻止用户在浏览器中打开调试窗口的方法，这些方法只能一定程度的提高打开调试的门槛，并不能完全杜绝。

【列表】

（1）禁用F12

（2）禁用右键

（3）禁用预先调试

【详解】

（1）禁用F12

对于使用F12打开调试窗口的方法，我们只要注册F12按键的处理方法，并阻止默认事件行为即可：

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
    // 判断是否按下F12，F12键码为123
    if (event.keyCode = 123) {
        event.preventDefault(); // 阻止默认事件行为
        window.event.returnValue = false;
    }
}

（2）禁用右键

对于使用右键菜单，在右键菜单里面选择查看源代码的行为，我们只要覆盖右键菜单点击事件的行为就即可：

// 为右键添加自定义事件，可以禁用
window.oncontextmenu = function() {
    event.preventDefault(); // 阻止默认事件行为
    return false;
}

（3）禁用预先调试

就算是同时禁用掉F12和右键，还有其他办法打开调试窗口，例如：

①提前打开调试窗口，然后在地址中输入网址，这样就算不用右键和F12也是打开调试窗口的；

②通过浏览器菜单打开开发者工具来开启调试窗口，还有诸如 shift+ctrl+i 的快捷键打开控制台

对于这种预先打开调试窗口的方法，我们可以通过比较屏幕 window.outerWidth 和页面可见内容区域 window.innerWidth 的差距判断是否打开控制台

var threshold = 160; // 打开控制台的宽或高阈值
// 每秒检查一次
window.setInterval(function() {
    if (window.outerWidth - window.innerWidth > threshold || 
    window.outerHeight - window.innerHeight > threshold) {
        // 如果打开控制台，则刷新页面
        window.location.reload();
    }
}, 1e3);

这种方法对于像IE8这种，打开调试窗口是在一个新的Windows窗口中，而不是在当前页面的下面或者上面的情况会失效。

【拓展】

（1）这里我用的是setInterval函数，关于setInterval（设置间隔）和setTimeout（设置超时），我在下篇文章做下区别和介绍

禁止用户打开HTML页面调试

猜你喜欢