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>
不完美的地方在於不支持IE9以下瀏覽器，還有就是隻適用於展示數據，如果和用戶有交互的頁面使用不了，因爲用戶每次修改數據都會導致重新加載頁面。