网页防止内容复制奇遇记

最近发生一件挺有意思的事情——同事给我一个网址，说为什么页面中的文字和图片为什么不能选中，看他着急用页面里面的内容写文档加上我的好奇心。就帮忙看了看。

一、什么情况

　　拿到页面的第一反应是页面中是不是有什么属性（后来发现不是），不管怎样打开调试工具看看吧。这是我遇到了一个问题，右键无效，看来问题不是我想的那么简单。观察一下页面是全局不能右键，全局不能选中。那问题多半发生在最外层的标签上。打开一看，见下图，真相浮出水面了。

      

二、神马问题

　　

　　注意body标签中的 oncontextmenu 和 onselectstart 这两个事件函数 都是 event.returnValue=false。猜想这应该是让这两个事件无效的意思。那么这两个事件函数之前是干什么的。查了一下oncontextmenu 是上下文菜单（右键）的事件回调；onselectstart是选中开始的时间回调。这也解释了为什么我的右键不好使，又选不了内容了。

三、怎么解决

　　现在的这两个回调函数都被定义成无效了。我们就要让他有效——重写函数。在控制台（console）输入如下代码

document.getElementsByTagName('body')[0].oncontextmenu = function(){window.event.returnValue=true;}

document.getElementsByTagName('body')[0].onselectstart = function(){window.event.returnValue=true;}

改成true了，回车运行看看。页面的内容可以选中了，右键也好使了。

四、有高级点的方法吗？

　　同事说每次都输入代码到控制台，他又不是开发人员，怕搞不定，还要每次找我。我看他的浏览器也是chrome，我提供了这样一个方案。

　　在 chrome->F12->sources->snippets中新建一个snippet（右键 -》 new）。保存上面的代码段，需要的时候run一下这个snippet 就好了。如下：

　　

　　通过这次，我深深感到，自己不知道的东西太多太多了！