JavaScript实现网页内容保护

0.业务场景

如果你需要对网站展示的内容进行保护，例如：
1.文本内容防复制；
2.图片防止下载；
3.视频防下载；
此处通过js对网页内容进行保护，下面我会通过3种方案，对我们的网页内容由浅入深的进行保护。

1.禁止选择网页文本内容

设置css样式，禁止用户选中文本内容。因此，解决用户无法直接复制粘贴我们的网站内容。

<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> 

2.禁用右键(防止查看网页源代码)

在网页中禁止鼠标右键，则防止用户查看网页源代码，以及进行审查元素。

<script type='text/javascript'> 
		    //禁用右键（防止右键查看源代码） 
		    window.oncontextmenu=function(){
   return false;} 
</script>

3.防止启动开发者调试工具

3.1 禁止任何键盘敲击事件

防止用户通过快捷键F12启动开发者调试工具
防止用户通过ctrl+shift+i启动快捷键工具

<script type='text/javascript'>
			//禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具） 
		    window.onkeydown = window.onkeyup = window.onkeypress = function () {
    
		        window.event.returnValue = false; 
		        return false; 
		    } 
</script>

3.2 防止在浏览器—设置—启动开发者工具

用户可以在浏览器的工具栏打开开发者调试工具，以谷歌浏览器为例：点击"设置"——“更多工具”——开发者工具。

<script type='text/javascript'>
//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面 
		    var h = window.innerHeight,w=window.innerWidth; 
		    window.onresize = function () {
    
		        if (h!= window.innerHeight||w!=window.innerWidth){
    
		            window.close(); 
		         
		        } 
		    } 
</script>

如果设置了开发者工具脱离当前浏览器，即独立显示，则增加如下代码：

<script type=