阻止别人随便查看或调试网页源码
要保护网页代码或核心逻辑,之前那些 “禁用右键、拦 F12” 的方法都只是 “表面功夫”—— 懂行的人很容易绕过去。真正更有效的保护,核心思路是 “让代码难读懂”“让敏感逻辑不在前端暴露”。
1. 精准区分设备类型(手机 / 电脑)
2. 限制调试相关的快捷键
3. 合理限制右键菜单
4. 智能检测窗口异常变化(仅电脑端)
总结
<!-- 自定义代码 -->
<script type="text/javascript">
// 【兼容核心】1. 工具函数:统一获取窗口尺寸(适配现代浏览器+旧IE)
function getWindowSize() {
var width, height;
if (window.innerWidth) {
// 现代浏览器(Chrome/Firefox/Safari/Edge)
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientWidth) {
// 旧IE标准模式(IE8+)
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
// 旧IE怪异模式(兜底)
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return { width: width, height: height };
}
// 【兼容核心】2. 工具函数:统一绑定事件(适配addEventListener/attachEvent)
function addEvent(element, event, handler) {
if (element.addEventListener) {
// 现代浏览器
element.addEventListener(event, handler);
} else if (element.attachEvent) {
// 旧IE(IE8及以下,需加"on"前缀)
element.attachEvent('on' + event, handler);
} else {
// 极端情况兜底(避免事件覆盖)
element['on' + event] = handler;
}
}
// 3. 优化手机端判断(兼容UA+设备平台,减少新设备误判)
function is_mobile() {
// 先通过屏幕宽度初步判断(手机多<768px)
var size = getWindowSize();
if (size.width < 768) {
return true;
}
// 再结合UA+设备平台精准匹配(覆盖新手机型号)
var u = navigator.userAgent || "";
var platform = navigator.platform || ""; // 补充设备平台(如iPhone/Android)
var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
// 同时匹配UA和平台,减少误判
return regex_match.test(u) || regex_match.test(platform);
}
// 4. 合并并补全键盘限制(兼容不同浏览器事件/键码)
addEvent(document, 'keydown', function(e) {
e = e || window.event; // 兼容事件对象获取
var keyCode = e.keyCode || e.which; // 兼容键码获取(部分浏览器用e.which)
// 兼容组合键判断(旧IE不支持getModifierState,优先用原生属性)
var isCtrl = e.ctrlKey || (e.getModifierState && e.getModifierState('Control'));
var isShift = e.shiftKey || (e.getModifierState && e.getModifierState('Shift'));
// 禁止F12(打开开发者工具)
if (keyCode === 123) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false); // 兼容阻止默认行为
return false;
}
// 禁止Ctrl+U(查看源码)、Ctrl+S(保存网页)
if (isCtrl && (keyCode === 85 || keyCode === 83)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}
// 禁止Ctrl+Shift+I(开发者工具)、Ctrl+Shift+J(控制台)
if (isCtrl && isShift && (keyCode === 73 || keyCode === 74)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}
// 禁止Shift+F10(模拟右键菜单)
if (isShift && keyCode === 121) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}
});
// 5. 优化右键限制(兼容事件目标获取,保留正常操作)
addEvent(window, 'contextmenu', function(e) {
e = e || window.event;
var target = e.target || e.srcElement; // 兼容事件目标(旧IE用e.srcElement)
// 允许文本输入框、文本域、可编辑区域右键(正常复制/粘贴)
var allowRightClick =
target.tagName === 'INPUT' ||
target.tagName === 'TEXTAREA' ||
(target.isContentEditable && target.isContentEditable === 'true'); // 兼容可编辑属性判断
// 允许区域正常显示右键,其他区域禁用
if (!allowRightClick) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}
return true;
});
// 6. 优化窗口变化检测(仅电脑端,兼容尺寸获取+延迟判断)
if (!is_mobile()) {
var size = getWindowSize();
var originHeight = size.height; // 初始高度(兼容获取方式)
var originWidth = size.width; // 初始宽度
var resizeTimer = null; // 延迟计时器(避免频繁触发)
addEvent(window, 'resize', function() {
clearTimeout(resizeTimer); // 清除上一次延迟
// 300ms延迟判断(给正常调整窗口的时间)
resizeTimer = setTimeout(function() {
var currentSize = getWindowSize();
// 尺寸变化超过10px才提示(排除微小波动)
if (
Math.abs(currentSize.height - originHeight) > 10 ||
Math.abs(currentSize.width - originWidth) > 10
) {
alert('检测到窗口尺寸异常变化,可能存在调试行为');
// 更新初始尺寸(避免后续正常调整重复提示)
originHeight = currentSize.height;
originWidth = currentSize.width;
}
}, 300);
});
}
</script>
<style>
/* 此处保留原样式区域,若无需额外样式可空着,也可根据需求添加页面样式 */
</style>
<!-- end 自定义代码 -->
一、优化方向说明
二、进一步优化后的代码
<script type="text/javascript">
// ==================== 配置参数(可按需修改) ====================
const config = {
mobileMaxWidth: 768, // 手机端最大宽度(超过此值视为电脑端)
resizeDelay: 300, // 窗口变化检测延迟(毫秒)
sizeChangeThreshold: 15, // 触发提示的尺寸变化阈值(像素,增大减少误判)
enableKeyboardLimit: true, // 是否启用键盘快捷键限制
enableRightClickLimit: true, // 是否启用右键限制
enableResizeCheck: true // 是否启用窗口变化检测
};
// ==================== 工具函数(复用逻辑) ====================
// 1. 获取窗口尺寸(兼容所有浏览器)
function getWindowSize() {
if (window.innerWidth) {
return { width: window.innerWidth, height: window.innerHeight };
}
const doc = document.documentElement || document.body;
return { width: doc.clientWidth, height: doc.clientHeight };
}
// 2. 绑定事件(兼容现代浏览器和旧IE)
function addEvent(el, event, handler) {
if (el.addEventListener) el.addEventListener(event, handler);
else if (el.attachEvent) el.attachEvent('on' + event, handler);
else el['on' + event] = handler;
}
// 3. 阻止默认事件(兼容所有浏览器)
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
return false;
}
// ==================== 核心功能(模块化) ====================
// 1. 判断设备类型(手机/电脑)
function isMobile() {
const { width } = getWindowSize();
if (width <= config.mobileMaxWidth) return true;
const u = navigator.userAgent || '';
const platform = navigator.platform || '';
const mobileRegex = /(nokia|iphone|android|motorola|huawei|samsung|xiaomi|oppo|vivo|blackberry|phone|mobile)/i;
return mobileRegex.test(u) || mobileRegex.test(platform);
}
// 2. 键盘快捷键限制(可通过config开关)
function setupKeyboardLimit() {
if (!config.enableKeyboardLimit) return;
addEvent(document, 'keydown', (e) => {
e = e || window.event;
const keyCode = e.keyCode || e.which;
const isCtrl = e.ctrlKey || (e.getModifierState && e.getModifierState('Control'));
const isShift = e.shiftKey || (e.getModifierState && e.getModifierState('Shift'));
// 禁止F12、Ctrl+U、Ctrl+S、Ctrl+Shift+I/J、Shift+F10
const isRestricted =
keyCode === 123 || // F12
(isCtrl && (keyCode === 85 || keyCode === 83)) || // Ctrl+U/S
(isCtrl && isShift && (keyCode === 73 || keyCode === 74)) || // Ctrl+Shift+I/J
(isShift && keyCode === 121); // Shift+F10
if (isRestricted) return preventDefault(e);
});
}
// 3. 右键菜单限制(可通过config开关)
function setupRightClickLimit() {
if (!config.enableRightClickLimit) return;
addEvent(window, 'contextmenu', (e) => {
e = e || window.event;
const target = e.target || e.srcElement;
// 允许右键的区域:输入框、文本域、可编辑区域
const allow =
target.tagName === 'INPUT' ||
target.tagName === 'TEXTAREA' ||
(target.isContentEditable && target.isContentEditable === 'true');
if (!allow) return preventDefault(e);
return true;
});
}
// 4. 窗口变化检测(仅电脑端,可通过config开关)
function setupResizeCheck() {
if (!config.enableResizeCheck || isMobile()) return;
let { width: originWidth, height: originHeight } = getWindowSize();
let resizeTimer = null;
addEvent(window, 'resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const { width: currentWidth, height: currentHeight } = getWindowSize();
// 排除浏览器缩放导致的尺寸变化(缩放时宽高同比变化)
const scaleX = currentWidth / originWidth;
const scaleY = currentHeight / originHeight;
const isScaling = Math.abs(scaleX - scaleY) < 0.01; // 缩放时宽高比例接近
if (!isScaling && (
Math.abs(currentWidth - originWidth) > config.sizeChangeThreshold ||
Math.abs(currentHeight - originHeight) > config.sizeChangeThreshold
)) {
alert('检测到窗口异常变化,可能存在调试行为');
originWidth = currentWidth;
originHeight = currentHeight;
}
}, config.resizeDelay);
});
}
// ==================== 初始化(启动所有功能) ====================
function init() {
setupKeyboardLimit();
setupRightClickLimit();
setupResizeCheck();
}
// 页面加载完成后初始化(避免DOM未就绪导致的问题)
addEvent(window, 'load', init);
</script>
空空如也!