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属性。

相关文章

  • JS+JSP通过img标签调用实现静态页面访问次数统计的方法

    JS+JSP通过img标签调用实现静态页面访问次数统计的方法

    这篇文章主要介绍了JS+JSP通过img标签调用实现静态页面访问次数统计的方法,基于JavaScript动态调用jsp页面通过对TXT文本文件的读写实现统计访问次数的功能,需要的朋友可以参考下
    2015-12-12
  • JS自动适应的图片弹窗实例

    JS自动适应的图片弹窗实例

    这篇文章介绍了JS自动适应的图片弹窗实例代码,有需要的朋友可以参考一下
    2013-06-06
  • TS中type和interface的区别解析

    TS中type和interface的区别解析

    对于type来说,更多的是对类型的一种复用,比如在项目中需要用到一些比较复杂的或者书写起来很长的类型,而对于 interface来说,它是正儿八经的用来定义接口类型(约束数类型和属性)的,且接口类型是支持继承和声明合并的,感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • JS 生态系统加速Polyfill函数使用实例探索

    JS 生态系统加速Polyfill函数使用实例探索

    这篇文章主要介绍了JS 生态系统加速Polyfill函数使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • 一篇文章教你JS函数继承

    一篇文章教你JS函数继承

    这篇文章主要介绍了js继承方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-09-09
  • ajax中get和post的说明及使用与区别

    ajax中get和post的说明及使用与区别

    对付乱码我都是用过滤器做字符编码过滤的,Get方法过滤器监听不到,所以我一直喜欢使用Post方法,下面对Ajax Get和Post方法做一对比,需要了解的朋友可以 参考下
    2012-12-12
  • 怎么在下面的HTML里调用数组cs[]的值

    怎么在下面的HTML里调用数组cs[]的值

    怎么在下面的HTML里调用数组cs[]的值...
    2007-01-01
  • OpenLayer3自定义测量控件MeasureTool

    OpenLayer3自定义测量控件MeasureTool

    这篇文章主要为大家详细介绍了OpenLayer3自定义测量控件MeasureTool,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript基于setTimeout实现计数的方法

    JavaScript基于setTimeout实现计数的方法

    这篇文章主要介绍了JavaScript基于setTimeout实现计数的方法,涉及javascript中setTimeout方法的使用技巧,需要的朋友可以参考下
    2015-05-05
  • 详解JS中遍历语法的比较

    详解JS中遍历语法的比较

    本篇文章主要介绍了详解JS中遍历语法的比较 ,主要介绍for循环、forEach、for...in、for...of的用法和缺点,有兴趣的可以了解一下。
    2017-04-04

最新评论