网页防止内容复制奇遇记

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

一、什么情况

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

二、神马问题

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

三、怎么解决

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

1 document.getElementsByTagName(‘body‘)[0].oncontextmenu = function(){window.event.returnValue=true;}
2 
3 document.getElementsByTagName(‘body‘)[0].onselectstart = function(){window.event.returnValue=true;}

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

四、有高级点的方法吗？

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

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

　　同事又抱怨了，这不还是要打开调试器吗？我最终在几天后做了一个chrome 插件处理这个问题，至于chrome插件怎么写，网上应该有好多这类的文章。实现两行脚本注入，应该还是比较简单的。

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

网页防止内容复制奇遇记

原文：http://www.cnblogs.com/webARM/p/5133889.html