web 页面阻止用户F12篡改页面元素和数据

最新推荐文章于 2024-09-16 19:12:02 发布

IT小智

最新推荐文章于 2024-09-16 19:12:02 发布

阅读量1.5w

点赞数 1

分类专栏： javascript 综合文章标签： debug web F12 禁止调试

综合同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

javascript

19 篇文章 0 订阅

订阅专栏

web 页面阻止用户F12篡改页面元素和数据

      Js代码   
      
    
 <!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 type='text/javascript'>  
 //这段js要放在页面最下方  
 var h = window.innerHeight,w=window.innerWidth;  
 //禁用右键 （防止右键查看源代码）  
 window.οncοntextmenu=function(){return false;}  
 //在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）  
 window.onkeydown = window.onkeyup = window.onkeypress = function () {  
     window.event.returnValue = false;  
     return false;  
 }  
 //如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面  
 window.onresize = function () {  
     if (h != window.innerHeight||w!=window.innerWidth){  
         window.close();  
         window.location = "about:blank";  
     }  
 }  
 /*好吧，你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度， 
 但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素（不支持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);  
 }  
    
 //压缩后的代码  
 //var h=window.innerHeight,w=window.innerWidth;window.οncοntextmenu=function(){return!1},window.οnkeydοwn=window.οnkeyup=window.οnkeypress=function(){return window.event.returnValue=!1,!1},window.οnresize=function(){(h!=window.innerHeight||w!=window.innerWidth)&&(window.close(),window.location="about:blank")},window.addEventListener&&(window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},!0),window.addEventListener("DOMAttributeNameChanged",function(){window.location.reload()},!0),window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},!0),window.addEventListener("DOMElementNameChanged",function(){window.location.reload()},!0),window.addEventListener("DOMNodeInserted",function(){window.location.reload()},!0),window.addEventListener("DOMNodeInsertedIntoDocument",function(){window.location.reload()},!0),window.addEventListener("DOMNodeRemoved",function(){window.location.reload()},!0),window.addEventListener("DOMNodeRemovedFromDocument",function(){window.location.reload()},!0),window.addEventListener("DOMSubtreeModified",function(){window.location.reload()},!0))  
   
 </script>  
 </body>  
 </html>  