禁止用戶打開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