浏览器禁止打开F12控制台

最新推荐文章于 2025-03-23 11:24:08 发布

梦逝忘尘

最新推荐文章于 2025-03-23 11:24:08 发布

阅读量2.7k

点赞数 1

分类专栏：前端文章标签： xhtml javascript html

本文链接：https://blog.youkuaiyun.com/Wxin0721/article/details/125295505

版权

前端专栏收录该内容

8 篇文章

订阅专栏

该博客主要展示了如何通过JavaScript禁止网页内容选中、右键菜单、键盘事件及开发者工具的使用，以防止网页被用户恶意修改。同时，当检测到页面元素变动时，会自动刷新页面，确保网页内容不被篡改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style type="text/css">
			/*禁止选中文字*/
			body {
				-moz-user-select: none;
				/*火狐*/
				-webkit-user-select: none;
				/*webkit浏览器*/
				-ms-user-select: none;
				/*IE10*/
				-khtml-user-select: none;
				/*早期浏览器*/
				user-select: none;
			}
		</style>
	</head>

	<body>
		<p>Test</p>
		<script>
			//禁用右键（防止右键查看源代码） 
			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 = "w";
				}
			}
			/*好吧，你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度， 但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素（不支持IE9以下浏览器）*/
			if (window.addEventListener) {
				window.addEventListener("DOMCharacterDataModified", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMAttributeNameChanged", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMCharacterDataModified", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMElementNameChanged", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMNodeInserted", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMNodeInsertedIntoDocument", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMNodeRemoved", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMNodeRemovedFromDocument", function() {
					window.location.reload();
				}, true);
				window.addEventListener("DOMSubtreeModified", function() {
					window.location.reload();
				}, true);
			}
		</script>
	</body>
</html>