web 頁面阻止使用者F12篡改頁面元素和資料
阿新 • • 發佈：2019-01-22
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.oncontextmenu=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.oncontextmenu=function(){return!1},window.onkeydown=window.onkeyup=window.onkeypress=function(){return window.event.returnValue=!1,!1},window.onresize=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以下瀏覽器，還有就是隻適用於展示資料，如果和使用者有互動的頁面使用不了，因為使用者每次修改資料都會導致重新載入頁面。