JavaScript 实现禁止打开控制台(右键/工具栏/F12/Shift+Ctrl+I)

前两天分享的插件 WP Content Copy Protection & No Right Click——深度保护您的网站内容 有网友说可以把检查代码的功能给屏蔽了,经我个人测试发现我们依旧可以通过 F12、Shift+Ctrl+I等一些操作将控制台调取出来,为了更好地保护网站内容,决定分享一篇如何禁止用户打开控制台的文章,也就有了此文。

网上找的很多代码不管用,最后在 wangning1125 博客上发现下面这段代码测试有效,分享给大家。先把原版代码放在下面:

<!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'> 
    //禁用右键(防止右键查看源代码) 
    window.oncontextmenu=function(){return false;} 
    //禁止任何键盘敲击事件(防止F12和shift+ctrl+i调起开发者工具) 
    window.onkeydown = window.onkeyup = window.onkeypress = function () { 
        window.event.returnValue = false; 
        return false; 
    } 
    //如果用户在工具栏调起开发者工具,那么判断浏览器的可视高度和可视宽度是否有改变,如有改变则关闭本页面 
    var h = window.innerHeight,w=window.innerWidth; 
    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); 
    } 
</script> 
</body> 
</html>

代码本身应该说没有什么问题,但是后面“通过监听页面元素变化来重新加载页面”的代码对于一些页面上有太多效果的网站获取会导致你的网站崩溃,比如我博客上因为设置了标题滚动(具体请看这篇文章:JavaScript 实现网站标题自定义、滚动、闪烁),这段代码就会监听到我博客上标题元素被修改,导致网站一遍遍的加载,最后的结果可想而知。。。所以说为了避免网站崩溃而又不影响网站美观我们只能退而求其次,只将以下代码复制到你主题的 footer.php 文件中去,或者任何你希望用户禁止查看控制台的页面中即可:

<script type='text/javascript'> 
    //禁用右键(防止右键查看源代码) 
    window.oncontextmenu=function(){return false;} 
    //禁止任何键盘敲击事件(防止F12和shift+ctrl+i调起开发者工具) 
    window.onkeydown = window.onkeyup = window.onkeypress = function () { 
    window.event.returnValue = false; 
        return false; 
    } 
    //如果用户在工具栏调起开发者工具,那么判断浏览器的可视高度和可视宽度是否有改变,如有改变则关闭本页面 
    var h = window.innerHeight,w=window.innerWidth; 
    window.onresize = function () { 
        if (h!= window.innerHeight||w!=window.innerWidth){ 
            window.close(); 
            window.location = "about:blank"; 
        } 
    } 
</script> 

由于代码是 JavaScript 的,也就是说当用户浏览器禁止 JavaScript 的话代码会失效,不过对于提高一些恶意搞事情的难度还是有一定作用的。

js禁止复制页面文字

做项目的时候有客户提出要求,不能用用户浏览他发表的文章时复制他的文章

<script type="text/javascript">
	window.addEventListener('keydown', function (e) {
	    if(e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)||e.keyCode == 122||e.keyCode == 123||e.keyCode == 17||e.keyCode == 18){
	        e.preventDefault();
	        window.event.returnValue= false;  
	    }
	    if(e.ctrlKey && e.keyCode== 65){
            e.preventDefault();
            window.event.returnValue= false;     
        }
	    if(e.ctrlKey && e.keyCode== 67){
            e.preventDefault();
            window.event.returnValue= false;     
        }

	});
	window.onload=function(){
	    document.oncontextmenu=function(){
	        return false;
	    }
	}
	document.oncontextmenu = new Function("event.returnValue=false");
	document.onselectstart = new Function("event.returnValue=false");
</script>

一种比较简单的方法,禁止用户选中页面的文字和禁止用户右键菜单

 

1

2

document.oncontextmenu = new Function("event.returnValue=false");

document.onselectstart = new Function("event.returnValue=false");

如果只是禁止部分区域的话,直接在标签上加上onselectstart=“return false”

1

2

3

<div onselectstart="return false" id="div" >

此区域禁止复制

</div>

 或者

1

2

3

4

5

6

7

8

9

10

<div onselectstart="return false" id="div" >

此区域禁止复制

</div>

<script type="text/javascript" >

    $(document).ready(function(){

          document.getElementById('div').onselectstart =function(){

                return false;

          };

    });

</script>   

 

在火狐下这种js写法是无效的

在火狐下有个屏蔽选择样式的样式属性 -moz-user-select (只支持火狐浏览器)

 

1

2

3

<div style="-moz-user-select:none;" >

    禁止复制此区域

</div>

 

如果要禁止整个页面

1

2

3

4

5

<script type="text/javascript" >

    $(document).ready(function(){

         $("body").css("-moz-user-select","none");

    });

</script>  

-moz-user-select主要有三个值 none -moz-all -moz-none

 

 Input表单中文字一般页面文字
none不可选不可选
-moz-all不可选可选
-moz-none可选不可选
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值