禁止用戶打開HTML頁面調試

有些時候，咱們可能想要禁止用戶修改或者調試咱們HTML頁面的代碼，這個時候須要組織用戶打開調試窗口，下面介紹一些可以阻止用戶在瀏覽器中打開調試窗口的方法，這些方法只能必定程度的提升打開調試的門檻，並不能徹底杜絕。

禁用F12

對於使用F12打開調試窗口的方法，咱們只要註冊F12按鍵的處理方法，並阻止默認事件行爲便可：

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
    // 判斷是否按下F12，F12鍵碼爲123
    if (event.keyCode === 123) {
        event.preventDefault(); // 阻止默認事件行爲
        window.event.returnValue = false;
    }
}

禁用右鍵

對於使用右鍵菜單，在右鍵菜單裏面選擇查看源代碼的行爲，咱們只要覆蓋右鍵菜單點擊事件的行爲就便可：

// 爲右鍵添加自定義事件，能夠禁用
window.oncontextmenu = function() {
    event.preventDefault(); // 阻止默認事件行爲
    return false;
}

禁用預先調試

就算是同時禁用掉F12和右鍵，用戶仍是能夠提早打開調試窗口，而後在地址中輸入網址，這樣就算不用右鍵和F12也是打開調試窗口的。

另外用戶也能夠經過瀏覽器菜單打開開發者工具來開啓調試窗口，還有諸如 shift+ctrl+i 的快捷鍵打開控制檯。

對於這種預先打開調試窗口的方法，咱們能夠經過比較屏幕 window.outerWidth 和頁面可見內容區域 window.innerWidth 的差距判斷是否打開控制檯。

var threshold = 160; // 打開控制檯的寬或高閾值
// 每秒檢查一次
setInternet(function() {
    if (window.outerWidth - window.innerWidth > threshold || 
    window.outerHeight - window.innerHeight > threshold) {
        // 若是打開控制檯，則刷新頁面
        window.location.reload();
    }
}, 1e3);

這種方法對於像IE8這種，打開調試窗口是在一個新的Windows窗口中，而不是在當前頁面的下面或者上面的狀況會失效。

原文地址：http://uusama.com/543.html