有些时候,我们可能想要禁止用户修改或者调试我们HTML页面的代码,这个时候需要组织用户打开调试窗口,下面介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提高打开调试的门槛,并不能完全杜绝。

禁用F12

对于使用F12打开调试窗口的方法,我们只要注册F12按键的处理方法,并阻止默认事件行为即可:

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
// 判断是否按下F12,F12键码为123
if (event.keyCode === 123) {
event.preventDefault(); // 阻止默认事件行为
window.event.returnValue = false;
}
}

禁用右键

对于使用右键菜单,在右键菜单里面选择查看源代码的行为,我们只要覆盖右键菜单点击事件的行为就即可:

// 为右键添加自定义事件,可以禁用
window.oncontextmenu = function() {
event.preventDefault(); // 阻止默认事件行为
return false;
}

禁用预先调试

就算是同时禁用掉F12和右键,用户还是可以提前打开调试窗口,然后在地址中输入网址,这样就算不用右键和F12也是打开调试窗口的。

另外用户也可以通过浏览器菜单打开开发者工具来开启调试窗口,还有诸如 shift+ctrl+i 的快捷键打开控制台。

对于这种预先打开调试窗口的方法,我们可以通过比较屏幕 window.outerWidth 和页面可见内容区域 window.innerWidth 的差距判断是否打开控制台。

var threshold = 160; // 打开控制台的宽或高阈值
// 每秒检查一次
setInternet(function() {
if (window.outerWidth - window.innerWidth > threshold ||
window.outerHeight - window.innerHeight > threshold) {
// 如果打开控制台,则刷新页面
window.location.reload();
}
}, 1e3);

这种方法对于像IE8这种,打开调试窗口是在一个新的Windows窗口中,而不是在当前页面的下面或者上面的情况会失效。

原文地址:http://uusama.com/543.html

禁止用户打开HTML页面调试的更多相关文章

  1. 010医疗项目-模块一:用户添加的实现(Dao,Service,Action,增加页面调试,提交页面调试)

    要实现的效果:

  2. 判断手机端用户打开页面时是android还是ios,并将判断结果通过ajax返回给url接口,传递回去

    首先判断页面是android还是ios,然后利用ajax将结果通过接口url返回回去,记录到log日志中,以统计android和ios用户访问该页面的数量(数据统计) <script type= ...

  3. Ajax异步打开新页面弹框被拦截,无法将参数值传递到后台

    一.Form提交,打开新页面被拦截 手动触发Form提交打开新页面是不会被拦截的,但是如果通过Ajax异步处理回调后再程序自动触发Form提交的话,就会被浏览器当成广告弹框拦截 1.暂时的解决办法:如 ...

  4. 纯CSS如何禁止用户复制网页的内容?

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  5. 移动端页面调试神器-browser-sync

    最近公司赶一个项目,是mobile端,之前没怎么做过移动端的开发,这个项目算是个小尝试. 在做项目的过程中,用到了一个神器--browser-sync,在这里分享给大家. 1.静态页面调试 作为前端, ...

  6. ASP.net 实现禁止用户重复登录

    本文先为大家介绍如何利用缓存Cache方便地实现此功能. Cache与Session这二个状态对像的其中有一个不同之处,Cache是一个全局对象,作用的范围是整个应用程序,所有用户:而Session是 ...

  7. 解决ios下的微信打开的页面背景音乐无法自动播放

    后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...

  8. A、B同时打开一个页面进行同一条数据库记录进行修改,A修改完成后提交表单,A修改的数据保存完成后;当B也修改完成后,提交数据进行数据修改。此时B修改的内容会覆盖A修改的内容,请问如何避免?

    A.B同时打开一个页面进行数据中的一条数据进行修改,A修改完成后提交表单,数据修改保存完成后B开始页面也修改完成,开始提交进行修改.此时B修改的内容会覆盖A的内容,请问如何避免? 通过搜索和我个人总结 ...

  9. 微信跳转,wap网页跳转微信打开指定页面

    最近一朋友的客户有这么一需求,wap网页跳转微信打开指定页面,让用户去关注公众号.想这么干,通过网页跳转到微信并打开带有二维码的网页,用户长按识别二维码就可以关注了.想法很好,于是去搜索了“微信跳转, ...

随机推荐

  1. 转 Singleton clr via c#3

    /// <summary> /// 注意 只有在构造器没有副作用的时候才能使用这个技术 /// </summary> class Singleton { private sta ...

  2. 微信网页悬浮窗交互效果的web实现

    一.微信的悬浮窗交互效果 微信更新后,发现多了个悬浮窗功能.公众号阅读,网页浏览回退后默认会出现.再点击,可以回到刚才阅读的地方.于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了 ...

  3. Spring + SpringMVC + Mybatis项目中redis的配置及使用

    maven文件 <!-- redis --> <dependency> <groupId>redis.clients</groupId> <art ...

  4. AtiveMQ初次连接的 http error:503 连接错误 Prolem accessing /.Reason : Service Unavailable

    503错误 说明是服务器内部的错误了 这是 为什么嫩  这是因为你的Linux虚拟机(我用的是centos版本的)的机器名 和 你的 ip地址的映射关系 不一致  导致访问失败 查看机器名的地址:ca ...

  5. pyhton 监听文件输入实例

    def tail(filename): f = open(filename,encoding='utf-8') while True: line = f.readline() if line.stri ...

  6. php 跨数据库调取数据

    我的这个是thinkphp,我就在 Application -> Common -> Conf -> config.php 文件里面配置数据库的地方,加入了下面这段代码 //'数据库 ...

  7. css实现超出两行隐藏

    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-l ...

  8. Senparc.Weixin.MP SDK 微信公众平台开发教程(二十):使用菜单消息功能

    在<Senparc.Weixin.MP SDK 微信公众平台开发教程(十一):高级接口说明>教程中,我们介绍了如何使用“客服接口”,即在服务器后台,在任意时间向微信发送文本.图文.图片等不 ...

  9. 配置vscode同步大神玺哥的配置

    1.应用商店下载settings  sync 2.三键 ctrl + shift + p   对话框中输入sync:点击重置 3.ctrl + shift + p  点击下载 4.然后会自动的调整到g ...

  10. 使用vue+ivew做2048小游戏

    首先先弄页面 废话不多说 上代码 静态页面代码 <template> <div class="main"> <div class="top& ...