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='text/javascript'>
/*如果设置开发者工具独立窗口显示，则不会改变原来网页的高度和宽度，
* 当你通过浏览器设置—打开开发者工具，则直接关闭当前窗口，让你无法查看网页元素。（不支持IE9以下浏览器）*/
if(window.addEventListener){
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMAttributeNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMElementNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInserted", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInsertedIntoDocument", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemoved", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemovedFromDocument", function(){
window.close(); }, true);
window.addEventListener("DOMSubtreeModified", function(){
window.close(); }, true);
}
</script>
4. 完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta 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>
<script type='text/javascript'>
//1.禁用右键（防止右键查看源代码）
window.oncontextmenu=function(){
return false;}
//2.禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
//3.当用户在工具栏调起开发者工具，判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
var h = window.innerHeight,w=window.innerWidth;
window.onresize = function () {
if (h!= window.innerHeight||w!=window.innerWidth){
window.close(); //关闭浏览器
}
}
/*4.当开发者工具独立窗口显示，则不会改变原来网页的高度和宽度，
* 因此，当通过浏览器设置—打开开发者工具，则直接关闭当前窗口，让你无法查看网页元素。（不支持IE9以下浏览器）*/
if(window.addEventListener){
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMAttributeNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMElementNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInserted", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInsertedIntoDocument", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemoved", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemovedFromDocument", function(){
window.close(); }, true);
window.addEventListener("DOMSubtreeModified", function(){
window.close(); }, true);
}
</script>
</head>
<body>
这是一段文本内容,这是一段文本内容,这是一段文本内容,
<br />
这是一段文本内容,这是一段文本内容,这是一段文本内容,
<br />
<video autoplay="autoplay"
controls="controls"
src="video/1实验一：Python安装与开发环境搭建.mp4"
width="500px">
</video>
</body>
</html>
5.实现效果
