js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome

 更新时间:2020年10月01日 19:01:09   投稿:mdxy-dxy  
最近想给JS特效与模板预览页面加上屏蔽查看源文件,防治整理不易的源码被轻易拿走,发现IE、火狐、chrome等各类浏览器支持不一样。下面是脚本之家整理的一些屏蔽总结

键盘事件

一般处理键盘按键事件我们采用这样的方式

document.onkeydown=function (event) {
  //检测按下哪个键,作相应处理
};

event为键盘事件,对于chrome,firefox,IE(Edge),IE10,IE9均能支持function自带的e,而ie8以下只能识别windows.event,所以一般兼容写法为:event=event||window.event。获取按键码一般是event.keyCode,这个对各大浏览器都是兼容的。

document.onkeydown=function (event) {
   event=event||window.event;
   var key=event.keyCode;
   //检测按下哪个键,作相应处理
   if(key==...){
}    
 };

屏蔽浏览器默认事件的方法大致有三种:
1)event.preventDefault()
2)event.returnValue=false;
3)return false;

firefox的特殊方式支持是指,firefox这里一个比较坑爹的地方是,firefox需增加一个延迟才能生效,不然仍然会跳出浏览器的保存当前页面窗口,如下:

document.onkeydown=function (event) {
        //判断按键 
         var key=event.keyCode;
        if(key== 83 && e.ctrlKey){
            /*延迟,兼容FF浏览器 */
            setTimeout(function(){
              alert('ctrl+s');
            },1);
            event.preventDefault();//或者是 return false;  
          }

而IE10,IE9,IE8以下对于event.returnValue=false的特殊方式支持是指键盘事件event必须为window.event时ctrl+s的默认事件才能屏蔽,在event=event||window.event的兼容写法中,IE8及以下的形参event是空,所以会取值为window.event,而IE10,IE9的function形参event是有效的,所以取值直接为event,因此IE10,IE9在写法为event=event||window.event时会屏蔽ctrl+s失效。

假如要让所有IE版本能够屏蔽Ctrl+S,event取值只能是window.event了。由于window.event没有方法preventDefautl,所以屏蔽默认事件方法只能用return false;

兼容IE、firefox、chrome,屏蔽Ctrl+s的写法为

document.onkeydown=function (e) {
       e=window.event||e;
       if(key== 83 && e.ctrlKey){
          /*延迟,兼容FF浏览器 */
          setTimeout(function(){
           alert('www.qdxw.net');
          },1);
          return false;   
        }  
      };

屏蔽鼠标右键的写法

window.document.oncontextmenu = function (){
   alert('亲,你想干嘛,不要做坏事哦');
   return false;
 }

如果当前页面里含有iframe 那么iframe里的右键依然可用

屏蔽页面里iframe里的右键写法

document.getElementById('web').onload = function(){
  window.document.getElementById('web').contentWindow.document.oncontextmenu = function(){
    alert('www.qdxw.net');
    return false;
    } 
}

web是iframe标签的ID属性。

相关文章

  • echarts整合多个类似option的方法实例

    echarts整合多个类似option的方法实例

    这篇文章主要给大家介绍了关于echarts整合多个类似option的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • 详解JS模块导入导出

    详解JS模块导入导出

    这篇文章主要介绍了详解JS模块导入导出以及相关问题解决方法,需要的朋友学习参考下吧。
    2017-12-12
  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的,本人亲自完成,有错误请大家指出
    2013-11-11
  • 如何使用Bootstrap 按钮实例详解

    如何使用Bootstrap 按钮实例详解

    本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式。具体通过本文实例详解
    2017-03-03
  • js获取及判断键盘按键的方法

    js获取及判断键盘按键的方法

    这篇文章主要介绍了js获取及判断键盘按键的方法,涉及JavaScript键盘事件的获取及键值的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • video.js添加自定义组件的方法

    video.js添加自定义组件的方法

    这篇文章主要介绍了videojs添加自定义组件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • 学习JavaScript设计模式(接口)

    学习JavaScript设计模式(接口)

    这篇文章主要带领大家学习JavaScript设计模式,其中重点介绍接口,举例说明什么是接口,对接口进行详细剖析,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 一文了解TypeScript数据类型

    一文了解TypeScript数据类型

    本文主要介绍了TypeScript数据类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • 关于JS精度丢失产生的原因以及解决方案

    关于JS精度丢失产生的原因以及解决方案

    在处理一些极端情况下的复杂数值计算时,我们可能会遇到这样的情况,就是运算结果丢失精度,下面这篇文章主要给大家介绍了关于JS精度丢失产生的原因以及解决方案的相关资料,需要的朋友可以参考下
    2024-01-01
  • JS快速实现简单计算器

    JS快速实现简单计算器

    这篇文章主要为大家详细介绍了JS快速实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04

最新评论