<!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以下浏览器，还有就是只适用于展示数据，如果和用户有交互的页面使用不了，因为用户每次修改数据都会导致重新加载页面。
相关推荐
在JavaScript编程中，有时开发者需要保护网页不被用户通过开发者工具（如F12或右键菜单）轻易篡改，以防止源代码被查看或恶意修改。本文将详细讲解如何使用JavaScript来实现屏蔽F12审查元素以及禁止修改页面代码的...
这个名为"chrome F12 根据类名找CSS及动画.zip"的压缩包文件，显然是为了帮助用户了解如何在Chrome浏览器中通过F12工具来查找和分析CSS样式以及动画效果。下面我们将详细探讨这个主题。 首先，Chrome的F12开发者...
很多站长为了仿止别人仿制或扒下自己的网页，都会选择使用禁止浏览器右键查看元素或F12审查元素，一旦查看元素浏览器页面就会自动关闭，下面话不多说了，来一起看看详细的介绍吧。 注：该代码不兼容火狐浏览器，对于...
我们需要学习如何使用CSS选择器选取元素，以及掌握盒模型、定位、过渡和动画等技巧，以实现仿微信支付页面的细节呈现，如按钮样式、背景图片和支付流程提示的动态效果。 【知识点三】：JavaScript交互逻辑 `script....
标题“H5缺省页（pc端禁止f12调试等操作）”提到的技术就是针对这种情况，旨在防止用户在PC端使用F12开发者工具对页面进行调试。这一方法主要依赖于JavaScript来实现，因此涉及到的知识点主要包括H5、前端技术和...
这个HTML页面可以包含输入框、按钮等元素，以供用户输入读取或写入的变量名。注意，变量名前应加上冒号，例如：“:VAR_NAME”。 在浏览器中打开这个HTML文件，按下F12以打开开发者工具，选择“Console”面板。这将...
在进行Web应用开发和调试时，浏览器的F12开发者工具是不可或缺的辅助工具，它可以帮助我们快速定位和解决问题。本文将重点解析F12调试页面中常见的几个返回值及其对应的处理方法，主要针对网络协议、Java服务器以及...
《RL78/F12用户手册》是瑞萨电子公司发布的一份关于16位单片机的数据手册，主要介绍了RL78/F12芯片的详细功能和使用方法。手册内容涵盖多个关键方面，旨在帮助设计者理解和应用该微控制器。 1. **概述(OUTLINE)** ...
这通常在防止用户篡改页面元素、抓取敏感数据或者进行非法操作时有所应用。 开发者工具是Web开发人员的强大辅助工具，但对普通用户开放可能会导致网站的不安全。因此，一些网站选择禁用这一功能。然而，需要注意的...
有时，虽然浏览器的开发者工具（如F12）显示请求成功并返回了数据，但页面上却无法正确显示。这种情况可能由以下原因造成： 1. **回调函数错误**：确保在Ajax的success或done回调中正确处理返回的数据，将其转换为...
F12 是浏览器中的一个非常强大且实用的开发者工具，它提供了多种功能，帮助开发者快速排查和解决问题。下面将介绍使用 F12 的一些基本排查技巧，以 Google 浏览器为例。 1. 元素（Elements）页面布局、样式排查 在...
### F12开发人员工具调试网页入门教程 #### F12开发人员工具简介 F12开发人员工具是一组强大的工具集，内置于Windows Internet Explorer 9中，旨在帮助网站开发人员快速调试网页上的JavaScript、HTML及CSS等问题，...
web服务器缓存实现原理,通过chrome f12观察web服务器缓存 后台action命中缓存hit Via X-cache X-Cache-Lookup
总的来说，"谷歌浏览器开发者汉化版"提供了一种更适合中国用户的浏览和开发体验，F12键激活的汉化开发者工具使得Web开发工作更加便捷，无论对于初学者还是经验丰富的开发者，都是一个非常实用的选择。如果你是Web...
F12工具会显示最终呈现给用户的HTML和CSS代码，而不是最初的HTML源码。这种特性使得调试变得更加直观和有效。 - **视图更新**：如果你修改了某个元素的属性但没有立即看到效果，可以通过在“HTML”选项卡中按下`F5`...
动态加载数据是指网页的部分内容不是一次性加载完成，而是通过JavaScript等技术在用户滚动页面或者触发某些事件时动态生成和更新。这种技术在提高用户体验、减少服务器压力方面具有显著优势，但也给网络爬虫带来挑战...
这份手册详细介绍了C8051F12x-13x系列单片机的特性和功能，旨在帮助用户更深入地理解和运用这些芯片。下面，我们将从几个主要方面详细阐述这份手册中的关键知识点。 1. **架构与体系** C8051F12x-13x系列基于高...
虽然scrapy能够完美且快速的抓取静态页面，但是在现实中，目前绝大多数网站的页面都是动态页面，动态页面中的部分内容是浏览器运行页面中的JavaScript脚本动态生成的，爬取相对困难； 比如你信心满满的写好了一个...
首先，360快速浏览器基于开源的Chromium项目，因此它的开发者工具与Google Chrome浏览器的DevTools非常相似，提供了丰富的功能和友好的用户界面。开发者可以方便地在浏览器中直接打开这些工具，通常通过按F12或者...